.card{width:300px;height:400px;background:#07182e;position:relative;display:flex;place-content:center;place-items:center;overflow:hidden;border-radius:20px}.card h2{color:white;font-size:2em}.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:#07182e;inset:5px;border-radius:15px}.e-card{margin:10px auto;background:transparent;box-shadow:0 8px 28px -9px rgba(0,0,0,.45);position:relative;width:240px;height:330px;border-radius:16px;overflow:hidden}.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)}.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}.name{font-size:14px;font-weight:100;position:relative;top:1em;text-transform:lowercase}.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)}}