* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  width: 100%;
  height: 100vh;
  background-color: rgb(46, 51, 80);
  display: grid;
  place-items: center;
}

.wrapper {
  width: 60rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  perspective: 100rem;
  perspective-origin: 76% 27%;
}

.circle {
  position: absolute;
  width: 40rem;
  aspect-ratio: 1;
  border: 0.1rem dashed #0ff;
  border-radius: 50%;
  transform-style: preserve-3d;
}

.circle-1 {
  transform: rotateY(70deg) rotateX(40deg);
  animation: circle1Anim 2s -1s infinite linear;
}

@keyframes circle1Anim {
  0% {
    transform: rotateY(70deg) rotateX(40deg);
  }

  100% {
    transform: rotateY(70deg) rotateX(40deg) rotateZ(360deg);
  }
}

.circle-2 {
  transform: rotateY(70deg) rotateX(-40deg);
  animation: circle2Anim 2s infinite linear;
}

@keyframes circle2Anim {
  0% {
    transform: rotateY(70deg) rotateX(-40deg);
  }

  100% {
    transform: rotateY(70deg) rotateX(-40deg) rotateZ(360deg);
  }
}

.circle-3 {
  transform: rotateY(180deg) rotateX(90deg);
  animation: circle3Anim 2s infinite linear;
}

@keyframes circle3Anim {
  0% {
    transform: rotateY(180deg) rotateX(90deg);
  }

  100% {
    transform: rotateY(180deg) rotateX(90deg) rotateZ(360deg);
  }
}

.circle-3::before {
  content: "";
  width: 12rem;
  aspect-ratio: 1;
  background-image: radial-gradient(rgb(255, 255, 255), 50%, rgb(55, 132, 146));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotateX(90deg);
  border-radius: 50%;
  animation: mainBallAnim 2s infinite linear;
}

@keyframes mainBallAnim {
  0% {
    transform: translate(-50%, -50%) rotateX(90deg);
  }

  100% {
    transform: translate(-50%, -50%) rotateX(90deg) rotateY(-360deg);
  }
}

.ball {
  width: 6rem;
  aspect-ratio: 1;
  background-image: radial-gradient(rgb(135, 214, 240), 70%, rgb(44, 44, 167));
  border-radius: 50%;
  position: absolute;
  top: -3rem;
  left: calc(50% - 3rem);
}

.ball-1,
.ball-2 {
  transform: rotateY(-90deg);
  animation: ballAnim 2s infinite linear;
}

@keyframes ballAnim {
  0% {
    transform: rotateY(-90deg);
  }

  100% {
    transform: rotateY(-90deg) rotateX(-360deg);
  }
}

.ball-3 {
  transform: rotateY(90deg) rotateX(90deg);
  animation: ball3Anim 2s infinite linear;
}

@keyframes ball3Anim {
  0% {
    transform: rotateY(90deg) rotateX(90deg);
  }

  100% {
    transform: rotateY(90deg) rotateX(450deg);
  }
}