* {
    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);
    }
  }