body{
   font-family: Arial, Helvetica, sans-serif;
color: lightBlue;
}
.player{
   height: 95vh;
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
}
.wrapper{
   border: 2px solid transparent;
   padding: 25px;
   border-radius: 150px;
   box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
.details{
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
}
.track-art{
   margin: 25px;
   height: 250px;
   width: 250px;
   border: 4px solid lightBlue;
   background-size: cover;
   background-position: center;
   border-radius: 50%;
   -moz-box-shadow: 0px 6px 5px rgb(27, 23, 23);
   -webkit-box-shadow:0px 6px 5px #ccc;
   box-shadow: 0px 6px 5px #ccc;
   -moz-border-radius:150px;
   -webkit-border-radius:150px;
   border-radius: 150px;
}
.now-playing{
   font-size: 1rem;
   color: black;
}
.track-name{
   font-size: 2.5rem;
   color: black;
}
.track-artist{
   margin-top: 5px;
   font-size: 1.5rem;
   color: black;
}
.buttons{
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-bottom: 30px;
   color: black;
 
}
.active{
   color: black;
}
.repeat-track,
.random-track,
.playpause-track,
.prev-track,
.next-track{
   padding: 25px;
   opacity: 0.8;
   transition: opacity .2s;
}
.repeat-track:hover,
.random-track:hover,
.playpause-track:hover,
.prev-track:hover,
.next-track:hover{
   opacity: 1.0;
}
.slider_container{
   display: flex;
   justify-content: center;
   align-items: center;
}
.seek_slider,
.volume_slider{
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   height: 5px;
   background: #83a9ff;
   -webkit-transition: .2s;
   transition: opacity .2s;
}
.seek_slider::-webkit-slider-thumb,
.volume_slider::-webkit-slider-thumb{
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   width: 15px;
   height: 15px;
   background: lightBlue;
   border: 3px solid #3774ff;
   cursor: pointer;
   border-radius: 100%;
}
.seek_slider:hover,
.volume_slider:hover{
   opacity: 1.0;
}
.seek_slider{
   width: 60%;
}
.volume_slider{
   width: 30%;
}
.current-time,
.total-duration{
   padding: 10px;
}
i.fa-volume-down,
i.fa-volume-up{
   padding: 10px;
}
i,
i.fa-play-circle,
i.fa-pause-circle,
i.fa-step-forward,
i.fa-step-backward{
   cursor: pointer;
}
.randomActive{
   color: lightBlue;
}
.rotate{
   animation: rotation 8s infinite linear;
}
@keyframes rotation{
   from{
       transform: rotate(0deg);
   }
   to{
       transform: rotate(359deg);
   }
}
.loader{
   height: 70px;
   display: flex;
   justify-content: center;
   align-items: center;
}
.loader .stroke{
   background: black;
   height: 150%;
   width: 10px;
   border-radius: 50px;
   margin: 0px 5px;
   animation: animate 1.4s linear infinite;
}
@keyframes animate{
   50%{
       height: 20%;
       background: lightBlue;
   }
   100%{
       height: 100%;
   }
}
.stroke:nth-child(1){
   animation-delay: 0s;
}
.stroke:nth-child(2){
   animation-delay: 0.3s;
}
.stroke:nth-child(3){
   animation-delay: 0.6s;
}
.stroke:nth-child(4){
   animation-delay: 0.9s;
}
.stroke:nth-child(5){
   animation-delay: 0.6s;
}
.stroke:nth-child(6){
   animation-delay: 0.3s;
}
.stroke:nth-child(7){
   animation-delay: 0s;
}