@font-face {
    font-family: "mario";
    src: url("/fonts/MarioBrosDS.ttf?#iefix") format("truetype");
}
h2{
  font-weight: lighter;
  font-size: 16px;
  margin: 2px;
}
/*make that sick and organized layout*/
.grid-container {
    display: grid;
    grid-template-columns: auto 220px 0px 700px 0px 220px auto;
    gap: 10px;
    background-color: none;
    padding: 10px;
}
.grid-container > div {
    border: double blue;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.7);
    text-align: center;
    padding: 8px;
}
.header {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 7;
    padding: 20px;
}
.links_left {
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 2;
    grid-column-end: 2;
    padding: 0px;
}
.goodies {
    grid-row-start: 4;
    grid-row-end: 5;
    grid-column-start: 2;
    grid-column-end: 2;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 200px;
}
.music {
    grid-row-start: 5;
    grid-row-end: 7;
    grid-column-start: 2;
    grid-column-end: 2;
    padding: 0px;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 500px;
    font-size: 12px;
}
.middle {
    grid-row-start: 3;
    grid-row-end:  7;
    grid-column-start: 3;
    grid-column-end: 6;
  }
.links_right {
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 6;
    grid-column-end: 7;
}
.fish {
    grid-row-start: 4;
    grid-row-end: 5;
    grid-column-start: 6;
    grid-column-end: 6;
}
.chatbox {
    grid-row-start: 5;
    grid-row-end: 7;
    grid-column-start: 6;
    grid-column-end: 6;
  }
.footer {
    grid-row-start: 7;
    grid-column-start: 2;
    grid-column-end: 7;
}
/*make it look pretty!!!*/
body {
    color: cyan;
    background: black;
    background-image: url("https://cinni.net/images/web/bg/spacebg.gif");
    font-family: 'mario', sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: none;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
a{
    color: magenta;
    text-decoration: none;
}
p.underline{
    font-size: 28px;
    color:cyan;
    border-bottom: 2px ridge blue;
    padding-bottom: 4px;
    margin-bottom: -14px;
    margin-top: 4px;
    margin-left: -8px;
    margin-right: -8px;
}
/*cool list for links_left*/
    #cool-list{
        color: rgb(255, 0, 255);
        border-bottom: 1px solid blue;
        padding-top: 6px;
        padding-bottom: 3px;
        margin-left: -8px;
        margin-right: -8px;
        text-align: center;
        font-size: 16px;
    }
    #cool-list:hover{
        color: white;
        border-bottom: 1px dashed white;
        padding-right: 20px;
        text-align: right;
        }
/*MUSIC SHIT*/
    audio{
        scale:100%;
        width: 90%;
        min-width: 150px;
        height: 20px;
        padding:1px;
        border: 3px double yellow;
        border-radius: 50px;
        transform: skewx(-20deg);
        filter: invert(100%) contrast(175%) drop-shadow(3px 3px 1px rgb(190, 9, 121)) ;
        position:relative;
        left: -.2vw;
        image-rendering: pixelated;
    }
    audio::-webkit-media-controls-play-button {
      margin-left: -15px;
      scale: 60%;
    }
    audio::-webkit-media-controls-current-time-display {
      display: none;
    }
    audio::-webkit-media-controls-time-remaining-display{
      display: none;
    }
    audio::-webkit-media-controls-mute-button {
      background-color:yellow;
      padding: 2px;
      scale: 65%;
      border-radius: 4px;
      margin-right: -10px;
    }
    audio::-webkit-media-controls-volume-slider {
      background-color: yellow;
      margin-right: -6px;
      margin-left: 50px;
    }
    audio::-webkit-media-controls-timeline {
      background-color: #ffffff;
      margin-left: -20px;
      margin-right: -58px;
    }
/*SCROLLBAR!*/
    *::-webkit-scrollbar {
      width: 12px;
      height: 12px;
    }
    *::-webkit-scrollbar-track:vertical {
      background-image: linear-gradient(darkblue, black, purple);
      border: 1px solid blue;
      border-radius: 0px;
    }
    *::-webkit-scrollbar-track:horizontal{
      background-image: linear-gradient(to right, darkblue, black, purple);
      border: 1px solid blue;
    }
    *::-webkit-scrollbar-thumb {
      background-color: rgb(23, 220, 255);
      border-radius: 0px;
      border: 2px outset cyan; 
      scrollbar-width: 12px;

    }
    *::-webkit-scrollbar-button {
      background-color: purple;
      height: 12px;
      border: 1px solid blue; 
    }
    *::-webkit-scrollbar-button:single-button:vertical:decrement {
      height: 12px;
      width: 12px;
      background-position: center 9px;
      background-image: url("/images/buttons/up.gif");
    }
    *::-webkit-scrollbar-button:single-button:vertical:increment {
      height: 12px;
      width: 12px;
      background-position: center 9px;
      background-image: url("/images/buttons/down.gif");
    }
    *::-webkit-scrollbar-button:single-button:horizontal:increment {
      height: 12px;
      width: 12px;
      background-position: center 9px;
      background-image: url("/images/buttons/right.gif");
    }
    *::-webkit-scrollbar-button:single-button:horizontal:decrement {
      height: 12px;
      width: 12px;
      background-position: center 9px;
      background-image: url("/images/buttons/left.gif");
    }
    *::-webkit-scrollbar-corner{
      background-image: url("/images/buttons/spin.gif");
    }
/*DAMN BUTTON*/
    #damnbutton{
      background-image: url('/images/buttons/damn_button_01.gif');
      width: 164px;
      height: 90px;
    }
    #damnbutton:hover{
      background-image: url('/images/buttons/damn_button_02.gif');
    }
    #damnbutton:active{
      background-image: url('/images/buttons/damn_button_03.gif');
    }