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