#container {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 0;
			height: 0;
			z-index: 2;
		}

		.orbit-wrapper {
			position: absolute;
			
			left: 0;
			transform-origin: 0 0;
			animation-name: orbit;
			animation-timing-function: linear;
			animation-iteration-count: infinite;
			z-index: 3;
		}

.orbit-image {
  position: absolute;                   /* keep this - required for orbit geometry */
  width: 64px;
  height: 64px;
  --radius: 150px;                      /* default fallback radius */
  --spin-duration: 40s;                 /* default fallback spin duration */
  transform: translate(var(--radius), 0) translate(-50%, -50%);
  transform-origin: center center;
  animation: spin var(--spin-duration) linear infinite;
}

@keyframes spin {
  from {
    transform: translate(var(--radius), 0) translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(var(--radius), 0) translate(-50%, -50%) rotate(360deg);
  }
}

		@keyframes orbit {
			from {
				transform: rotate(0deg);
			}

			to {
				transform: rotate(360deg);
			}
		}