:root {
  --color-text: #efefef;
  --color-subtle-text: #dcdcdc;
  --color-accent-bright: #76d8d2;
  --color-title-glow: rgba(118, 216, 210, 0.28);
  --title-glow-size: 22px;
  --color-bg-glow-primary: rgba(95, 195, 190, 0.2);
  --color-bg-glow-secondary: rgba(55, 121, 160, 0.18);
  --color-bg-glow-tertiary: rgba(42, 167, 170, 0.12);
  --bg-glow-primary-position: 14% 14%;
  --bg-glow-secondary-position: 86% 10%;
  --bg-glow-tertiary-position: 50% 116%;
  --bg-glow-primary-size: 34%;
  --bg-glow-secondary-size: 37%;
  --bg-glow-tertiary-size: 41%;
  --bg-gradient-angle: 160deg;
  --color-bg-start: #1a2733;
  --color-bg-mid: #12202a;
  --color-bg-end: #0b151c;
  --bg-gradient-mid-stop: 50%;
  --color-ambience-primary: rgba(95, 195, 190, 0.14);
  --color-ambience-secondary: rgba(55, 121, 160, 0.13);
  --color-ambience-tertiary: rgba(118, 216, 210, 0.09);
  --ambience-primary-position: 82% 19%;
  --ambience-secondary-position: 20% 70%;
  --ambience-tertiary-position: 53% 36%;
  --ambience-primary-size: 31%;
  --ambience-secondary-size: 34%;
  --ambience-tertiary-size: 36%;
}

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

html,
body {
  height: 100%;
}

body {
  font-family: "Source Sans 3", sans-serif;
  color: var(--color-text);
  line-height: 1.45;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at var(--bg-glow-primary-position),
      var(--color-bg-glow-primary),
      transparent var(--bg-glow-primary-size)
    ),
    radial-gradient(
      circle at var(--bg-glow-secondary-position),
      var(--color-bg-glow-secondary),
      transparent var(--bg-glow-secondary-size)
    ),
    radial-gradient(
      circle at var(--bg-glow-tertiary-position),
      var(--color-bg-glow-tertiary),
      transparent var(--bg-glow-tertiary-size)
    ),
    linear-gradient(
      var(--bg-gradient-angle),
      var(--color-bg-start) 0%,
      var(--color-bg-mid) var(--bg-gradient-mid-stop),
      var(--color-bg-end) 100%
    );
}

body.theme-arctic {
  --color-accent-bright: #7fd6ff;
  --color-title-glow: rgba(125, 201, 255, 0.32);
  --title-glow-size: 24px;
  --color-bg-glow-primary: rgba(127, 214, 255, 0.22);
  --color-bg-glow-secondary: rgba(97, 165, 255, 0.2);
  --color-bg-glow-tertiary: rgba(77, 210, 255, 0.13);
  --bg-glow-primary-position: 12% 16%;
  --bg-glow-secondary-position: 87% 11%;
  --bg-glow-tertiary-position: 50% 118%;
  --bg-glow-primary-size: 34%;
  --bg-glow-secondary-size: 36%;
  --bg-glow-tertiary-size: 42%;
  --bg-gradient-angle: 162deg;
  --color-bg-start: #1a2432;
  --color-bg-mid: #101925;
  --color-bg-end: #0b1018;
  --bg-gradient-mid-stop: 48%;
  --color-ambience-primary: rgba(127, 214, 255, 0.15);
  --color-ambience-secondary: rgba(97, 165, 255, 0.13);
  --color-ambience-tertiary: rgba(80, 231, 255, 0.09);
  --ambience-primary-position: 88% 21%;
  --ambience-secondary-position: 16% 72%;
  --ambience-tertiary-position: 52% 33%;
  --ambience-primary-size: 31%;
  --ambience-secondary-size: 34%;
  --ambience-tertiary-size: 36%;
}

body.theme-noir {
  --color-accent-bright: #d8dde3;
  --color-title-glow: rgba(216, 221, 227, 0.2);
  --title-glow-size: 20px;
  --color-bg-glow-primary: rgba(255, 255, 255, 0.1);
  --color-bg-glow-secondary: rgba(205, 214, 224, 0.1);
  --color-bg-glow-tertiary: rgba(170, 178, 188, 0.09);
  --bg-glow-primary-position: 18% 12%;
  --bg-glow-secondary-position: 84% 22%;
  --bg-glow-tertiary-position: 52% 115%;
  --bg-glow-primary-size: 34%;
  --bg-glow-secondary-size: 36%;
  --bg-glow-tertiary-size: 40%;
  --bg-gradient-angle: 158deg;
  --color-bg-start: #1b1b1d;
  --color-bg-mid: #111214;
  --color-bg-end: #090909;
  --bg-gradient-mid-stop: 52%;
  --color-ambience-primary: rgba(240, 244, 250, 0.1);
  --color-ambience-secondary: rgba(172, 182, 192, 0.1);
  --color-ambience-tertiary: rgba(130, 140, 150, 0.08);
  --ambience-primary-position: 82% 18%;
  --ambience-secondary-position: 19% 66%;
  --ambience-tertiary-position: 54% 38%;
  --ambience-primary-size: 32%;
  --ambience-secondary-size: 35%;
  --ambience-tertiary-size: 34%;
}

