body {
    min-height: 100vh;
    box-sizing: border-box;
  }
  
  body {
    background: black;
    display: grid;
    place-items: center;
    perspective: 15em;
  }
  .logo__container {
    width: 30%;
    aspect-ratio: 1;
    position: relative;
    animation: rotate 5s infinite linear;
    transform-style: preserve-3d;
    border-radius: 50%;
  }
  .logo__circle {
    height: 4em;
    aspect-ratio: 1;
    background: white;
    border-radius: 50%;
    position: absolute;
    inset: 0;
    margin: auto;
    animation: rotateRev 5s infinite linear;
    background-image: radial-gradient(
      circle at top,
      lightblue,
      limegreen,
      rebeccapurple 85%
    );
    border: rgba(0, 0, 0, 0.65) 2px solid;
    box-shadow: 0 0 3em 2.5em rgba(180, 140, 240, 0.15);
  }
  .one {
    left: -8em;
    bottom: -8em;
  }
  .two {
    right: -6em;
  }
  .three {
    left: -2.5em;
    top: -9em;
  }
  
  @keyframes rotate {
    0% {
      transform: rotateY(0);
    }
    25% {
      transform: rotateY(90deg);
    }
    50% {
      transform: rotateY(180deg);
    }
    75% {
      transform: rotateY(270deg);
    }
    100% {
      transform: rotateY(360deg);
    }
  }
  
  @keyframes rotateRev {
    0% {
      transform: rotateY(0) translateX(0);
    }
    25% {
      transform: rotateY(-90deg) translateX(1em) translateZ(5%);
    }
    50% {
      transform: rotateY(-180deg);
    }
    75% {
      transform: rotateY(-270deg) translateX(-.5em) translateZ(-25%);
    }
    100% {
      transform: rotateY(-360deg);
    }
  }
 
  /* https://codepen.io/skinnyK/pen/WNgovMg */