style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

*::before, *::after{
                    padding: 0;
                    margin: 0;
                    }

:root{
      --blue: #4af6fc;
      --dark-blue: rgba(8, 54, 204, 0.898);
      --lightblack: #4e75b8;
      --white: #ffffff;
      --darkwhite: #cecaca;
      --pinkshadow: #ffcbdd;
      --lightbshadow: rgba(0,0,0,0.15);
      --background1:linear-gradient(45deg, red, blue);
     }

body{
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background:var(--background1);
      }

.wrapper{
      width: 380px;
      padding: 25px 30px;
      overflow: hidden;
      position: relative;
      border-radius: 20px;
      background: var(--white);
      box-shadow: 0px 6px 15px var(--lightbshadow);
    }

.wrapper i
{
      cursor: pointer;
}

.top-bar, .progress-area .song-timer, 
.controls, .music-list.header, .music-list li
{
      display: flex;
      align-items: center;
      justify-content: space-between;
}

/* *************top bar area ************ */
.top-bar i
{
      font-size: 20px;
      color: var(--lightblack);
}
.top-bar i:first-child
{
      margin-left: -7px;
}
.top-bar span
{
      font-size: 18px;
      margin-left: -3px;
      color: var(--lightblack);
}
/* ************************image area ********************* */
.img-area
{
      width: 15rem;
      height: 15rem;
      overflow: hidden;
      margin: auto;
      margin-top:25px;     
      border-radius: 50%;
      box-shadow:0 1.2rem 3rem 0.5rem rgba(0,0,0,0.4);
      align-items: center;
}
.img-area img
{
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
}
/* *************************image rotation********************* */
.anime
{
      animation: rotatePlayer 3s linear infinite;
}
@keyframes rotatePlayer
{
      from{
         transform:rotate(0deg);
      }
      to{
          transform:rotate(360deg);
      }
}

/* *****************Song- Details ****************** */
.song-details
{
      text-align: center;
      margin: 30px 0;
}
.song-details p
{
      color: var(--lightblack);
}
.song-details #song-name
{
      font-size: 21px;
      text-transform: uppercase;
      text-shadow: 0 0.3rem 0.5rem rgba(0,0,0,0.3);
}
.song-details #artist
{
      font-size: 18px;
      opacity: 0.9;
      line-height: 35px;
}
/* *****************Progress Area ********************* */
.progress-area
{
      height: 6px;
      width: 100%;
      border-radius: 50px;
      background:#f0f0f0;
      cursor: pointer;
}
.progress-area .progress-bar
{
      height: inherit;
      width: 0%;
      position: relative;
      border-radius: inherit;
      background: var(--lightblack);
}
.progress-bar::before
{
      content: "";
      position: absolute;
      height: 12px;
      width: 12px;
      border-radius: 50%;
      top: 50%;
      right: -5px;
      z-index: 2;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-50%);
      background: inherit;
      transition: opacity 0.2s ease;
}
.progress-area:hover .progress-bar::before
{
      opacity: 1;
      pointer-events: auto;
}
.progress-area .song-timer
{
      margin-top: 2px;
}
.song-timer span
{
      font-size: 15px;
      color: var(--lightblack);
}
/* *****************Controls settings*************** */
.controls
{
      margin: 40px 0 5px 0;
}

.controls i
{
      font-size: 18px;
      /* user-select: none;
      background: linear-gradient(var(--pink) 0%, var(--violet) 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; */
} 
    /* .controls i:nth-child(2),
    .controls i:nth-child(4){
         font-size: 20px;
     } */
.controls #prev
{
     margin-right: -13px;
}
.controls #next
{
      margin-left: -13px;
}

.controls #play
{
      width:3rem;
      height:3rem;
      border-radius: 50%;
      background-color: #111;
      color:#f6f6f6;
      font-size:1.4rem;
      display: flex;
      justify-content: center;
      align-items: center;
}
.controls #next.fas:hover,
#prev.fas:hover
{
      color:grey;
}
.controls #play:hover
{
      background-color: #f6f6f6;
      color:#111;
      box-shadow: 0 1rem 2rem 0.2rem rgba(0,0,0,0.4);
}

/* ****************Music List ************** */
/* .music-list
{
      position: absolute;
      background: var(--white);
      width: 100%;
      left: 0;
      bottom: -55%;
      opacity: 0;
      pointer-events: none;
      z-index: 5;
      padding: 15px 30px;
      border-radius: 20px;
      box-shadow: 0px -5px 10px rgba(0,0,0,0.1);
      transition: all 0.15s ease-out;
} */
/* .music-list.show
{
      bottom: 0;
      opacity: 1;
      pointer-events: auto;
}
.header .row i
{
      cursor: default;
}
.header .row span
{
      margin-left: 5px;
}
.header #close
{
      font-size: 22px;
      color: var(--lightblack);
} */
/* .music-list ul
{
      margin: 10px 0;
      max-height: 260px;
      overflow: auto;
}
.music-list ul::-webkit-scrollbar
{
      width: 0px;
}
.music-list ul li
{
      list-style: none;
      display: flex;
      cursor: pointer;
      padding-bottom: 10px;
      margin-bottom: 5px;
      color: var(--lightblack);
      border-bottom: 1px solid #E5E5E5;
}
.music-list ul li:last-child
{
      border-bottom: 0px;
}
.music-list ul li .row span
{
      font-size: 17px;
}
.music-list ul li .row p
{
      opacity: 0.9;
}
ul li .audio-duration
{
      font-size: 16px;
}
ul li.playing
{
      pointer-events: none;
      color: var(--violet);
} */