*{margin:0;padding:0;box-sizing:border-box;font-family:roboto,sans-serif;font-weight:400;font-style:normal}body{width:100%;min-height:100vh;background-color:#0000009a;background-image:url(https://Alejandro-Quiceno-Perez.github.io/ReproductorMusica/images/bg2.png);background-repeat:no-repeat;background-size:cover;color:#f0f0f0;display:flex;justify-content:center;align-items:center}i{cursor:pointer;-webkit-user-select:none;user-select:none}ul{list-style:none}.container{background-color:#000000ec;width:360px;border-radius:15px;position:relative}.container .shape{width:150px;height:150px;position:absolute;border-radius:50%}.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);right:-65px;bottom:-65px}.shape-3{width:60px!important;height:60px!important;background:#08e2ff;right:8px;top:7px;filter:blur(20px)}main{width:360px;border-radius:15px;border:1px solid #00000098;box-shadow:0 0 20px #494949;overflow:hidden;position:relative;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}input[type=range]{-webkit-appearance:#9b22ea;width:100%;height:4px;background-color:#9b22ea}@media screen and (max-width: 400px){.container,main{width:95vw}.card{padding:20px 15px}.card .img{height:220px}.card .img img{width:100%;height:100%}.card .details .title{font-size:1rem}.card .details .artist{font-size:.85rem}.card .controls #prev,.card .controls #next{font-size:2rem}.card .controls .play{width:3rem;height:3rem}.card .controls .play:before{width:2.2rem;height:2.2rem}.card .controls .volume{padding:15px}.list{border-radius:10px 10px 0 0}.list ul li{padding:8px 20px}}.card{width:100%;overflow:hidden;padding:25px}.card .nav{width:100%;display:flex;justify-content:space-between;align-items:center}.card .img{width:100%;height:270px;display:flex;justify-content:center;align-items:center;position:relative}.card .img img{width:205px;height:200px;border-radius:50%;object-fit:cover;position:relative}.card .img img.playing{animation-play-state:running}.card canvas{position:absolute;width:100%;height:100%;top:0;left:0}.card .details{width:100%;text-align:center}.card .details .title{font-size:1.2rem}.card .details .artist{margin:10px;font-size:1rem;color:gray}.card .progress{margin:15px 0}.card .progress input{width:100%;height:4px;border-radius:5px;background-color:gray;outline:none;cursor:pointer}.card .timer{width:100%;display:flex;justify-content:space-between;color:gray;font-size:.8rem}.card .controls{width:100%;display:flex;justify-content:space-between;align-items:center;margin-top:20px;margin-bottom:30px}.card .controls #prev,.card .controls #next{font-size:2.5rem}.card .controls .play{width:3.2rem;height:3.2rem;background:linear-gradient(#494949,gray);color:#000;box-shadow:0 0 5px #000000ef;border-radius:50%;display:flex;justify-content:center;align-items:center;position:relative}.card .controls .play:before{content:"";width:2.5rem;height:2.5rem;border-radius:inherit;position:absolute}.card .controls .play i{background:#fff;-webkit-background-clip:text;background-clip:text;position:absolute}.card .controls .volume{width:100%;height:50px;background-color:#333;position:absolute;bottom:-10%;left:0;border-radius:10px;border:1px solid #808080;display:flex;justify-content:space-between;align-items:center;padding:25px;z-index:5;transition:bottom .3s linear;gap:10px}.card .controls .volume.show{bottom:0}.card .controls .volume input{width:100%;height:4px}.list{width:100%;position:absolute;bottom:-60%;left:0;background:#fff;color:#000;box-shadow:0 -5px 10px #0000001a;border-radius:10px;transition:all .2s ease-in-out;z-index:10}.list.show{bottom:0}.list .header{width:100%;padding:15px 20px;display:flex;justify-content:space-between;align-items:center}.list .header i{font-size:1.7rem}.list .header>div{display:flex;align-items:center;justify-content:center;gap:5px}.list .header>div span{font-size:1.7rem;text-transform:capitalize;color:#252525ee}.list ul{width:100%;height:250px;overflow-y:scroll}.list ul::-webkit-scrollbar{width:0px}.list ul li{width:100%;padding:10px 30px;display:flex;justify-content:space-between;cursor:pointer;border-bottom:1px solid #eee}.list ul li:hover{background:#000;color:#fff}.list ul li .row p{color:#636363;font-size:.85rem}.list .duration{font-size:.9rem}.list ul li.playing{background-color:#000;color:#fff}