.card:hover{background:transparent;transform:translateY(-.5rem)}.card{height:30px;position:relative;background:var(--bg-primary);padding:1.5rem;border-radius:var(--border-radius-1);transition:var(--transition);backdrop-filter:blur(4px);box-shadow:var(--box-shadow);border:2px solid transparent;z-index:0}.card:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:inherit;background:linear-gradient(270deg,#3490dc,#f472b6,#38b2ac);background-size:600% 600%;z-index:-1;animation:gradient-border 6s linear infinite;opacity:0;transition:opacity .3s ease;padding:2px;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask-composite:destination-out}.card:hover:before{opacity:1}@keyframes gradient-border{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}@media screen and (max-width:600px){.card{padding:1.2rem}}