*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body{
  height: 100vh;
  font-family: 'Gruppo', cursive;
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-size: cover;
  background-color: white;
}

input[type=range] {
  width: 170px;
  overflow: hidden;
  -webkit-appearance: none;
  background-color: transparent;
  border-radius: 5px;
}

/* Modify the appearance of the slider */
input[type='range']::-webkit-slider-runnable-track {
  width: 100%;
  overflow: hidden;
  background-color: gray;
  height: 3px;
  border-radius: 5px;

}

input[type='range']::-moz-range-track {
  background-color: gray;
  height: 3px;
  border-radius: 5px;
}

/* Modify the appearance of the slider thumb */
input[type='range']::-webkit-slider-thumb {
  appearance: none;
  width: 10px;
  height: 5px;
  background: white;
  cursor: pointer;
  box-shadow: -80px 0 0 80px #262626;
}

input[type='range']::-moz-range-thumb {
  appearance: none;
  width: 10px;
  height: 2px;
  cursor: pointer;
  border: none;
}

input[type="range"]::-moz-range-progress {
  background-color: #262626;
}

/* MUSIC PLAYER WRAPPER */
.music-player-wrapper{
  width: 400px;
  height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* TRACK ART */
#track-art{
  padding: 20px;
  width: 400px;
  height: 400px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  border-top-right-radius: 45px;
  border-bottom-left-radius: 45px;
  -webkit-box-shadow: -1px 7px 23px 1px rgba(0,0,0,0.48); 
  box-shadow: -1px 7px 23px 1px rgba(0,0,0,0.48);
}

/* TRACK INFO */
#track-artist{
  color: #bbb;
}

#track-name{
  font-size: 1.5rem;
  color: white;
  letter-spacing: 1px;
}

/* TRACK ELAPSED TIME */
.track-elapsed-time-container{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;  
  color: white;
  text-shadow: 1px 3px 2px black;
  height: 12px;
}

.current-time{
  position: absolute;
  font-size: 0.7rem;
  top: 0;
  left: 16%;
  letter-spacing: 1px;
}

.total-duration{
  position: absolute;
  font-size: 0.7rem;
  top: 0;
  right: 16%;
  letter-spacing: 1px;
} 

/* MUSIC CONTROLS */
.music-controls-container{
  position: relative;
  width: 400px;
}

.controls{
  width: 265px;
  margin: auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 30px;
  background-color: transparent;
  padding-bottom: 10px;
  color: #FFFFFF;
  text-shadow: 1px 3px 2px black;
}

.fa-random{
  font-size: 0.9rem;
  cursor: pointer;
}

.fa-random.active{
  color: gray;
}

.fa-backward, .fa-forward{
  font-size: 1.2rem;
  cursor: pointer;
}

.fa-play, .fa-pause{
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
   text-shadow: 1px 3px 2px black;
}

/* TRACK VOLUME */
.track-volume-container{
  color: white;
}

.volume-container{
  position: relative;
}

.volume-container.active > #vol_btn + .dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.fa-ellipsis-v{
  color:white;
  cursor: pointer;
  text-shadow: 1px 3px 2px black;
}

#vol_btn{
  border: none;
  background-color: transparent;
}

.dropdown-menu{
  position: absolute;
  right: 0;
  top: calc(100% + .80rem);
  background-color: black;
  padding: .75rem;
  border-radius: .25rem;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

@media(max-width: 480px){
    .music-player-wrapper{
      width: 90%;
    }

    #track-art{
      width: 100%;
    }

    .music-controls-container{
      width: 100%;
    }

    .current-time{
      left: 6%;
    }

    .total-duration{
      right: 6%;
    } 

    .fa-random{
      left: 18%;
    }

}

@media(max-width: 320px){
    .current-time{
      left: -2%;
    }

    .total-duration{
      right: -2%;
    } 

    .fa-random{
      left: 10%;
    }

}
