style.css

*{
  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;
}

.luisMusic {
  display: flex;
  
  gap: 30px;
  margin-bottom: 10px; 
}

.luisMusic img {
  height: 30px;
  width: 30px;
  animation: spin 2s linear infinite
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.luisMusic h1 {
  font-weight: 1000;
  font-style: italic;
  font-size: x-large;
  color: #bbb;
  margin: 0;
}

div .analizer {
  display: flex;
}

/*Music Wave Bars*/

.bar {
  background: rgb(9, 255, 0);
   bottom: 1px;
   height: 3px;
   /* position: absolute; */
   width: 10px;      
   animation: sound 0ms -800ms linear infinite alternate;
 }
 
 @keyframes sound {
   0% {
      opacity: .35;
       height: 3px; 
   }
   100% {
       opacity: 1;       
       height: 20px;        
   }
 }
 
 .bar:nth-child(1)  { 
   left: 1px; animation-duration: 474ms; 
 }
 .bar:nth-child(2)  { 
   left: 5px; animation-duration: 433ms; 
 }
 .bar:nth-child(3)  { 
   left: 9px; animation-duration: 407ms;
 }
 .bar:nth-child(4)  { 
   left: 13px; animation-duration: 458ms; 
 }
 .bar:nth-child(5)  {
    left: 17px; animation-duration: 400ms; 
   }
 .bar:nth-child(6)  {
    left: 21px; animation-duration: 427ms; 
   }
 .bar:nth-child(7)  {
    left: 25px; animation-duration: 441ms; 
   }
 .bar:nth-child(8)  {
    left: 29px; animation-duration: 419ms; 
   }
 .bar:nth-child(9)  { 
   left: 33px; animation-duration: 487ms; 
 }
 .bar:nth-child(10) { 
   left: 37px; animation-duration: 442ms;
 }
 
 
 /* End bars */

/* 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;
}



footer{
  padding: 1em 0;
  text-align: center;
  position: absolute;
  bottom: 0;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  font-style: italic;
}

@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%;
    }

}