:root {
  --dark-indigo: #2D0A7F;
  --midnight-blue: #25174A;
  --white-smoke: #EFEFEF;
  --cyan-signal: #3DB9D3;
  --teal: #009688;
  --signal-amber: #F4A259;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-block-size: 100vh;
  background: linear-gradient(30deg, var(--dark-indigo) 0%, #291065 60%, var(--midnight-blue) 100%);
  color: var(--white-smoke);
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
}

main {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 100vh;
  overflow: hidden;
}

h1 {
  position: relative;
  margin: 0;
  font-size: clamp(2rem, 10vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bands {
  position: absolute;
  inset: 0;
}

.band {
  position: absolute;
  inset-inline-start: -40%;
  inline-size: 40%;
  block-size: 0.5rem;
  border-radius: 0.25rem;
  opacity: 0.85;
  animation: route 7s linear infinite;
}

.band-cyan {
  inset-block-start: 38%;
  background: var(--cyan-signal);
}

.band-teal {
  inset-block-start: 50%;
  background: var(--teal);
  animation-delay: -2.4s;
}

.band-amber {
  inset-block-start: 62%;
  background: var(--signal-amber);
  animation-delay: -4.7s;
}

@keyframes route {
  to {
    transform: translateX(350%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .band {
    animation: none;
    inset-inline-start: 30%;
  }
}