::selection {
  background: #000;
  color: #fff;
}

/*Customizes scroll bar*/
/* width */
::-webkit-scrollbar
{
  width: 15px;
}

/*Customizes color of the direction buttons*/  
::-webkit-scrollbar-button:start {
    background-color: #000;
}

::-webkit-scrollbar-button:end {
    background-color: #000;
}

/*Customizes color of Handle */
::-webkit-scrollbar-thumb
{
  background-color: #000;
  border: 1px solid #6e6e6e;
}

/*Customizes color of Handle hover*/
::-webkit-scrollbar-thumb:hover {
  background-color: #606060;
  border: 1px solid black;
}  
  
/*Customizes color of Track */
::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px #000;
  background-color: #1c1c1c;
}


/* Scrollbar Buttons */
/*Width*/  
::-webkit-scrollbar-button
{
  height: 16px;
  width: 16px;
}

/* Up */
::-webkit-scrollbar-button:vertical:decrement
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/0yt2dVc/Arrow-Up.png");
}

/*Up Hover*/  
::-webkit-scrollbar-button:vertical:decrement:hover
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/Fn2qWmj/Arrow-Up-hover.png");
}


/* Down */
::-webkit-scrollbar-button:vertical:increment
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/rGMFVKm/Arrow-Down.png");
}

/*Down Hover*/  
::-webkit-scrollbar-button:vertical:increment:hover
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/PYWv05Q/Arrow-Down-hover.png");
}


/* Left */
::-webkit-scrollbar-button:horizontal:decrement
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/brJnjD4/Arrow-Left.png");
}

/*Left Hover*/  
::-webkit-scrollbar-button:horizontal:decrement:hover
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/0rQhWN5/Arrow-Left-hover.png");
}


/* Right */
::-webkit-scrollbar-button:horizontal:increment
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/4dyTzJt/Right.png");
}

/*Right Hover*/
::-webkit-scrollbar-button:horizontal:increment:hover
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/qrRZ8CR/Right-Hover.png");
}

/* Animations */
@-webkit-keyframes bg-scrolling-reverse {
  100% {
    background-position: right bottom;
  }
}
@-moz-keyframes bg-scrolling-reverse {
  100% {
    background-position: right bottom;
  }
}
@-o-keyframes bg-scrolling-reverse {
  100% {
    background-position: right bottom;
  }
}
@keyframes bg-scrolling-reverse {
  100% {
    background-position: right bottom;
  }
}
@-webkit-keyframes bg-scrolling {
  0% {
    background-position: left top;
  }
}
@-moz-keyframes bg-scrolling {
  0% {
    background-position: left top;
  }
}
@-o-keyframes bg-scrolling {
  0% {
    background-position: left top;
  }
}
@keyframes bg-scrolling {
  0% {
    background-position: left top;
  }
}

/* Main styles */
body {
  margin-top: 15px;
  color: black;
  font: 400 16px/1.5 exo, ubuntu, "segoe ui", helvetica, arial, sans-serif;
  text-align: center;
  /* img size is 50x50 */
  background: url("https://zyozi.neocities.org/assets/album%20cover%20background.jpg") repeat;
  background-size: 70%;
  -webkit-animation: bg-scrolling-reverse 60s infinite;
  /* Safari 4+ */
  -moz-animation: bg-scrolling-reverse 60s infinite;
  /* Fx 5+ */
  -o-animation: bg-scrolling-reverse 60s infinite;
  /* Opera 12+ */
  animation: bg-scrolling-reverse 60s infinite;
  /* IE 10+ */
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
}

.pickgradient {
  display:inline-block;
  z-index: 10;
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

a:not(.button) {
  text-decoration: none;
  color: #64417d;
}
a:hover:not(.button) {
  text-decoration: line-through;
  color: #852dc4;
}

.album-image {
  background-image: url("https://zyozi.neocities.org/assets/emo-shit.jpg");
  background-color: rgba(0, 0, 0, 0.6);
  height: 200px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

@font-face {
  font-family: 'MS Gothic';
  src: url(https://zyozi.neocities.org/assets/msgothic/MS%20Gothic.ttf);
}

:root {
  --grid-bg: rgba(255, 255, 255, 1);
}

.header { 
    background: #000;
  grid-area: header;
  padding: 0px;
}

.menu { 
    background: var(--grid-bg);
    grid-area: menu;
    width: 200px;
    padding: 6px;
    font-size:13px;
    font-family: 'MS Gothic';
    line-height: 15px;
}
.menu h1{
  font-size:16px;
  font-weight: bold;
  font-family: 'MS Gothic';
  letter-spacing: 2px;
  width: 180px;
  padding: 4px;
  line-height: 15px;
  margin: 0px;
  margin-top: 5px;
}

.main { 
    background: var(--grid-bg);
    grid-area: main;
    padding: 5px;
    width: 540px;
    height: 500px;
    margin: 0px;
    line-height: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
    box-sizing: border-box;
}

.right { 
    background: var(--grid-bg);
    grid-area: right; 
    padding: 5px;
    margin: 0px;
    width: 160px;
    line-height: 20px
}
.right p, .right ul, .right a {
  text-align: left;
  font-size:13px;
  font-family: 'MS Gothic';
  width: 140px;
  padding: 5px;
  line-height: 15px;
  margin: 0px;
}
.right h1{
  font-size:16px;
  font-weight: bold;
  font-family: 'MS Gothic';
  letter-spacing: 2px;
  width: 130px;
  padding: 5px;
  line-height: 15px;
  margin: 0px;
  margin-top: 5px;
}
.right img, .right a {
  margin: 0px;
}

.footer { 
    background: var(--grid-bg);
    grid-area: footer;
    padding: 5px;
    height: 50px;
}

.grid-container {
  width: 940px;
  height: auto;
  overflow-x: hidden;
  display: grid;
  grid-template-areas:
    'header header header header'
    'menu main main right'
    'menu footer footer footer';
  background-color: #000000;
  gap: 0px;
  margin: 5px;
  margin-left: auto;
  margin-right: auto;
}

.grid-container > div {
  border: 4px solid black;
  text-align: center;
}