.dot {
  background-color: #fff;
  position: fixed;
  bottom: 55px;
  right: 55px;
  z-index: 100;
  transform-origin: 0 0;
}
@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(var(--orbit-radius)) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(var(--orbit-radius)) rotate(-360deg);
  }
}
.dot:nth-child(1) {
  --orbit-radius: 45px;
  animation: orbit 5s linear infinite;
  width: 1px;
  height: 1px;
}
.dot:nth-child(2) {
  --orbit-radius: 60px;
  animation: orbit 7s linear infinite;
  width: 1px;
  height: 1px;
}
.dot:nth-child(3) {
  --orbit-radius: 75px;
  animation: orbit 10s linear infinite;
  width: 2px;
  height: 2px;
}
.dot:nth-child(4) {
  --orbit-radius: 90px;
  animation: orbit 11s linear infinite;
  width: 2px;
  height: 2px;
}
.dot:nth-child(5) {
  --orbit-radius: 105px;
  animation: orbit 13s linear infinite;
  width: 3px;
  height: 3px;
}
.dot:nth-child(6) {
  --orbit-radius: 120px;
  animation: orbit 15s linear infinite;
  width: 3px;
  height: 3px;
}

.dot {
  background-color: var(--textcolor);
  position: fixed;
  bottom: 55px;
  right: 55px;
  z-index: 10;
  transform-origin: 0 0;
}
@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(var(--orbit-radius)) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(var(--orbit-radius)) rotate(-360deg);
  }
}
.dot:nth-child(1) {
  --orbit-radius: 45px;
  animation: orbit 5s linear infinite;
  width: 1px;
  height: 1px;
}
.dot:nth-child(2) {
  --orbit-radius: 60px;
  animation: orbit 7s linear infinite;
  width: 1px;
  height: 1px;
}
.dot:nth-child(3) {
  --orbit-radius: 75px;
  animation: orbit 10s linear infinite;
  width: 2px;
  height: 2px;
}
.dot:nth-child(4) {
  --orbit-radius: 90px;
  animation: orbit 11s linear infinite;
  width: 2px;
  height: 2px;
}
.dot:nth-child(5) {
  --orbit-radius: 105px;
  animation: orbit 13s linear infinite;
  width: 3px;
  height: 3px;
}
.dot:nth-child(6) {
  --orbit-radius: 120px;
  animation: orbit 15s linear infinite;
  width: 3px;
  height: 3px;
}