@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&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;-webkit-filter:blur(20px);filter:blur(20px);height:60px;right:7px;top:10px;width:60px}main{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border:1px solid hsla(0,0%,100%,.1);border-radius:15px;box-shadow:0 0 20px rgba(7,15,15,.5);overflow:hidden;position:relative;width:360px}input[type=range]{-webkit-appearance:none;appearance:none;background:#e5e5e5;border-radius:50px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#4286f4;border-radius:50%;cursor:grab;height:10px;width:10px}.card{overflow:hidden;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{-webkit-animation:rotate 20s linear;animation:rotate 20s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-play-state:paused;animation-play-state:paused;border-radius:50%;height:200px;object-fit:cover;-webkit-user-select:none;user-select:none;width:200px}.card .img img.playing{-webkit-animation-play-state:running;animation-play-state:running}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.card canvas{bottom:0;height:100%;left:0;position:absolute;width:100%}.card .details{text-align:center;width:100%}.card .details .title{font-size:1.2rem}.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.5rem}.card .controls .play i{-webkit-text-fill-color:transparent;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 rgba(0,0,0,.1);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.0458eb68.css.map*/