@property --angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes rotate{to{--angle:360deg}}.rainbow-border{animation:rotate 20s linear infinite;background:linear-gradient(var(--angle),#02fcef70 0,#ffb52b70 50%,#a02bfe70 100%);height:32px;&:after{background:linear-gradient(var(--angle),#02fcef70 0,#ffb52b70 50%,#a02bfe70 100%);transform:scale(.95,.6);filter:blur(20px);transition:all .4s ease-out;opacity:1;animation:rotate 20s linear infinite}& span{width:calc(100% - 2px);height:calc(32px - 2px);background-color:#0b0e14;transition:all .2s ease-out}&:hover{& span{background-color:#0b0e14d1;mix-blend-mode:darken}&:after{opacity:.8;transform:scale(1.1,.9)}}}