.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}.cell{background-color:var(--accent);width:3px;height:3px;animation-timing-function:ease;animation-delay:var(--delay);animation-name:animationRotation;animation-duration:var(--duration);animation-direction:forwards;opacity:var(--opacity);transform:scale(var(--scale)) rotate(0deg);border-radius:50%;justify-content:center;align-items:center;animation-iteration-count:infinite;display:flex}.cell~.cell{position:absolute;top:0;left:0}@keyframes animationRotation{0%{transform:scale(var(--scale)) rotate(0deg);border-radius:50%}20%{border-radius:40%}40%{transform:scale(calc(var(--scale) * 2)) rotate(var(--rotationMid))}50%{border-radius:40%}80%{transform:scale(var(--scale)) rotate(var(--rotationEnd));border-radius:50%}to{transform:scale(var(--scale)) rotate(var(--rotationEnd));border-radius:50%}}