body{
   /* background-image: url(gingham.jpg);
    background-repeat: no-repeat; 
    background-size:cover, contain;
    background-position: top;
    background-attachment: fixed;*/
    background-image: url(possible\ back\ onion.webp), 
    linear-gradient(rgb(100, 221, 168),rgb(0, 128, 129));
    background-size: 70px;
    height: 1090px;

    animation: mySlideleft;
    animation-duration: 100s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-play-state: alternate; 
    
    
    
}

/* @keyframes mySlideleft{
    0% {background-position: 0% 0% }

    25% {background-position: 0.1% 0.1;}

    35%{background-position: 0% 0%;}

    55% {background-position: -0.3% -0.3%;}

    85% {background-position: 0.2% 0.2%;}

    100% {background-position: 0% 0%}


}
    */
    @keyframes mySlideleft{
        from {background-position: 0% 0;
        ;}
    
        to {background-position: 100% 100%;
        ;}

    }



.main{
    border: 5px ;
    border-color: rgb(3, 35, 39);
    border-style: solid ;
    border-radius: 10%;
    
    position: relative;
    top: 100px;
    right: 350px;
    background:linear-gradient(rgb(100, 221, 168),rgb(0, 128, 129));
    width: 550px;
    height: 700px;
    padding-left: 200px;
    padding-right: 200px;
    z-index: auto;
    margin-bottom: 600px;
    margin-left: 720px;
    overflow-y: auto;
    line-height: 800%;
  
    
}

#box3{
    border: 5px solid rgb(3, 35, 39);
    border-right: none;
    width: 160px ;
    height: 100px;
    font-size: 15px;
    line-height: 50%;
    background:linear-gradient(rgb(100, 221, 168),rgb(0, 128, 129));
    border-radius: 10%;
    padding: 30px; /* padding moves the content within so like text */
    overflow-y: auto;
    top:-1000px;
    left: 65px;
    position: relative;
    text-indent: -5%;
    font-family: Sixtyfour, serif;
    color: #251941;
    -webkit-text-fill-color: #1c083d;
    -webkit-text-stroke: 1px;
    stroke-width: 1px;letter-spacing: -2px;
}   

a { color: inherit; } 
a:visited { text-decoration: none; color: #251941;-webkit-text-fill-color: #1c083d; }
a:hover { text-decoration: none; color:#9acbda;-webkit-text-fill-color: #9acee6;}
a:focus { text-decoration: none; color:rgba(13, 72, 77, 0.548);-webkit-text-fill-color: rgba(13, 72, 77, 0.548) }
a:hover, a:active { text-decoration: none; color:#9acbda;-webkit-text-fill-color: #9acee6; }

.fa-solid {
   margin-right: 23px;
}



#musicplayer{ 
    font-family: 'basiic';
    font-weight:bold;
    height:30px;
    width:100%;
    left:0;
    top:0;
    position:fixed;
    margin-bottom:20px;  
    display:flex;
      background: linear-gradient(180deg,rgb(0, 128, 129), rgb(0, 128, 129), black 47%, black 60%, gray 100%);  
    border:ridge 2px gray;/* border around player */
    outline: solid 2px black;  
    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%);
      }
   
      .songtitle{ 
      display:block;
      padding:2px; /* padding around song title */
      font-family: 'pixel';
      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-decoration: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);
      }
   
      i.fas:hover{
          cursor:help;
      }
   
      i.fas.fa-pause, i.fas.fa-play, i.fas.fa-forward, i.fas.fa-backward{
          color:black; /* color of controls */
          font-style: normal;
         
      }
      
      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;
  }