* {
  box-sizing: border-box;
}

.container {  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1.5fr 1.5fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "header header header"
    "main main main"
    "main main main"
    "footer footer footer";
  font-family:cursive;
  margin: 0 auto;
  width:72%;
  height:640px;
}

.header{
grid-area:header; 
text-align:center;
padding:0px;
}

.main{ 
grid-area:main;  
background:transparent;
height:auto;
padding:5px;
overflow-y:scroll;
scrollbar-width:none;
}

.footer{
grid-area: footer;
text-align:center;
}

.outermain{
display: flex;
justify-content:flex-start;
flex-wrap:wrap;
flex-direction: row;
}

.title{
margin:0px;
background-color:salmon;
width:700px;
height:40px;
padding:2px;
border-top:5px inset darkred;
border-left:5px inset darkred;
border-right:5px inset darkred;
border-bottom:none;
}

.divimage{
background-color:black;
border:5px inset darkred;
width:700px;
height:295px;
overflow:scroll;
padding:5px;
margin-bottom:55px;
}


body{
font-family:cursive;
font-size:20px;
background-image:url('https://strawberrynose.neocities.org/oppo.gif');
}

h1{
color: DarkRed;
}

h2{
color: Maroon;
font-weight:normal;
}

h3{
color: Darkred;
font-weight:normal;
}

p{
color: Gainsboro;
font-size: 18px;
} 

#musicplayer{ 
          font-family: 'basiic';
          font-weight:bold;
          height:30px;
          width:55%;
          position:fixed;
          margin-bottom:20px;  
          display:flex;
         background:maroon;
         border:ridge 2px #cc2d3e;/* border around player */
          outline: solid 2px black;  
          box-shadow: inset 10px 0px 6px -10px #630115, inset -13px 0px 6px -10px #630115, inset 0px 10px 6px -10px #ff5959, inset 0px -13px 6px -10px #630115;
            }
         
            .songtitle{ 
            display:block;
            padding:2px;
            font-family:cursive;
            margin-top:2px;
            margin-right: 2px; 
            font-size:13px;
            color:black; 
        
            background: gainsboro;
            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:10px; /* 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:2px; /* padding around controls */
            }
         
            .seeking{
              width:75%;
              background: transparent;/* background color of seeking bar */
              display:flex;
              justify-content: space-evenly;
              padding:2px; /* 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: 75%;
                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: 20%;       /* width of volume seeker */
          display: flex;
          justify-content: center;
          align-items: center;
        }