html{
    background-image:url('https://biscuit2.crd.co/assets/images/image125.png?v=417d2f39');
    display: flex;
    justify-content: center;
    align-items: center;
}
 
body *::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background: none;
}

body *::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-button {
  width: 16px;
  height: 16px;
  background: silver;
  box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px gray;
  border: 1px solid;
  border-color: silver #000 #000 silver;
}

body *::-webkit-scrollbar-track {
  image-rendering: optimizeSpeed;
  image-rendering: pixelated;
  image-rendering: optimize-contrast;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAyIDIiIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyI+CjxtZXRhZGF0YT5NYWRlIHdpdGggUGl4ZWxzIHRvIFN2ZyBodHRwczovL2NvZGVwZW4uaW8vc2hzaGF3L3Blbi9YYnh2Tmo8L21ldGFkYXRhPgo8cGF0aCBzdHJva2U9IiNjMGMwYzAiIGQ9Ik0wIDBoMU0xIDFoMSIgLz4KPC9zdmc+");
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 2px;
}

body *::-webkit-scrollbar-button {
  background-repeat: no-repeat;
  background-size: 16px;
}

body *::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTcgNWgxTTYgNmgzTTUgN2g1TTQgOGg3IiAvPgo8L3N2Zz4=");
}

body *::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTQgNWg3TTUgNmg1TTYgN2gzTTcgOGgxIiAvPgo8L3N2Zz4=");
}

body *::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTggM2gxTTcgNGgyTTYgNWgzTTUgNmg0TTYgN2gzTTcgOGgyTTggOWgxIiAvPgo8L3N2Zz4=");
}

body *::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTYgM2gxTTYgNGgyTTYgNWgzTTYgNmg0TTYgN2gzTTYgOGgyTTYgOWgxIiAvPgo8L3N2Zz4=");
}

body *::-webkit-scrollbar-corner {
  background: silver;
}

a{
    text-decoration: none;
}

@font-face {
    font-family: "jupiter";
    src: url('https://file.garden/aRZ6nKC0BHrrKuUd/jupiter.ttf');
}

#musicplayer{ 
    font-family: 'jupiter';
    font-weight: bold;
    height:30px;
    width:100%;
    z-index: 99999;
    left:0;
    top:0;
    position:fixed;
    margin-bottom:20px;  
    display:flex;
    background: linear-gradient(180deg,#f70019 0%, #fb3434 45%, #630101 47%, #cc2d2d 100%);
    border:ridge 2px #290808;/* border around player */
    outline: solid 2px black;  
    box-shadow: inset 10px 0px 6px -10px #630115, inset -13px 0px 6px -10px #630101, inset 0px 10px 6px -10px #ff5959, inset 0px -13px 6px -10px #630101;
}
         
.songtitle{ 
    display:block;
    padding: 2px; /* padding around song title */
    font-family: "jupiter";
    margin-top:4px;
    margin-right: 5px; 
    font-size:15px;
    color:black;
    letter-spacing: 1px; 
    background: white;/* background of song title */
    border: gray inset 1px;
    border-radius:6px;
    box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
}
         
.controls{
    font-size:12px; /* size of controls */
    text-align:center;
    width:100px;
    height:20px;
    text-decortation:none;
    filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
}
         
.controls td{
    padding-top:5px; /* padding around controls */
}
         
.seeking{
    width:75%;
    background: transparent;/* background color of seeking bar */
    display:flex;
    justify-content: space-evenly;
    padding:7px; /* padding around seeking bar */
}
         
.current-time{  
    padding-right:5px;
    margin-right: 3px; 
    filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
}
         
.total-duration{
    padding-left:5px;
    filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
}
         
.ctrlimg {
   height:16px;
   width:16px;
}
.ctrlimg:hover{
    cursor:help;
}
            
input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}
            
input[type=range]:focus {
    outline: none;
}
            
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px; /* thickness of seeking track */
    cursor: help;
    border-radius: 6px;
    background: black; /* color of seeking track */
    border: 1px white solid;
}
        
input[type=range]::-webkit-slider-thumb { 
    height: 30px; /* height of seeking square */
    width: 20px; /* width of seeking square */
    background-image:  url('https://file.garden/Zztv0a9yEhr5pmEq/tumblr_40786d3985453eb5412348aad980ac51_3a9a1088_1280%20(1).gif'); /* image of  seeking square */
    background-size: 25px;
    -webkit-appearance: none;
    margin-top: -10px;
}
            
input[type=range].volume_slider::-webkit-slider-runnable-track { 
    background: white; /* color of volume seeking track */
    filter:drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);  /* outline of volume seeking track */ 
}
            
input[type=range].volume_slider::-webkit-slider-thumb {
    background-image: url(https://file.garden/Zztv0a9yEhr5pmEq/798d7d72_original.png);/* image of volume seeking square */
    background-size: 20px;
    height: 20px; /* height of volume seeking square */
    width: 20px; 
    margin-top: -8px;
}
              
.slider_container {  
    width: 15%;       /* width of volume seeker */
    display: flex;
    justify-content: center;
    align-items: center;
}       

#logo{
    height: 225px;
    display: block;
    float: left;
    margin-left: -10px;
    margin-top: -37px;
}

#head{
    display: block;
    float: left;
    margin-left: 385px;
    margin-top: -159px;
    width: 879px;
}

#navi{
    font-family: "jupiter";
    text-align: center;
    background-color: black;
    border: solid black;
    box-shadow: 0 0 5px red;
    margin-top: -65px;
    margin-left: 10px;
    width: 225px;
    display: block;
    float: left;
    height: 380px;
}

#navig{
    color: black;
    background-color: red;
    border: outset rgb(250, 40, 40);
    padding: 10px;
    margin-top: 0px;
}

#upd{
    color: black;
    background-color: red;
    border: outset rgb(250, 40, 40);
    padding: 10px;
    margin-top: 0px;
}

h2{
    color: black;
    background-color: red;
    margin: 0px;
    font-size: 25px;
    padding: 5px;
    border: outset rgb(250, 40, 40);
}

#scroll{
    overflow: auto;
    height: 320px;
    margin-top: -20px;
}

.heart{
    height: 20px;
}

.links{
    color: white;
    background-color: black;
    border: outset rgb(0, 0, 0);
    padding: 3px;
    text-decoration: none;
    font-size: 20px;
}

#main{
    font-family: "jupiter";
    font-size: 20px;
    background-color: silver;
    border: outset #dfdfdf;
    display: block;
    float: left;
    margin-top: -65px;
    margin-left: 20px;
    margin-right: 20px;
    width: 700px;
    padding: 5px 20px 5px 20px;
    
}

#intro{
    display: block;
    float: left;
    width: 400px;
    margin-left: 20px;
    margin-right: -80px;
}

#aboutmebuttons{
    display: block;
    float: right;
    margin-top: 125px;
    margin-right: 40px;
    scale: 150%;
    width: 115px;
}

.abt{
  padding: 2px;
}

.button{
    padding: 10px;
}

#updates{
    font-family: "jupiter";
    text-align: center;
    background-color: black;
    border: solid black;
    box-shadow: 0 0 5px red; /* A blue-ish glow */
    margin-top: -65px;
    width: 225px;
    display: block;
    float: left;
    height: 380px;
}

#logs{
    margin-top: -20px;
}

.log{
    color: white;
    overflow: auto;
    border: outset black;
    font-size: 20px;
}