.rainbow{--box-shadow: #6044b6;--pink: 180deg;--blue: 90deg}.rainbow-container{animation:rainbow 3s linear infinite;border:1px solid var(--border);border-radius:.5em;box-shadow:0 0 .3em .05em var(--box-shadow),inset .03em 0 .1em .02em #de66e4;height:1em;perspective:1em;transform:rotate(0) translateZ(0);transform-origin:center center;transform-style:preserve-3d;width:1em;z-index:1}@keyframes rainbow{0%{box-shadow:0 0 .3em .05em var(--box-shadow),inset .03em 0 .1em .02em #de66e4;transform:rotate(0) translateZ(0)}25%{box-shadow:0 0 .3em .05em var(--box-shadow),inset .03em 0 .1em .02em #19b3f5;transform:rotate(90deg) translateZ(0)}50%{box-shadow:0 0 .3em .05em var(--box-shadow),inset .03em 0 .1em .02em #34ceaa;transform:rotate(180deg) translateZ(0)}75%{box-shadow:0 0 .3em .05em var(--box-shadow),inset .03em 0 .1em .02em #3d52ac;transform:rotate(270deg) translateZ(0)}to{box-shadow:0 0 .3em .05em var(--box-shadow),inset .03em 0 .1em .02em #de66e4;transform:rotate(1turn) translateZ(0)}}.rainbow-container{position:relative}.rainbow-container>div{border-radius:50%;height:.8em;left:.1em;position:absolute;top:.1em;width:.8em}.green{animation:curve-rotate-green 6s linear infinite;background:-webkit-linear-gradient(left,hsla(0,0%,100%,0),hsla(0,0%,100%,0) 60%,rgba(115,213,186,.8));transform:rotateY(0) skew(14deg) rotate3d(1.1,1,.9,0)}.pink{animation:curve-rotate-pink 3s linear infinite;background:-webkit-linear-gradient(left,hsla(0,0%,100%,0),hsla(0,0%,100%,0) 50%,rgba(215,115,229,.8));transform:rotateY(var(--pink)) skew(14deg) rotate3d(1.1,1,.9,0)}.blue{animation:curve-rotate-blue 4.5s linear infinite;background:-webkit-linear-gradient(left,hsla(0,0%,100%,0),hsla(0,0%,100%,0) 50%,rgba(25,179,245,.8));transform:rotateY(var(--blue)) skew(14deg) rotate3d(1.1,1,.9,0)}@keyframes curve-rotate-green{0%{transform:rotateY(0) skew(14deg) rotate3d(1.1,1,.9,0)}50%{transform:rotateY(0) skew(14deg) rotate3d(1.1,1,.9,180deg)}to{transform:rotateY(0) skew(14deg) rotate3d(1.1,1,.9,1turn)}}@keyframes curve-rotate-blue{0%{transform:rotateY(var(--blue)) skew(14deg) rotate3d(1.1,1,.9,0)}50%{transform:rotateY(var(--blue)) skew(14deg) rotate3d(1.1,1,.9,180deg)}to{transform:rotateY(var(--blue)) skew(14deg) rotate3d(1.1,1,.9,1turn)}}@keyframes curve-rotate-pink{0%{transform:rotateY(var(--pink)) skew(14deg) rotate3d(1.1,1,.9,0)}50%{transform:rotateY(var(--pink)) skew(14deg) rotate3d(1.1,1,.9,180deg)}to{transform:rotateY(var(--pink)) skew(14deg) rotate3d(1.1,1,.9,1turn)}}