@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
 
 
body {
   background: #ffffff00;
}
 
#background {
   position: absolute;
   height: 100%;
   width: 100%;
   margin: auto;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: -1;
}
 
/* container for music player */
.container {
   position: absolute;
   height: 300pt;
   width: 250pt;
   margin: auto;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   overflow: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
   background: #000000;
   border-radius: 10px;
   box-shadow: 0 0 10px #000000;
}
 
/* container for play, pause, and progress bar  */
.box {
   position: absolute;
   height: 20%;
   width: 103%;
   background: -webkit-linear-gradient(45deg, rgb(0, 0, 0), rgb(0, 0, 0));
   z-index: 4;
   bottom: -15%;
}
 
/* album cover */
#thumbnail {
   position: absolute;
   width: 100%;
   top: 0%;
   transition: 1s;
   z-index: 3;
}
 
/* track artist */
.song-artist {
   position: absolute;
   z-index: 4;
   color: rgb(255, 255, 255);
   font-family: 'Montserrat', sans-serif;
   font-weight: bold;
   font-size: 17px;
   bottom: 21%;
   left: 28%;
}
 
/* track title */
.song-title {
   position: absolute;
   z-index: 4;
   color: white;
   font-family: 'Montserrat', sans-serif;
   font-size: 15px;
   bottom: 16%;
   left: 28%;
}
 
/* style for play and pause images */
#play-pause {
   position: absolute;
   height: 37px;
   width: 37px;
   filter: invert(1);
   cursor: pointer;
   bottom: 6.5%;
   z-index: 4;
   font-size: 53px;
   left: 7.5%;
}
 
 
/* style for current time of the track */
.currentTime {
   position: absolute;
   height: 50px;
   width: 50px;
   cursor: pointer;
   bottom: -2.8%;
   left: 21.8%;
   z-index: 4;
   font-family: 'Montserrat', sans-serif;
   font-size: 12px;
   color: white;
   align-items: center;
}
 
/* style for the progress bar */
#progress-bar {
   -webkit-appearance: none;
   appearance: none;
   position: absolute;
   z-index: 4;
   height: 5px;
   background: #ffffff;
   width: 170pt;
   bottom: 9.7%;
   border-radius: 30px;
   left: 21.3%;
}
 
/* style for the progress bar's slider thumb */
#progress-bar::-webkit-slider-thumb {
   -webkit-appearance: none;
   margin-top: -3px;
   margin-left: 0px;
   height: 10px;
   width: 7px;
   border: 0;
   background: -webkit-linear-gradient(45deg,  rgb(255, 255, 255), rgb(255, 255, 255));
   border-radius: 30px;
   cursor: pointer;
}
 
/* style for the progress bar's runnable track */
#progress-bar::-webkit-slider-runnable-track {
   -webkit-appearance: none;
   appearance: none;
   cursor: pointer;
   max-height: 5px;
   border-radius: 30px;
}
 
/* style to remove blue shade of the progress bar when clicked on/selected */
#progress-bar:focus {
   outline: none;
}
 
/* style for download */
#download {
   position: absolute;
   height: 16px;
   width: 16px;
   filter: invert(1);
   cursor: pointer;
   bottom: 2.9%;
   z-index: 4;
   font-size: 53px;
   left: 89%;
}