.controls{display:flex}.controls>*{flex:1}.wrapper{background-color:var(--background);justify-content:center;align-items:center;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:200px 0;display:flex}.grid{justify-content:center;align-items:center;display:flex}.grid__contents{position:relative;transform:rotate(45deg)}.circle{backface-visibility:visible;perspective-origin:150% 150%;transform-style:preserve-3d;border:20px solid var(--accent);opacity:1;width:200px;height:200px;animation-name:animationMove;animation-duration:4s;animation-timing-function:ease;animation-direction:forwards;border-radius:100%;justify-content:center;align-items:center;animation-iteration-count:infinite;display:flex}.circle~.circle{position:absolute;top:0;left:0}.middle{background-color:var(--accent);opacity:0;width:50px;height:50px;animation-name:animationOpacity;animation-duration:4s;animation-timing-function:linear;animation-direction:forwards;border-radius:100%;justify-content:center;align-items:center;animation-iteration-count:infinite;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes animationOpacity{0%{opacity:0}12%{opacity:0}12.01%{opacity:1}52%{opacity:1}52.01%{opacity:0}80%{opacity:0}}@keyframes animationMove{0%{transform:translate(0%)translateY(0%)}40%{transform:translateX(var(--transform-x)) translateY(var(--transform-y))}80%{transform:translate(0%)translateY(0%)}}