@media (prefers-color-scheme: light) {
  :root {
    --text: #27272a;
    --background: #f4f4f5;
    --primary: #facc15;
    --secondary: #463ACB;
    --accent: #3abff8;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #fafafa;
    --background: #27272a;
    --primary: #3abff8;
    --secondary: #463acb;
    --accent: #f59f0a;
  }
}

.debug {
  border: 2px solid red;
}

.debug2 {
  border: 2px solid blue;
}

body {
  background: var(--background);
  color: var(--text);
  font-family: "Inter Tight";
}

.hero-section {  
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 1fr);
  justify-items: center;
}

.hero-text {
  font-family: "Honk";
  font-size: 3rem;
}