/* Define the fonts as variables for easy reuse */
:root {
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

.footer {
  font-family: var(--font-mono);
  font-size: 0.9rem; /* Slightly smaller for the footer */
}

/* Apply Inter to the general body text */
p,
li {
  font-family: var(--font-body);
  /* Optional: Improves font rendering on macOS/iOS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Apply JetBrains Mono to headings and maybe the footer to give it that tech feel */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-mono);
}

/* If you want to make your bold text pop a bit more with Inter */
b,
strong {
  font-weight: 600;
}

body {
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  line-height: 1.5; /* Makes text more readable */
}

.container {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 100%;
  max-width: 600px;
  padding: 3rem 1rem; /* Added more top padding for breathing room */
  box-sizing: border-box;
  /* This controls the tight spacing between your text elements */
  gap: 0.5rem;
}

/* Remove default margins so 'gap' does all the work */
h2,
h3,
p,
a {
  margin: 0;
}

h2 {
  color: var(--primary);
  font-size: 1.5rem;
}

h3 {
  font-size: 1.1rem;
  font-weight: 500;
}

a {
  /* color: var(--primary); */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

footer {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  padding-bottom: 1rem;
  font-size: 0.85rem;
  opacity: 0.7; /* Makes the "rendered at" look subtle */
}