:root {
  --txt-color: #111111;
  --bg-color: #FFFCCC;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/AtkinsonHyperlegibleNext-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap; /* no FOIT */
}
body {
  line-height: 1.4;
  margin: 0 auto;
  padding: 1rem 0;
  color: var(--txt-color);
  background: var(--bg-color);
  font-size: 1.1rem;
  font-family: "Atkinson Hyperlegible Next", sans-serif;
}
.body-content {
  max-width: 770px;
  margin: 0 auto;
  padding: 2rem 2rem;
}
header {
  width: 100%;
}
.header-content {
  max-width: 100%;
  margin: 1rem auto;
}
.line-1 {
  width: 100%;
  height: 1px;
  background-color: var(--txt-color);
}
.nav-bar {
  display: flex;
  flex-direction: column;
  align-items: center; 
}
.nav-links {  
  display: flex;
  gap: 4rem;
}
.nav-links a {
  text-decoration: none;
}
a:hover {
  color: var(--txt-color);
}

code { 
  font-family: monospace;
} 

img { 
  max-width: 100%;
}

/* responsive */
@media only screen and (max-width: 600px) { .body-content { padding: 0; } }
@media only screen and (max-width: 400px) { body { padding: 0; } }
@media (prefers-color-scheme: dark) {
  :root {
    --txt-color: #FFFCCC;
    --bg-color: #111111;
  }
}