:root {
  color-scheme: dark;
  --color-ink: #f8fafc;
  --color-night: #081225;
  --color-steel: #94a3b8;
  --color-border: rgba(255, 255, 255, 0.1);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  background-color: var(--color-night);
  color: var(--color-ink);
  font-family: ui-sans-serif, system-ui, sans-serif;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

main {
  width: 100%;
}

header,
footer {
  width: 100%;
}

::selection {
  background: rgba(220, 38, 38, 0.35);
  color: var(--color-ink);
}

@keyframes hero-drift-a {
  0% {
    transform: translate3d(-22%, -16%, 0) scale(0.84);
    opacity: 0.28;
  }

  50% {
    transform: translate3d(18%, 12%, 0) scale(1.16);
    opacity: 0.46;
  }

  100% {
    transform: translate3d(-14%, 20%, 0) scale(0.92);
    opacity: 0.32;
  }
}

@keyframes hero-drift-b {
  0% {
    transform: translate3d(18%, -12%, 0) scale(0.92);
    opacity: 0.2;
  }

  50% {
    transform: translate3d(-22%, 14%, 0) scale(1.22);
    opacity: 0.4;
  }

  100% {
    transform: translate3d(14%, -18%, 0) scale(0.9);
    opacity: 0.24;
  }
}

@keyframes hero-drift-c {
  0% {
    transform: translate3d(-8%, 4%, 0) scale(0.78);
    opacity: 0.18;
  }

  50% {
    transform: translate3d(-18%, -18%, 0) scale(1.2);
    opacity: 0.34;
  }

  100% {
    transform: translate3d(20%, 14%, 0) scale(0.94);
    opacity: 0.22;
  }
}

.hero-glow-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-glow-orb {
  position: absolute;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.72) 20%, rgba(255, 255, 255, 0.24) 48%, rgba(255, 255, 255, 0) 76%);
  filter: blur(64px);
  mix-blend-mode: screen;
}

.hero-glow-orb--one {
  top: 1rem;
  left: -6rem;
  width: 30rem;
  height: 30rem;
  animation: hero-drift-a 12s ease-in-out infinite alternate;
}

.hero-glow-orb--two {
  top: 6rem;
  right: 4%;
  width: 24rem;
  height: 24rem;
  animation: hero-drift-b 14s ease-in-out infinite alternate;
}

.hero-glow-orb--three {
  bottom: -1rem;
  left: 18%;
  width: 22rem;
  height: 22rem;
  animation: hero-drift-c 13s ease-in-out infinite alternate;
}

@media (max-width: 640px) {
  .hero-glow-orb--one {
    width: 21rem;
    height: 21rem;
    left: -7rem;
  }

  .hero-glow-orb--two {
    width: 16rem;
    height: 16rem;
    right: -4rem;
  }

  .hero-glow-orb--three {
    width: 15rem;
    height: 15rem;
    left: 2%;
  }
}