body {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 100vh;
        overflow: hidden;
      }
      
      .header {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
      }

html { color-scheme: dark }
body { padding: 2rem; font-family: system-ui, sans-serif }

/* header */
header {
  display: grid;
  align-items: center;
  width: min(60rem, 100%);
  margin-inline: auto;
}
header :is(.orbits, .content){ grid-area: 1/1 }

/* content */
.content { place-self: center; text-align:center; max-width: 40ch }
.content > p:nth-of-type(1) { text-transform: uppercase; font-size: .8rem }
.content > h1 { font-size: 2.5rem; font-weight: 800 }
.content > h1 > span { color: hsl(350 100% 50%) }
.content > p:nth-of-type(2){ font-size: 1.2rem }

/* orbits */
.orbits {  
  --orbit-outer-size: 100%;
  --orbit-inner-size: 75%;
  --orbit-image-size:
  min(4vw, 3rem);
  /* --orbit-ring-color:
  hsl(0deg 0% 98% / 75%); */
  --orbit-ring-thickness: 1px;
  --orbit-animation-duration: 10s;
  display: grid;
  grid-template-columns: 1fr 1fr;
  --mask-image:
  radial-gradient(circle at center, transparent 7%, black 37%);
  -webkit-mask-image: var(--mask-image);
  mask-image: var(--mask-image);
  overflow: hidden;
  z-index: -1;
}
.orbits :is(.left, .right, .outer, .inner) { display: grid; aspect-ratio: 1/1 }
.orbits .left { place-items: center end }
.orbits .right { place-items: center start }

.orbits :is(.outer, .inner){
  grid-area: 1/1;
  width: calc(var(--width) - var(--orbit-image-size));
  border: var(--orbit-ring-thickness) solid var(--orbit-ring-color);
  border-radius: 50%;
  animation: orbit-rotate var(--orbit-animation-duration) linear infinite;
}
.orbits .outer { --width: var(--orbit-outer-size) }
.orbits .inner { --width: var(--orbit-inner-size) }

.orbits [data-orbit-rotate="left"] { --orbit-rotate-to: -360deg }
.orbits [data-orbit-rotate="right"]{ --orbit-rotate-to:  360deg }

.orbits img { 
  grid-area: 1/1;
  width: var(--orbit-image-size);
  aspect-ratio: 1/1;
  border-radius: 50%;
  object-fit: cover;
  --translate: translateX(var(--tx, 0)) translateY(var(--ty, 0));
  transform: var(--translate);
  animation: orbit-image-rotate var(--orbit-animation-duration) linear infinite;
  place-self: var(--ps)
}
.orbits img:nth-child(1) { --ps: start center; --ty: -50% }
.orbits img:nth-child(2) { --ps: center end  ; --tx:  50% }
.orbits img:nth-child(3) { --ps: end center  ; --ty:  50% }
.orbits img:nth-child(4) { --ps: center start; --tx: -50% }

/* .orbits :is(.outer, .inner):hover,
.orbits :is(.outer, .inner):hover img{
  animation-play-state: paused;
} */

@keyframes orbit-rotate { to { transform: rotate(var(--orbit-rotate-to)) } }
@keyframes orbit-image-rotate { to { transform: var(--translate) rotate(calc(var(--orbit-rotate-to) * -1)) } }