:root {
  --circle-size: 7px;
  --gap: calc(var(--circle-size) * 1.2);

  --dot-color: transparent;
  --light-dot-color: black;
}

/* Automatic dark mode from OS/browser preference */
@media (prefers-color-scheme: dark) {
  :root {
  --light-dot-color: white;

  }
}

/* Manual overrides */
:root.light {
  --light-dot-color: black;

}

:root.dark {
  --light-dot-color: white;

}

.loading-frame {
    height: 10px;
    transform: translate(-20px, -10px);
}

.circle {
  position: absolute;
  height: var(--circle-size);
  width: var(--circle-size);
  border-radius: 50%;
  background-color: var(--dot-color);
  animation: animate 2s linear infinite;
}

/* Individual positions + delays */


.circle:nth-child(1) {
  animation-delay: 0.9s;
  transform: translate(0, 0);
}

.circle:nth-child(2) {
  animation-delay: 1.1s;
  transform: translate(
    calc(var(--gap) * 1.0),
    calc(var(--gap) * 0.7)
  );
}

.circle:nth-child(3) {
  animation-delay: 1.3s;
  transform: translate(
    calc(var(--gap) * 2.0),
    calc(var(--gap) * 1.4)
  );
}

.circle:nth-child(4) {
  animation-delay: 1.1s;
  transform: translate(
    calc(var(--gap) * 1.0),
    calc(var(--gap) * 2.1)
  );
}

.circle:nth-child(5) {
  animation-delay: 0.9s;
  transform: translate(
    0,
    calc(var(--gap) * 2.8)
  );
}

.circle:nth-child(6) {
  animation-delay: 0.9s;
  transform: translate(
    0,
    calc(var(--gap) * 1.4)
  );
}

.circle:nth-child(7) {
  animation-delay: 0.7s;
  transform: translate(
    calc(var(--gap) * -1.1),
    calc(var(--gap) * 1.4)
  );
}

.circle:nth-child(8) {
  animation-delay: 0.5s;
  transform: translate(
    calc(var(--gap) * -2.2),
    calc(var(--gap) * 1.4)
  );
}

.circle:nth-child(9) {
  animation-delay: 0.3s;
  transform: translate(
    calc(var(--gap) * -3.3),
    calc(var(--gap) * 1.4)
  );
}

.circle:nth-child(10) {
  animation-delay: 0.1s;
  transform: translate(
    calc(var(--gap) * -4.4),
    calc(var(--gap) * 1.4)
  );
}

@keyframes animate {
  0%,
  100% {
    background-color: var(--dot-color);
  }

  50% {
    background-color: var(--light-dot-color);
  }
}