: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 */
}

* {
  box-sizing: border-box;
}

/* 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*/
}

header {
  border-bottom: 1.5px solid;
  padding-bottom: 0.5em;

  display: flex;

  * {
    margin: 0;
  }

  & > h1 {
    flex-grow: 1;
    text-align: center;
    align-content: center;

    color: var(--primary);
  }

  & > nav > ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    /* width: max-content; */

    & > :first-child {
      display: none;
    }
  }

  @media (max-width: 600px) {
    & {
      flex-direction: column;
    }

    /* Hide main logo */
    & > div {
      display: none;
    }

    & > nav > ul {
      /* width: 100%; */
      flex-direction: row;
      list-style: disc inside;
      justify-content: space-between;
      padding: 0;
      flex-wrap: wrap;

      & > :first-child {
        display: revert-layer;
      }
    }
  }
}

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

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