@property --rotate{syntax:"<angle>";initial-value:132deg;inherits:false}:root{--card-height:350px;--card-width:calc(var(--card-height))}.card{background:#191c29;width:var(--card-width);height:var(--card-height);padding:3px;position:relative;border-radius:6px;justify-content:center;align-items:center;text-align:center;display:flex;font-size:1.5em;color:rgba(88,199,250,0);cursor:pointer;font-family:cursive}.card:hover{color:#58c7fa;transition:color 1s}.card:hover:after,.card:hover:before{animation:none;opacity:0}.card:before{width:104%;height:102%;border-radius:8px;background-image:linear-gradient(var(--rotate),#5ddcff,#3c67e3 43%,#2ad697);top:-1%;left:-2%}.card:after,.card:before{content:"";position:absolute;z-index:-1;animation:spin 2.5s linear infinite}.card:after{top:calc(var(--card-height) / 6);left:0;right:0;height:100%;width:100%;margin:0 auto;transform:scale(.8);filter:blur(calc(var(--card-height) / 6));background-image:linear-gradient(var(--rotate),#5ddcff,#7691e4 43%,#dcfce7);opacity:1;transition:opacity .5s}@keyframes spin{0%{--rotate:0deg}to{--rotate:360deg}}@media screen and (max-width:800px){.card{width:300px;height:300px}}a{color:#212534;text-decoration:none;font-family:sans-serif;font-weight:700;margin-top:2rem}