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

body {
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   background-image: url(../assets/img/background.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}

.player {
   height: 100vh;
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
}

.wrapper {
   border: 2px solid #fff;
   padding: 30px;
   border-radius: 20px;
   backdrop-filter: blur(30px);
   background: rgba(0, 0, 0, 0.588);
}

.details {
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
}

.track-art {
margin: 25px;
height: 250px;
width: 250px;
border: 2px solid #fff;
background-size: cover;
background-position: center;
border-radius: 50%;
}

.now-playing {
   font-size: 1rem;
   color: #fff;
}

.track-name {
   font-size: 2.5rem;
   color: #fff;
}

.track-artist{
   margin-top: 5px;
   font-size: 1.5rem;
   color: #fff;
}

.buttons {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   margin-bottom: 30px;
}

.active {
   color: #000;
}

.repeat-track,
.next-track,
.playpause-track,
.prev-track,
.random-track
{
padding: 25px;
color: #fff;
}

.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: 0.2s;
   transition: opacity 0.2s;
}

.seek_slider::-webkit-slider-thumb,
.volume_slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   width: 15px;
   height: 15px;
   background: #fff;
   border: 2px solid #3774ff;
   cursor: grab;
   border-radius: 100%;
}

.seek_slider:hover,
.volume_slider:hover
{
opacity: 1;
}

.seek_slider {
   width: 60%;
}

.volume_slider {
   width: 30%;
}

.current-time,
.total-duration
{
   padding: 10px;
   color: #fff;
}

i.fa-volume-down,
i.fa-volume-up {
padding: 10px;
}

i,
i.fa-pause-circle,
i.fa-pause-circle,
i.fa-step-forward,
i.fa-step-backward,
p {
   cursor: pointer;
   color: #fff;
}

.randomActive {
   color: #fff;
}

.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: #f1f1f1;
height: 150%;
width: 10px;
border-radius: 50px;
margin: 0 5px;
animation: animate 1.4s linear infinite;
}

@keyframes animate {
   50% {
      height: 20%;
      background-color: #4286f4;
   }
   100% {
      height: 100%;
      background: #4286f4;
   }
}

.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;
}

@media (max-width: 576px) {
.wrapper {
   padding: 5px;
}
.track-art {
   width: 100px;
   height: 100px;
}
.track-name {
   font-size: 15px;
}
.track-artist{
   font-size: 0.5rem;
   font-weight: 400;
}
.current-time, .total-duration {
   font-size: 12px;
}
.loader {
   height: 40px;
}
}

@media (max-width: 992px) {
.wrapper {
   padding: 10px;
}
.track-art {
   width: 150px;
   height: 150px;
}
.track-name {
   font-size: 1.5rem;
}
.track-artist{
   font-size: 1rem;
}
.random-track, 
.prev-track, .next-track, .repeat-track
 {
font-size: 10px;
}
.playpause-track {
   font-size: 12px;
}
.loader {
   height: 40px;
}
}