:root {
  height: 100%;
  font-size: 1.1em;

  --background: var(--base00);
  --foreground: var(--base05);
  --accent-color: var(--base0C);
}

body {
  min-height: 100%;
  margin: 0;
  background: var(--background);
}

#links {
  --width: 40ch;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--width);
  grid-template-columns: repeat(auto-fill, minmax(var(--width), 1fr));
  gap: 0.5em;

  // Place it at the very center.
  position: absolute;
  top: 30%;
  margin-top: calc(var(--width) / 2);
  margin-left: calc(0 - var(--width));

  height: auto;
  margin: 0 auto;

  overflow-x: scroll;

  section[id^="section-"] {
    background: var(--foreground);
    color: var(--background);
    font-family: sans-serif;

    border: 0.5em solid var(--accent-color);
    padding: 1rem;
    text-align: center;

    .nav-header {
      font-size: 1.5em;
      font-weight: bolder;
    }

    .flavor-text {
      font-size: 0.9em;
      font-style: italic;
      display: inline-block;
      width: 100%;
    }

    nav {
      display: flex;
      flex-direction: column;
    }

    a {
      color: var(--background);

      &:hover {
        color: var(--accent-color);
      }
    }
  }
}