* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.container{
   width: 100%;
   height: 100vh;
   background-color: #333;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
}

.music-player{
   background-color: #ffe0e5;
   width: 400px;
   padding: 25px 35px;
   text-align: center;
}

nav{
   display: flex;
   justify-content: space-between;
   margin-bottom: 30px;
}

nav .circle{
   border-radius: 50%;
   width: 40px;
   height: 40px;
   line-height: 40px;
   background-color: #fff;
   color: #f35192;
   box-shadow: 0 5px 10px rgba(255, 26, 26, 0.22);
   cursor: pointer;
}

.song-img{
   width: 220px;
   border-radius: 50%;
   border: 8px solid #fff;
   box-shadow: 0 10px 60px rgba(255, 26, 26, 0.22);
   transition: transform 0.1s linear;
}

.song-detail h1{
   font-size: 26px;
   font-weight: 400;
   color: #333;
   margin-top: 20px;
}

.song-detail p{
   font-size: 14px;
   color: #333;
}

#progress{
   appearance: none;
   width: 100%;
   height: 6px;
   background: #f53192;
   border-radius: 4px;
   cursor: pointer;
   margin: 25px 0;
}

#progress::-webkit-slider-thumb{
   appearance: none;
   background-color: #f53192;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   border: 8px solid #fff;
   box-shadow: 0 5px 5px rgba(255, 26, 26, 0.22);
}

.song-time{
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.song-time p{
   margin: 0;
   font-size: 14px;
}

.controls{
   display: flex;
   justify-content: center;
   align-items: center;
}

.controls div{
   width: 60px;
   height: 60px;
   margin: 20px;
   background-color: #fff;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
   color: #f53192;
   box-shadow: 0 10px 20px rgba(255, 26, 26, 0.22);
   cursor: pointer;
}

.controls div:nth-child(2){
   transform: scale(1.3);
   background-color: #f53192;
   color: #fff;
}

nav .loop-active {
   background-color: #f53192;
   color: #fff;
}

.spin {
   animation: spin 30s linear infinite;
}

@keyframes spin {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}