*{box-sizing:border-box}.after-element-transition{position:relative}.after-element-transition:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translateX(-50%) scaleX(0);transform-origin:center;width:600px;height:3px;border-radius:70px;background-color:blue;transition:transform .3s ease}@media screen and (max-width:519px){.after-element-transition.animate:after{width:400px}}@media screen and (max-width:639px){.after-element-transition.animate:after{width:450px}}@media screen and (min-width:420px) and (max-width:450px){.after-element-transition.animate:after{width:calc(320px + 11.9vw)}}@media screen and (max-width:420px){.after-element-transition.animate:after{width:90vw}}.after-element-transition.animate:after{transform:translateX(-50%) scaleX(1)}.after-element-transition.animate:hover:after{transform:translateX(-50%) scaleX(0)}.animated-card{position:relative}@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}.animated-card:after,.animated-card:before{content:"";position:absolute;height:102%;width:102%;background-image:conic-gradient(from var(--angle),red,blue);left:50%;top:50%;translate:-50% -50%;z-index:-1;animation:spin 3s linear infinite}.animated-card:hover:before{transition:filter .3s;filter:blur(1.5rem);opacity:.5}@keyframes spin{0%{--angle:0deg}to{--angle:360deg}}