body{
  /* background-color: #EC449B; */
  /* background-image: url("images/mpbg.jpeg"); */
  background: #33CCCC; /* Fallback */
  animation: color 9s infinite linear;
  text-align: center;
  padding-top: 15px;
}

@keyframes color {
  0%   { background: #33CCCC; }
  20%  { background: #33CC36; }
  40%  { background: #B8CC33; }
  60%  { background: #FCCA00; }
  80%  { background: #33CC36; }
  100% { background: #33CCCC; }
}



/************************** MUSIC PLAYER SECTION **************************/

.player{
  align-items: center;
  display: flex;
  justify-content: center; /* allign at center*/
  flex-direction: column;  /* center column*/
}

.buttons{
  display: flex;
  justify-content: center;
  flex-direction: row;
  /* margin-top: 5%; */
}


.details{
  display: flex;
  justify-content: center;
  flex-direction: column;
  /* margin-top: 5%; */
}

.prev-track{
  padding: 25px;
  margin-top: 8%;
  opacity: 0.7;
}

.next-track{
  padding: 25px;
  margin-top: 8%;
  opacity: 0.7;
}
.playpause-track{
  padding: 25px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.playpause-track:hover, .prev-track:hover, .next-track:hover{
  color: #00fd0a;
  opacity: 1.0;
}

.now-playing{
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2rem;
  line-height: 1;
  font-style: italic;
  margin-top: 0px;
  margin-bottom: 15px;
}
.track-name, .track-artist{
  text-align: center;
  font-family: 'Alegreya', serif;
}
.track-name{
  font-size: 36px;
}
.track-artist{
  font-size: 25px;
}

.track-art{
  /* margin: 25px; */
  width: 25px;
  height: 25px;

}

.slider_container {
  width: 70%;
  /* max-width: 500px; */
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Alegreya', serif;
}

.slider, .volume_slider {
  position: relative;
  display: block;
  text-align: center;
  font-size: 6em;
  color: #999;
  font-weight: 400;
}
.slider, .volume_slider {
  width: 400px;
  height: 10px;
  -webkit-appearance: none;
  background: #111;
  outline: none;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
}
.slider::-webkit-slider-thumb , .volume_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 10px;
  border-radius: 50%;
  background: #00fd0a;
  cursor: pointer;
  border: 4px solid #333;
  box-shadow: -407px 0 0 400px #00fd0a;
}
.slider{
  width: 100%;
}
.volume_slider{
  width: 60%;
}

.current-time{
  padding: 10px;
}
.total-duration{
  padding: 10px;
}
.fa-volume-down{
  padding: 10px;
}
.fa-volume-up{
  padding: 10px;
}

.fa-play-circle,
.fa-pause-circle,
.fa-circle-chevron-right,
.fa-circle-chevron-left,
.slider {
  cursor: pointer;
}