body {
  height: 100vh;
  height: 100svh;
  display: grid;
  perspective: 150vmin;
  overflow: hidden;
  background: radial-gradient(circle, hsl(203 50% 2%), hsl(203 50% 10%));
  font-family: system-ui, sans-serif;
  font-size: 3.6vmin;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
  display: grid;
  margin: auto;

  animation: display-case 10000ms infinite linear;
  animation-play-state: paused;
  transform-style: preserve-3d;
}

@media (prefers-reduced-motion: no-preference) {
  ul {
    animation-play-state: running;
  }
}

li {
  width: 2vmin;
  height: 2vmin;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  border: 0.85vmin double currentColor;
  border-width: 0;
  color: hsl(var(--hue, 343), 99%, 50%);
  width: 4vmin;
  height: 4vmin;
  border-radius: 50%;
  transform: translateY(var(--y)) rotateY(var(--r)) translateX(var(--x))
    scale(var(--s));
  transform-style: preserve-3d;
  display: grid;
  place-items: center;
}

@keyframes display-case {
  to {
    transform: rotateY(1turn);
  }
}

aside {
  position: absolute;
  z-index: -1;
  margin: auto;
  inset: 0;
  content: "";
  filter: blur(6vmin);
  height: 70vmin;
  width: 35vmin;
  transform: translateY(5vmin) translateZ(-10vmin);
}

aside div {
  position: absolute;
  inset: 0vmin 7vmin;
  background: hsl(133 80% 40%);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  opacity: 0.5;
  animation: pulse 6677ms infinite alternate ease-in-out;
}

@keyframes pulse {
  to {
    opacity: 0.2;
  }
}