:root {
  color-scheme: light dark; /* Required to use `light-dark()` */

  background-color: light-dark(white, #222);
  color: light-dark(black, white);

  font-size: 14pt;
  font-family: sans-serif; /* TODO: specific font */
}

/* TODO: do I want this just on main? */
body {
  max-width: 32em; /* Too narrow? */
  margin: 0 auto; /* To center it */
  padding: 1em; /* Page padding: 1em top/bottom 1.5em l/r*/
}

h1 {
  color: var(--primary);
}

header {
  border-bottom: 1.5px solid;
  display: flex;

  width: 100%;

  * {
    margin: 0;
  }

  padding-bottom: 0.5em;

  & > *:not(h1) {
    /* flex: 0 1 0; */
  }

  & > h1 {
    /* flex: 1 1 0; */
    flex-grow: 1;
    text-align: center;
    align-content: center;
  }

  nav > ul {
    list-style: none;
    width: max-content;
    margin-left: auto;
  }
}

/* TODO: center */
img {
  max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  /* @font-face in _prelude.typ */
  font-family: "Robot Teacher";
}