body {
	background-image: url(https://cowgrls.neocities.org/images/backgrounds/josh-miller-x0jaoF-qPCU-unsplash.jpg);
	background-size: cover;
	text-align: center;
	font-family: "Staatliches", sans-serif;
}


.backbtn {
	margin: 1% auto auto 1%;
	z-index: 999;
	position: absolute;
	top: .5rem;
	max-height: 80px;
 }

.titleimg {
	background-image: url(https://cowgrls.neocities.org/images/word%20art/LA.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 70rem;
	min-height: 6rem;
	margin: 2rem auto -5rem auto;
	z-index: 10;
}

 .box {
 	width: 89rem;
 	height: 26rem;
 	padding: 1rem;
 	margin: 6rem auto auto auto;
 	background-color:rgb(175, 238, 238, 0.5);

 	border: double 5px gold;
 	z-index: 2;
 }

 .box p {
 	color: maroon;
 	font-size: 1.2rem;
 	margin: .5rem;
 	text-align: justify;
 }

 .credit {
 	font-size: 10px;
 	
 	position: fixed;
 	bottom: 2.5rem;
 	left: .5rem;
 }

 .credit a {
 	color: gold;
 	text-decoration: none;
 }

      /* orange theme */
      
      #musicplayer{ 
        font-family: 'Staatliches';
        font-weight:bold;
        height:30px;
        width:100%;
        left:0;
        bottom:0;
        position:fixed;
        
        display:flex;
        background: linear-gradient(180deg,#e6b795 0%, white 45%, #fb9146 47%, #e6b795 100%);
       border:ridge 2px #fb9146; /* border around player */
        outline: solid 2px black;  
       box-shadow: inset 10px 0px 6px -10px #fb9146, inset -13px 0px 6px -10px #fb9146, inset 0px 10px 6px -10px #ffffff, inset 0px -13px 6px -10px #fb9146";
          }
       
          .songtitle{ 
          display:block;
          padding:2px 50px 2px 2px; /* padding around song title */
          font-family: 'Staatliches';
          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:65%;
            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: 20px; /* height of seeking square */
              width: 20px; /* width of seeking square */
              border: 1px black solid;
              background-color: white;
              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-color: white;
          background-size: 20px;
          height: 20px; /* height of volume seeking square */
          width: 20px; 
          margin-top: -8px;
         }
       
       
      .slider_container {  
        width: 11%;       /* width of volume seeker */
        display: flex;
        justify-content: center;
        align-items: center;
       
      }