.system {
    width: 100dvw;
    height: 90dvh;

    /* positions all p elements in center */
    display: grid;
    place-items: center;

    position: relative;
}

.system p{
    position: absolute;

    /* Sets width of p element, incrementing per element */
    width: calc(9rem * (1.25 + var(--index)));

    aspect-ratio: 1/1;
    border-radius: 50%;

    font-size: 3em;
    font-weight: bold;

    /* Takes index of p and set's it to parent index to use with the spans */
    --parent-index: var(--index);

    /* Inverses p layering */
    z-index: calc(var(--count) - var(--index));
    display: grid;
    place-items: center;


    background-image: 
    /* Creates black circles around every p-tag */
    radial-gradient(
      closest-side,
      #0000 calc(100% - .6em), 
      white 0 calc(100% - .01em),
      #0000 0
    );

    span{
        display: inline-block;
        position: absolute;
        padding-inline: 10px;
        transform: 
            rotateZ(calc(var(--index) * 360deg / var(--count)))
            translateY(calc((var(--parent-index) + 1) * -4.5rem))
        ;
        /* Layers letters on top of the circles */
        z-index: 1;
        background-color: var(--color-background);
    }
}

/* Plays the animation  */
.system p:nth-child(2n) {
  animation: rotateSystem calc(var(--index) * 2s + 5s) calc(var(--index) * -0.5s) infinite;
}

.system p:nth-child(2n-1) {
  animation: rotateSystem calc(var(--index) * 2s + 5s) calc(var(--index) * -0.5s) infinite reverse;
}


.system p:hover,
.system p:hover ~ p,
.system p:focus-visible,
.system p:focus-visible ~ p {
  animation-play-state: paused;
}

/* Rotates object with pauses in between */
@keyframes rotateSystem {
  0%   { transform: rotate(0deg); }
  9%   { transform: rotate(60deg); }
  17%  { transform: rotate(60deg); }
  26%  { transform: rotate(120deg); }
  34%  { transform: rotate(120deg); }
  43%  { transform: rotate(180deg); }
  51%  { transform: rotate(180deg); }
  60%  { transform: rotate(240deg); }
  68%  { transform: rotate(240deg); }
  77%  { transform: rotate(300deg); }
  85%  { transform: rotate(300deg); }
  94%  { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}