.animated-circles{justify-content:center;align-items:center;width:auto;height:400px;display:flex;position:relative;top:10vh;left:-22vh;transform:rotate(25deg)}.circle{width:calc(var(--i)*2.5vmin);aspect-ratio:1;transform-style:preserve-3d;animation:animate 3s ease-in-out calc(var(--i)*80ms)infinite;background:0 0;border:3px solid #2b99a8;border-radius:50%;position:absolute;transform:rotateX(70deg)translateZ(50px);box-shadow:0 0 15px #7c7c7c,inset 0 0 15px #7c7c7c}@keyframes animate{0%,to{filter:hue-rotate();transform:rotateX(70deg)translateZ(50px)translateY(0)}50%{filter:hue-rotate(360deg);transform:rotateX(70deg)translateZ(50px)translateY(-50vmin)}}