/* ------------------------ Universals ------------------------ */
:root {
  --bg_color: #0e1303;
  --color-0: #7ef838;
  --color-1: #f91dc6;
  --content-bg: rgba(14, 19, 3, 0.85);
}

body {
  margin: 0;
  background: var(--bg_color);
  color: var(--color-0);
  font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
}

.content {
  padding: 2rem;
  padding-top: 10rem;
  max-width: 1000px;
  margin: auto;
}

/* Fonts */
h1 { font-size: clamp(1.25rem, 4vw, 2.5rem); font-weight: normal; margin: 0 0 1rem; }
h2, h3, h4 { font-size: 1.25rem; font-weight: normal; margin: 0 0 1rem; }
a, p, div, pre { font-size: 1.25rem; }

/* Links */
a { color: var(--color-0); text-decoration: none; /* display: block; */ }
a:hover { text-decoration: underline; }

/* Lists */
ul { list-style: none; padding: 0; margin: 0 0 2rem 2rem; }


/* ------------------------ Header ------------------------ */
.navbar { 
  background: var(--content-bg); box-sizing: border-box; position: fixed; display: flex; 
  justify-content: space-between; gap: 1rem; width: 100%; padding: 1rem 2rem 2rem; z-index: 100; 
}
.nav-links { display: flex; gap: 2rem; margin: 0; }

@media (max-width: 768px) {
  .navbar { flex-direction: column; }
  .nav-links { display: block; }
}


/* ------------------------ Footer ------------------------ */
.footer { position: absolute; box-sizing: border-box; width: 100%; bottom: 0; padding: 2rem 2rem 1rem; z-index: 100; /* Remove this: */ background-color: var(--content-bg); }
.footer p { margin: 0; }