.add-container {
      width: 100vw;
      height: 50vh;
      display: flex;
      align-items: center;
      justify-content: center;
      float: left;
      /* background: hsl(210, 30%, 0%) radial-gradient(hsl(210, 30%, 20%), hsl(210, 30%, 0%)); */

    }

    .add-sphere {
      width: 250px;
      height: 250px;
      border-radius: 50%;
      transform-style: preserve-3d;
      transform-origin: center center;
      animation: rot 16s linear infinite reverse;
      position: relative;
    }

    .add-sphere i {
      position: absolute;
      width: 250px;
      height: 250px;
      line-height: 250px;
      border-radius: 50%;
      transform-style: preserve-3d;
      backface-visibility: visible;
      box-shadow:
        0 0 62.5px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 62.5px 0 rgba(255, 255, 255, 0.2);
    }

    @keyframes rot {
      to {
        transform: rotateY(360deg) rotateZ(360deg);
      }
    }