@property --t {
    syntax: "<integer>";
    initial-value: 0;
    inherits: true;
}

@keyframes tick {
    from {
        --t: 0;
    }
    to {
        --t: 86400000;
    }
}

/* kudos: audi (https://stackoverflow.com/a/61152370) */
:nth-child(1) {
    --nth-child: 1;
}
:nth-child(2) {
    --nth-child: 2;
}
:nth-child(3) {
    --nth-child: 3;
}
:nth-child(4) {
    --nth-child: 4;
}
:nth-child(5) {
    --nth-child: 5;
}
:nth-child(6) {
    --nth-child: 6;
}
:nth-child(7) {
    --nth-child: 7;
}

:root {
    --orbpos: calc(360/60);
    --radius: calc(2rem * 3.14);
    animation: tick 86400000ms linear infinite;
}

.orbs {
  display:flex;
  justify-content: center;
  align-items: center;
  transform:rotateX(calc(3.14rad/2 * var(--t)/1000)) rotateZ(calc(-3.14rad * var(--t)/1000));
  transform-style: preserve-3d;
  i {
    transform:rotateZ(calc(-1 * -3.14rad * var(--t)/1000)) rotateX(calc(-1 * 3.14rad/2 * var(--t)/1000));
    background-color: white;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    position: absolute;
      translate:
        calc(var(--radius) * cos(calc(var(--orbpos) * var(--t)/60000 * var(--nth-child))))
        calc(var(--radius) * sin(calc(var(--orbpos) * var(--t)/60000 * var(--nth-child))))
  }
}