/* codewithharsh_ */
/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: 'poppins', sans-serif;
}

body{
 background:#ff69b4;
}

.container{
 padding-bottom:35px;
 background:#fff;
 position:absolute;
 top:50%;
 left:50%;
 transform:translate(-50%,-50%);
 border-radius:7px;
 width:340px;
}

.container .song-details{
 height:70px;
 width:100%;
 border-top-left-radius:7px;
 border-top-right-radius:7px;
 background:rgba(255, 105, 180, 0.3);
 padding:15px;
}

.container .song-details .artist-name,
.container .song-details .song-name{
margin-left:135px;
font-size:12px;
font-weight:600;
color:#ff1493;
text-transform:uppercase;
margin-top:2px;
}



.container .song-details .artist-name span,
.container .song-details .song-name span{
 color:#696969;
}

.container .image{
 height:110px;
 width:110px;
 border-radius:100%;
 margin-left:20px;
 margin-top:-45px;
 border:5px solid #fff;
}

.container .image img{
 height:100%;
 width:100%;
 border-radius:100%;
}

.container .image img.rotate-img{
 animation:rotate 5s linear infinite;
}

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

.container .btns{
 height:50px;
 width:205px;
 float:right;
 margin-top:-50px;
}

.container .btns button{
 all:unset;
 height:45px;
 width:45px;
 border:2px solid #ff1493;
 border-radius:100%;
 float:left;
 display:flex;
 align-items:center;
 justify-content:center;
 margin-left:11px;
 color:#ff1493;
 font-size:22px;
 cursor:pointer;
}

.container #waveform{
 margin-top:35px;
 padding:0px 25px 0px 25px;
 cursor:pointer;
}