.card{width:300px;height:400px;background:#f8fafc;position:relative;display:flex;place-content:center;place-items:center;overflow:hidden;border-radius:20px;transition:all .3s ease}.dark .card{background:#07182e}.card h2{color:#1e293b;font-size:2em;transition:color .3s ease}.dark .card h2{color:white}.card:before{content:"";position:absolute;width:100px;background-image:linear-gradient(180deg,rgb(0,183,255),rgb(255,48,255));height:130%;animation:rotBGimg 3s linear infinite;transition:all .2s linear}@keyframes rotBGimg{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.card:after{content:"";position:absolute;background:#f8fafc;inset:5px;border-radius:15px;transition:background .3s ease}.dark .card:after{background:#07182e}.e-card{margin:10px auto;background:rgba(255,255,255,.1);box-shadow:0 8px 28px -9px rgba(0,0,0,.45);position:relative;width:240px;height:330px;border-radius:16px;overflow:hidden;transition:all .3s ease;backdrop-filter:blur(10px)}.dark .e-card{background:rgba(17,24,39,.5);box-shadow:0 8px 28px -9px rgba(0,0,0,.8)}.wave{position:absolute;width:540px;height:700px;opacity:.6;left:0;top:0;margin-left:-50%;margin-top:-70%;background:linear-gradient(744deg,#af40ff,#5b42f3 60%,#00ddeb);transition:opacity .3s ease}.dark .wave{opacity:.8}.icon{width:3em;margin-top:-1em;padding-bottom:1em}.infotop{text-align:center;font-size:20px;position:absolute;top:5.6em;left:0;right:0;color:rgb(255,255,255);font-weight:600;transition:color .3s ease}.dark .infotop{color:rgb(240,245,255)}.name{font-size:14px;font-weight:100;position:relative;top:1em;text-transform:lowercase;color:rgba(255,255,255,.9);transition:color .3s ease}.dark .name{color:rgba(240,245,255,.85)}.wave:nth-child(2),.wave:nth-child(3){top:210px}.playing .wave{border-radius:40%;animation:wave 3s linear infinite}.wave{border-radius:40%;animation:wave 55s linear infinite}.playing .wave:nth-child(2){animation-duration:4s}.wave:nth-child(2){animation-duration:50s}.playing .wave:nth-child(3){animation-duration:5s}.wave:nth-child(3){animation-duration:45s}@keyframes wave{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}