html {
    background-color: black;
}

body {
    position: relative;
}

div {
    background-color: greenyellow;
    border: 1px solid brown;
    border-radius: 100%;
    position: absolute;
    background-image: linear-gradient(transparent 0 45%, black 46% 54%, transparent 50%);
    animation: circle infinite linear 2s;
    /* animation-composition: replace; */
}

/* TODO: debug */
div:nth-child(2n+1) {
    animation-delay: -0.5s;
}

.a {
    width: 5vw;
    height: 5vw;
    left: 0;
    top: 10vw;
    rotate: 90deg;
}

.b {
    width: 2.5vw;
    height: 2.5vw;
    left: 2.5vw;
    top: 8.75vw;
}

.c {
    width: 2.5vw;
    height: 2.5vw;
    left: 2.5vw;
    top: 11.25vw;
}

.d {
    width: 5vw;
    height: 5vw;
    left: 5vw;
    top: 10vw;
    rotate: 90deg;
}

.e {
    rotate: -60deg;
    width: 5vw;
    height: 5vw;
    left: 8vw;
    top: 10.4vw;
}

.f {
    rotate: 60deg;
    width: 5vw;
    height: 5vw;
    left: 10vw;
    top: 10.4vw;
}

.g {
    width: 3vw;
    height: 3vw;
    left: 10vw;
    top: 12vw;
}

.h {
    width: 5vw;
    height: 5vw;
    left: 14vw;
    top: 10vw;
    rotate: 90deg;
}

.i {
    width: 3vw;
    height: 3vw;
    left: 16.5vw;
    top: 8.6vw;
}

.j {
    width: 3vw;
    height: 3vw;
    left: 16.5vw;
    top: 13.6vw;
}

.k {
    width: 2vw;
    height: 2vw;
    left: 18.5vw;
    top: 13.2vw;
    rotate: 90deg;
}

.l {
    width: 1vw;
    height: 1vw;
    left: 18.5vw;
    top: 12.7vw;
}

.m {
    width: 2vw;
    height: 2vw;
    left: 21vw;
    top: 14vw;
}

.n {
    width: 5vw;
    height: 5vw;
    left: 22vw;
    top: 10vw;
    rotate: 90deg;
}

.o {
    width: 5vw;
    height: 5vw;
    left: 25vw;
    top: 10vw;
    rotate: 90deg;
}

.p {
    width: 3vw;
    height: 3vw;
    left: 24.7vw;
    top: 11vw;
}

.q {
    width: 5vw;
    height: 5vw;
    left: 27vw;
    top: 10vw;
    rotate: 90deg;
}

.r {
    width: 5vw;
    height: 5vw;
    left: 30vw;
    top: 10vw;
    rotate: 90deg;
}

.s {
    width: 3vw;
    height: 3vw;
    left: 29.7vw;
    top: 13.4vw;
}

.t {
    width: 3vw;
    height: 3vw;
    left: 29.7vw;
    top: 8.6vw;
}

.u {
    width: 5vw;
    height: 5vw;
    left: 32vw;
    top: 10vw;
    rotate: 90deg;
}

.v {
    width: 5vw;
    height: 5vw;
    left: 35vw;
    top: 10vw;
    rotate: 90deg;
}

.w {
    width: 6vw;
    height: 6vw;
    left: 33vw;
    top: 9.5vw;
    rotate: 56deg;
}

.x {
    width: 5vw;
    height: 5vw;
    left: 37vw;
    top: 10vw;
    rotate: 90deg;
}

.y {
    width: 5vw;
    height: 5vw;
    left: 40vw;
    top: 10vw;
    rotate: 90deg;
}

.z {
    width: 6vw;
    height: 6vw;
    left: 38vw;
    top: 9.5vw;
    rotate: 56deg;
}

.aa {
    width: 5vw;
    height: 5vw;
    left: 42vw;
    top: 10vw;
    rotate: 90deg;
}

.bb {
    width: 3vw;
    height: 3vw;
    left: 44.7vw;
    top: 13.4vw;
}

.cc {
    width: 3vw;
    height: 3vw;
    left: 44.7vw;
    top: 8.6vw;
}

.dd {
    width: 3vw;
    height: 3vw;
    left: 44.7vw;
    top: 10.6vw;
}

.ee {
    width: 5vw;
    height: 5vw;
    left: 47vw;
    top: 10vw;
    rotate: 90deg;
}

.ff {
    width: 3vw;
    height: 3vw;
    left: 49.7vw;
    top: 13.4vw;
}

.gg {
    width: 3vw;
    height: 3vw;
    left: 49.7vw;
    top: 8.6vw;
}

.hh {
    width: 5vw;
    height: 5vw;
    left: 52vw;
    top: 10vw;
    rotate: 90deg;
}

.ii {
    width: 5vw;
    height: 5vw;
    left: 55vw;
    top: 10vw;
    rotate: 90deg;
}

.jj {
    width: 3vw;
    height: 3vw;
    left: 54.7vw;
    top: 8.6vw;
}

.kk {
    width: 3vw;
    height: 3vw;
    left: 54.7vw;
    top: 13.4vw;
}

.ll {
    width: 5vw;
    height: 5vw;
    left: 57vw;
    top: 10vw;
    rotate: 90deg;
}

.mm {
    width: 5vw;
    height: 5vw;
    left: 60vw;
    top: 10vw;
    rotate: 90deg;
}

.nn {
    width: 3vw;
    height: 3vw;
    left: 59.7vw;
    top: 13.4vw;
}

.oo {
    width: 5vw;
    height: 5vw;
    left: 62vw;
    top: 10vw;
    rotate: 90deg;
}

.pp {
    width: 3vw;
    height: 3vw;
    left: 64.7vw;
    top: 8.6vw;
}

.qq {
    width: 3vw;
    height: 3vw;
    left: 64.7vw;
    top: 10.6vw;
}

.rr {
    width: 2vw;
    height: 2vw;
    left: 66.7vw;
    top: 10.1vw;
    rotate: 90deg;
}

.ss {
    width: 4vw;
    height: 4vw;
    left: 64.1vw;
    top: 11.4vw;
    rotate: 41deg;
}

.tt {
    width: 5vw;
    height: 5vw;
    left: 68vw;
    top: 10vw;
    rotate: 90deg;
}

.uu {
    width: 3vw;
    height: 3vw;
    left: 69vw;
    top: 8.6vw;
}

@keyframes circle {
    0% {
        rotate: 0turn;
    }
    100% {
        rotate: 1turn;
    }
}