@charset "UTF-8";

@font-face {
  font-family: "Libertinus Serif";
  src: url("/font/LibertinusSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Libertinus Serif";
  src: url("/font/LibertinusSerif-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Libertinus Serif";
  src: url("/font/LibertinusSerif-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Libertinus Serif";
  src: url("/font/LibertinusSerif-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "Source Code Pro";
  src: url("/font/SourceCodePro-Regular.ttf.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Source Code Pro";
  src: url("/font/SourceCodePro-It.ttf.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Source Code Pro";
  src: url("/font/SourceCodePro-Bold.ttf.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Source Code Pro";
  src: url("/font/SourceCodePro-BoldIt.ttf.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
}

:root {
  --color-background: #fff;
  --color-code-block: #ededed;
  --color-link: #000080;
  --color-text: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #1b1b1b;
    /* For now, Typst still hard-codes token colors, so make the block bright as
       well to keep it readable. */
    /* --color-code-block: #343434; */
    --color-code-block: #ededed;
    --color-link: #8080ff;
    --color-text: #fff;
  }

  /* See the comment above. */
  pre {
    color: #000;
  }
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: "Libertinus Serif", serif;
  margin: 16px 32px;
}

main, footer {
  width: 80ch;
  margin: 0 auto;
  position: relative;
}

a:any-link {
  color: var(--color-link);
}

:is(h1, h2, h3, h4, h5, h6) > a:any-link {
  color: inherit;
  text-decoration: inherit;
}

code {
  font-family: "Source Code Pro", monospace;
  font-size: 0.8rem;
  line-height: 1.5em;
  white-space: pre;
}

hr {
  width: 100%;
  margin: 1em 0;
}

p {
  hyphens: auto;
  margin-bottom: 0.5em;
  text-align: justify;
}

pre {
  background-color: var(--color-code-block);
  border-radius: 0.5em;
  overflow-x: scroll;
  padding: 0.5em;
}