@property --angle{syntax:"<angle>";initial-value:90deg;inherits:true}@property --gradX{syntax:"<percentage>";initial-value:50%;inherits:true}@property --gradY{syntax:"<percentage>";initial-value:0;inherits:true}:root{--d:2500ms;--angle:90deg;--gradX:100%;--gradY:50%;--c1:rgba(158,122,250,.8);--c2:#274471}.wrapper{min-width:min(40rem,100%)}.box{border:2px solid;-o-border-image:conic-gradient(from var(--angle),var(--c2),var(--c1) 36deg,var(--c1) 54deg,var(--c2) 90deg) 30;border-image:conic-gradient(from var(--angle),var(--c2),var(--c1) 36deg,var(--c1) 54deg,var(--c2) 90deg) 30;animation:borderRotate var(--d) linear infinite forwards}.box:nth-child(2){-o-border-image:radial-gradient(ellipse at var(--gradX) var(--gradY),var(--c1),var(--c1) 10%,var(--c2) 40%) 30;border-image:radial-gradient(ellipse at var(--gradX) var(--gradY),var(--c1),var(--c1) 10%,var(--c2) 40%) 30;animation:borderRadial var(--d) linear infinite forwards}@keyframes borderRotate{to{--angle:420deg}}@keyframes borderRadial{20%{--gradX:100%;--gradY:50%}40%{--gradX:100%;--gradY:100%}60%{--gradX:50%;--gradY:100%}80%{--gradX:0%;--gradY:50%}to{--gradX:50%;--gradY:0%}}