@keyframes spin {
  0% { rotate: 0; }
  100% { rotate: 360deg; }
}

:root {
  background: #ddd;
  margin: 0;
  height: 100vh;
  overflow: hidden;
}

:root::before {
  content: "";
  width: 20vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 50% 40vmin;
  translate: -50% calc(-50% - 30vmin);
  background: #aaa;
  box-shadow:
    0  2vmin #888,
    0  4vmin #222,
    0  6vmin #aaa,
    0  8vmin #888,
    0 10vmin #222,
    0 12vmin #aaa,
    0 14vmin #888,
    0 16vmin #222,
    0 18vmin #aaa,
    0 20vmin #888,
    0 22vmin #222,
    0 24vmin #aaa,
    0 26vmin #888,
    0 28vmin #222,
    0 30vmin #aaa;
  animation: spin 4s linear infinite;
}

:root:hover::before {
  animation-play-state: paused;
}