@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);*{box-sizing:border-box;font-family:Poppins,sans-serif;margin:0;padding:0}body{align-items:center;background:#000;background-image:url(/static/media/bg02.26a8b694df3069998cae.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;color:#fff;display:flex;justify-content:center;min-height:100vh;width:100%}i{cursor:pointer;-webkit-user-select:none;user-select:none}ul{list-style:none}.container{border-radius:15px;position:relative;width:360px}.shape{border-radius:50%;height:150px;position:absolute;width:150px}.shape-1{background:radial-gradient(circle at 35px 65px,#9b22ea,#005);left:-65px;top:-65px}.shape-2{background:radial-gradient(circle at 45px 90px,#ea22b1,#111);bottom:-65px;right:-65px}.shape-3{background:#08e2ff;filter:blur(20px);height:60px;right:7px;top:10px;width:60px}.shape-4{background:radial-gradient(circle at 45px 90px,#ea22b1,#111);bottom:-65px;right:-65px}main{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border:1px solid #ffffff1a;border-radius:15px;box-shadow:0 0 20px #070f0f80;position:relative;width:360px}.card,main{overflow:hidden}.card{padding:25px;width:100%}.card .nav{justify-content:space-between}.card .img,.card .nav{display:flex;width:100%}.card .img{align-items:center;height:270px;justify-content:center;position:relative}.card .img img{border-radius:50%;height:200px;object-fit:cover;width:200px}.card .details{text-align:center;width:100%}.card .details .artist{color:#bbb}.card .progress{margin-top:15px}.card .progress input{height:4px;width:100%}.card .timer{color:#bbb;font-size:.8rem}.card .controls,.card .timer{display:flex;justify-content:space-between;width:100%}.card .controls{align-items:center;margin-bottom:30px;margin-top:20px}.card .controls #next,.card .controls #prev{font-size:2.5rem}.card .controls .play{align-items:center;background:linear-gradient(#fff,#cecaca);border-radius:50%;display:flex;height:3.2rem;justify-content:center;position:relative;width:3.2rem}.card .controls .play:before{background:linear-gradient(#8dadff,#6e72a3 100%);border-radius:inherit;content:"";height:2.5rem;position:absolute;width:2.5em}.card .controls .play i{-webkit-text-fill-color:#0000;background:#fff;background-clip:text;-webkit-background-clip:text;position:absolute}.card .controls .volume{align-items:center;background:#333;border:1px solid #555;border-radius:10px;bottom:-10%;display:flex;gap:5px;height:50px;justify-content:space-between;left:0;padding:25px;position:absolute;transition:bottom .2s linear;width:100%;z-index:5}.card .controls .volume.show{bottom:0}.card .controls .volume input{height:4px;width:100%}.list{background:#fff;border-radius:10px;bottom:-60%;box-shadow:0 -5px 10px #0000001a;color:#080710;left:0;position:absolute;transition:all .2s ease-out;width:100%;z-index:10}.list.show{bottom:0}.list .header{align-items:center;display:flex;justify-content:space-between;padding:15px 20px;width:100%}.list .header i{font-size:1.7rem}.list .header>div{align-items:center;display:flex;gap:5px}.list .header>div span{color:#444;font-size:1.25rem;text-transform:capitalize}.list ul{height:250px;overflow-y:scroll;width:100%}.list ul::-webkit-scrollbar{width:0}.list ul li{border-bottom:1px solid #eee;cursor:pointer;display:flex;justify-content:space-between;padding:10px 30px;width:100%}.list ul li:hover{background:#eee8aa}.list ul li .row p{color:#999;font-size:.85rem}.list .duration{font-size:.9rem}.list ul li.playing{background:#ffefd5}
/*# sourceMappingURL=main.8686ab7d.css.map*/