body.theme-teal {
  --color-accent-bright: #76d8d2;
  --color-title-glow: rgba(118, 216, 210, 0.28);
  --title-glow-size: 22px;
  --color-bg-glow-primary: rgba(95, 195, 190, 0.2);
  --color-bg-glow-secondary: rgba(55, 121, 160, 0.18);
  --color-bg-glow-tertiary: rgba(42, 167, 170, 0.12);
  --bg-glow-primary-position: 14% 14%;
  --bg-glow-secondary-position: 86% 10%;
  --bg-glow-tertiary-position: 50% 116%;
  --bg-glow-primary-size: 34%;
  --bg-glow-secondary-size: 37%;
  --bg-glow-tertiary-size: 41%;
  --bg-gradient-angle: 160deg;
  --color-bg-start: #1a2733;
  --color-bg-mid: #12202a;
  --color-bg-end: #0b151c;
  --bg-gradient-mid-stop: 50%;
  --color-ambience-primary: rgba(95, 195, 190, 0.14);
  --color-ambience-secondary: rgba(55, 121, 160, 0.13);
  --color-ambience-tertiary: rgba(118, 216, 210, 0.09);
  --ambience-primary-position: 82% 19%;
  --ambience-secondary-position: 20% 70%;
  --ambience-tertiary-position: 53% 36%;
  --ambience-primary-size: 31%;
  --ambience-secondary-size: 34%;
  --ambience-tertiary-size: 36%;
}

body.theme-electric {
  --color-accent-bright: #6ea3ff;
  --color-title-glow: rgba(110, 163, 255, 0.3);
  --title-glow-size: 24px;
  --color-bg-glow-primary: rgba(90, 141, 255, 0.22);
  --color-bg-glow-secondary: rgba(63, 140, 255, 0.2);
  --color-bg-glow-tertiary: rgba(56, 107, 214, 0.13);
  --bg-glow-primary-position: 13% 15%;
  --bg-glow-secondary-position: 88% 9%;
  --bg-glow-tertiary-position: 52% 118%;
  --bg-glow-primary-size: 33%;
  --bg-glow-secondary-size: 36%;
  --bg-glow-tertiary-size: 41%;
  --bg-gradient-angle: 160deg;
  --color-bg-start: #131d31;
  --color-bg-mid: #0f1728;
  --color-bg-end: #0a101c;
  --bg-gradient-mid-stop: 52%;
  --color-ambience-primary: rgba(63, 140, 255, 0.15);
  --color-ambience-secondary: rgba(90, 141, 255, 0.13);
  --color-ambience-tertiary: rgba(110, 163, 255, 0.1);
  --ambience-primary-position: 84% 20%;
  --ambience-secondary-position: 18% 68%;
  --ambience-tertiary-position: 52% 34%;
  --ambience-primary-size: 32%;
  --ambience-secondary-size: 35%;
  --ambience-tertiary-size: 35%;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.018) 0,
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px,
      transparent 34px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.014) 0,
      rgba(255, 255, 255, 0.014) 1px,
      transparent 1px,
      transparent 34px
    );
  mix-blend-mode: soft-light;
  opacity: 0.35;
}

body::after {
  background:
    radial-gradient(
      circle at var(--ambience-primary-position),
      var(--color-ambience-primary),
      transparent var(--ambience-primary-size)
    ),
    radial-gradient(
      circle at var(--ambience-secondary-position),
      var(--color-ambience-secondary),
      transparent var(--ambience-secondary-size)
    ),
    radial-gradient(
      circle at var(--ambience-tertiary-position),
      var(--color-ambience-tertiary),
      transparent var(--ambience-tertiary-size)
    );
  filter: blur(16px) saturate(108%);
  animation: ambience-drift 14s ease-in-out infinite alternate;
}

.container {
  width: min(1240px, 100% - 2.2rem);
  margin: 0 auto;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.2rem 0;
  position: relative;
  z-index: 1;
}

.site-header {
  text-align: center;
}

.site-header h1 {
  color: var(--color-accent-bright);
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 0 var(--title-glow-size) var(--color-title-glow);
}

.site-header p {
  color: var(--color-subtle-text);
  margin-top: 0.1rem;
  font-size: 1.2rem;
}

@keyframes ambience-drift {
  0% {
    transform: translate3d(-1.2%, -1.1%, 0) scale(1);
  }
  100% {
    transform: translate3d(1.1%, 1.2%, 0) scale(1.02);
  }
}

@media (max-width: 720px) {
  .container {
    width: min(1240px, 100% - 1.3rem);
  }

  .site-header h1 {
    font-size: 1.7rem;
  }

  .site-header p {
    font-size: 1rem;
  }
}