:root {
  --base: 0.5rem;
  /* TODO remove */
  --gap: var(--base);
  --pad: var(--gap) var(--base);
  --mono: "JetBrains Mono", monospace;
  --serif: "Noto Serif", serif;
  --sans: "Noto Sans", sans-serif;
  font-size: 15px;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

html {
  background-color: var(--bg1);
}

#body {
  background-color: var(--bg1);
  color: var(--fg1);
  display: flex;
  flex-direction: column;
  /* TODO write a blog post about this */
  justify-content: space-between;
  margin: var(--gap) auto;
  max-width: 80ch;
  width: min(calc(100% - 2 * var(--gap)), 80ch);
}

tw-app {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  [hidden] {
    display: none !important;
  }

  a {
    color: var(--link1);
    &:hover {
      color: var(--link-hover);
    }
  }

  button {
    background-color: inherit;
    border: none;
    color: var(--fg2);
    cursor: pointer;
  }

  code {
    color: var(--code-string);
  }

  code, pre {
    font-family: var(--mono);
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--sans);
  }
}