/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

#musicplayer{ 
  font-family: 'GrOb';
  height:30px;
  width:100%;
  left:0;
  top:0;
  position:fixed;
  margin-bottom:20px;  
  display:flex;
    background: black;  
  border:ridge 2px white;/* border around player */
    }
 
    .songtitle{ 
    display:block;
    padding:2px; /* padding around song title */
    font-family: 'GrOb';
    margin-top:2px;
    margin-right: 5px; 
    font-size:15px;
    color:white;
    letter-spacing: 1px; 

    background: black;/* background of song title */
    border: white ridge 2px;
       border-radius:6px;
    }
 
    .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; 
     color:white;
       
    }
 
    .total-duration{
      padding-left:5px;
      color:white;
    }
  .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 */
        background-image:  url('https://ammobox.neocities.org/images/slider.png'); /* image of  seeking square */
        background-size: 25px;
        -webkit-appearance: none;
        margin-top: -8px;
        
    }
    
input[type=range].volume_slider::-webkit-slider-runnable-track { 
    background: black; /* 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://ammobox.neocities.org/images/slider.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;
}    

body {
    background-image: url(https://ammobox.neocities.org/images/dopesmoker1.png);
    background-repeat: no-repeat;
    background-size: cover;
    
    background-color: black;
    color: white;
    font-family: 'GrOb';
}