:root {
  --page-bg: #eff5df;
  --page-bg-2: #dbe8c6;
  --panel-strong: #0a332d;
  --panel-soft: #587169;
  --border: rgba(7, 51, 44, 0.12);
  --shadow:
    0 24px 60px rgba(19, 43, 34, 0.12),
    0 8px 20px rgba(19, 43, 34, 0.08);
  --sans: 'Bahnschrift', 'Trebuchet MS', sans-serif;
  --heading: 'Arial Black', 'Bahnschrift', sans-serif;
  --mono: 'Consolas', 'Courier New', monospace;
  font: 18px/1.5 var(--sans);
  color: var(--panel-strong);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(255, 214, 10, 0.35), transparent 28%),
    radial-gradient(circle at bottom right, rgba(11, 88, 73, 0.2), transparent 32%),
    linear-gradient(180deg, var(--page-bg), var(--page-bg-2));
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 78%);
}

#root {
  min-height: 100vh;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: var(--heading);
  letter-spacing: 0.02em;
}

h1 {
  margin: 18px 0 14px;
  font-size: clamp(2.8rem, 8vw, 5rem);
  line-height: 0.94;
}

h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

p {
  color: var(--panel-soft);
}

@media (max-width: 720px) {
  :root {
    font-size: 16px;
  }
}