@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{

  --pink: rgb(0, 7, 104);

  --violet: #080008;

  --lightblack: #fafafa;

  --white: #201b1b;

  --darkwhite: #cecaca;

  --pinkshadow: #ffcbdd;

  --lightbshadow: rgba(0,0,0,0.15);

}

body{

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 100vh;

  background: linear-gradient(var(--pink) 0%, var(--violet) 100%);

}

.wrapper{

  width: 380px;

  padding: 25px 30px;

  overflow: hidden;

  position: relative;

  border-radius: 10px;

  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 ul li{

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.top-bar i{

  font-size: 30px;

  color: var(--lightblack);

}

.top-bar i:first-child{

  margin-left: -7px;

}

.top-bar span{

  font-size: 18px;

  margin-left: -3px;

  color: var(--lightblack);

}

.img-area{

  width: 100%;

  height: 256px;

  overflow: hidden;

  margin-top: 25px;

  border-radius: 15px;

  box-shadow: 0px 6px 12px var(--lightbshadow);

}

.img-area img{

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.song-details{

  text-align: center;

  margin: 30px 0;

}

.song-details p{

  color: var(--lightblack);

}

.song-details .name{

  font-size: 18px;

}

.song-details .artist{

  font-size: 16px;

  opacity: 0.9;

  line-height: 35px;

}

.progress-area{

  height: 6px;

  width: 100%;

  border-radius: 50px;

  background: #0d002c;

  cursor: pointer;

}

.progress-area .progress-bar{

  height: inherit;

  width: 0%;

  position: relative;

  border-radius: inherit;

  background: linear-gradient(90deg, var(--lightblack) 0%, var(--violet) 100%);

}

.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: 13px;

  color: var(--lightblack);

}

.controls{

  margin: 40px 0 5px 0;

}

.controls i{

  font-size: 28px;

  user-select: none;

  background: linear-gradient(var(--lightblack) 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: 43px;

}

.controls #prev{

  margin-right: -13px;

}

.controls #next{

  margin-left: -13px;

}

.controls .play-pause{

  height: 54px;

  width: 54px;

  display: flex;

  cursor: pointer;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: linear-gradient(var(--white) 0%, var(--darkwhite) 100%);

  box-shadow: 0px 0px 5px var(--pink);

}

.play-pause::before{

  position: absolute;

  content: "";

  height: 43px;

  width: 43px;

  border-radius: inherit;

  background: linear-gradient(var(--pink) 0%, var(--violet) 100%);

}

.play-pause i{

  height: 43px;

  width: 43px;

  line-height: 43px;

  text-align: center;

  background: inherit;

  background-clip: text;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  position: absolute;

}



.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: 15px;

  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{

  display: flex;

  align-items: center;

  font-size: 19px;

  color: var(--lightblack);

}

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

}



footer

{

 font-size: 12px;

 text-align: center;

 color: var(--lightblack);

}