@font-face {
  font-family: "Tex Gyre Pagella";
  src: url("./texgyrepagella-regular.woff2") format('woff2');
  font-display: swap;
}

@font-face {
  font-family: "Tex Gyre Pagella";
  src: url("./texgyrepagella-bold.woff2") format('woff2');
  font-weight: bold;
  font-display: swap;
}

@font-face {
  font-family: "Tex Gyre Pagella";
  src: url("./texgyrepagella-italic.woff2") format('woff2');
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Tex Gyre Pagella";
  src: url("./texgyrepagella-bolditalic.woff2") format('woff2');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Tex Gyre Pagella Math";
  src: url("./texgyrepagella-math.woff2") format('woff2');
  font-display: swap;
}

:root {
  --accent: blue;
  --code-bg: #eee;
  --border-color: #bbb;
}

@media (prefers-color-scheme: dark) {
  :root {
      --accent: cornflowerblue;
      --code-bg: #23232b;
      --border-color: #666
  }
  html {
    font-weight: 350;
  }
}

html {
  scroll-behavior: smooth;
  line-height: 1.5;
  font-size: 1.1em;
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  text-rendering: optimizeLegibility;
  hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
  margin-inline-start: 100px;
  padding-inline: calc(8px + 1.5625vw);

  @media (max-width: calc(80ch + 400px)) {
    margin-inline-start: 0;
  }
}

body {
  max-width: 80ch;
  margin-block: 100px;
  margin-inline: 0;
  @media (max-width: calc(80ch + 400px)) {
    margin-inline: auto;
  }
}

*:focus-visible {
  outline: dotted !important;
}

.post-date {
  opacity: 0.6;
  font-style: italic;
  font-size: .8em;
}

footer a {
  text-decoration: none;
  &:hover, &:focus-visible { text-decoration: underline; }
}

h1:first-child {
  border-block-end: 1px solid var(--border-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Tex Gyre Pagella", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
}

footer {
  margin-block-start: 1em;
  border-block-start: 1px solid var(--border-color);
  font-size: 95%;
  text-align: end;
  & p {
    color: var(--border-color);
  }
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.25;
  margin-block: 2rem .5em;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }
h5 { font-size: .875rem; }
h6 { font-size: .75rem; }

a {
  color: var(--accent);
  &:hover, &:focus-visible {
    text-decoration: none;
  }
}

code {
  padding: 0 0.3rem;
  background-color: var(--code-bg);
  font-size: .8em;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

pre {
  background-color: var(--code-bg);
  padding: 1em 1.5em;
  overflow-inline: auto;
  & code { padding: 0; }
}

img, iframe, video, svg {
  max-width: 100%;
  vertical-align: middle;
  height: auto;
  font-style: italic;
}

mark { background-color: var(--accent); opacity: 0.2; }

blockquote { opacity: 0.8; }

table {
  border-collapse: collapse;
  width: 100%;
  text-indent: 0;
}
table caption {
  margin-block-end: .5rem;
}
tr {
  border-block-end: 1px solid var(--b-line);
}
td, th {
  padding: .5rem 0 .5rem 1rem;
  word-break: normal;

  &:first-child {
    padding-inline-start: 0;
  }
}

th {
  text-align: left;
}

hr {
  border: 0;
  border-block-end: 1px solid var(--border-color);
}

.footnote-ref, a[role="doc-noteref"] {
  text-decoration: none;
  & sup {
    &:hover { text-decoration: underline; }
    &:before { content: "["; }
    &:after { content: "]"; }
  }
}

#footnotes {
  font-size: .9em;
  opacity: 0.9;
  & ol li:target { font-weight: bold; }
}

.footnote-back, a[role="doc-backlink"] {
  float: right;
  font-size: .8em;
  text-decoration: none;
}

dt {
  font-weight: bold;
  float: left;
  margin-inline-end: .8em;
}

math {
  font-family: "Tex Gyre Pagella Math", serif;
}

.webring-articles {
  font-size: .8em;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: .5em;

  @media (max-width: 700px) {
    grid-template-columns: 1fr;
  }

  & .article {
    background-color: var(--code-bg);
    padding: .5em;

    & *:first-child {
      margin-block-start: 0;
    }

    & *:last-child {
      margin-block-end: 0;
    }
  }
}

code span.al { color: #bf0303; background-color: #f7e6e6; font-weight: bold; } /* Alert */
code span.an { color: #ca60ca; } /* Annotation */
code span.at { color: #0057ae; } /* Attribute */
code span.bn { color: #b08000; } /* BaseN */
code span.bu { color: #644a9b; font-weight: bold; } /* BuiltIn */
code span.cf { color: #1f1c1b; font-weight: bold; } /* ControlFlow */
code span.ch { color: #924c9d; } /* Char */
code span.cn { color: #aa5500; } /* Constant */
code span.co { color: #898887; } /* Comment */
code span.cv { color: #0095ff; } /* CommentVar */
code span.do { color: #607880; } /* Documentation */
code span.dt { color: #0057ae; } /* DataType */
code span.dv { color: #b08000; } /* DecVal */
code span.er { color: #bf0303; text-decoration: underline; } /* Error */
code span.ex { color: #0095ff; font-weight: bold; } /* Extension */
code span.fl { color: #b08000; } /* Float */
code span.fu { color: #644a9b; } /* Function */
code span.im { color: #ff5500; } /* Import */
code span.in { color: #b08000; } /* Information */
code span.kw { color: #1f1c1b; font-weight: bold; } /* Keyword */
code span.op { color: #1f1c1b; } /* Operator */
code span.ot { color: #006e28; } /* Other */
code span.pp { color: #006e28; } /* Preprocessor */
code span.re { color: #0057ae; background-color: #e0e9f8; } /* RegionMarker */
code span.sc { color: #3daee9; } /* SpecialChar */
code span.ss { color: #ff5500; } /* SpecialString */
code span.st { color: #bf0303; } /* String */
code span.va { color: #0057ae; } /* Variable */
code span.vs { color: #bf0303; } /* VerbatimString */
code span.wa { color: #bf0303; } /* Warning */

@media (prefers-color-scheme: dark) {
  code span.al { color: #95da4c; background-color: #4d1f24; font-weight: bold; } /* Alert */
  code span.an { color: #3f8058; } /* Annotation */
  code span.at { color: #2980b9; } /* Attribute */
  code span.bn { color: #f67400; } /* BaseN */
  code span.bu { color: #7f8c8d; } /* BuiltIn */
  code span.cf { color: #fdbc4b; font-weight: bold; } /* ControlFlow */
  code span.ch { color: #3daee9; } /* Char */
  code span.cn { color: #27aeae; font-weight: bold; } /* Constant */
  code span.co { color: #7a7c7d; } /* Comment */
  code span.cv { color: #7f8c8d; } /* CommentVar */
  code span.do { color: #a43340; } /* Documentation */
  code span.dt { color: #2980b9; } /* DataType */
  code span.dv { color: #f67400; } /* DecVal */
  code span.er { color: #da4453; text-decoration: underline; } /* Error */
  code span.ex { color: #0099ff; font-weight: bold; } /* Extension */
  code span.fl { color: #f67400; } /* Float */
  code span.fu { color: #8e44ad; } /* Function */
  code span.im { color: #27ae60; } /* Import */
  code span.in { color: #c45b00; } /* Information */
  code span.kw { color: #cfcfc2; font-weight: bold; } /* Keyword */
  code span.op { color: #cfcfc2; } /* Operator */
  code span.ot { color: #27ae60; } /* Other */
  code span.pp { color: #27ae60; } /* Preprocessor */
  code span.re { color: #2980b9; background-color: #153042; } /* RegionMarker */
  code span.sc { color: #3daee9; } /* SpecialChar */
  code span.ss { color: #da4453; } /* SpecialString */
  code span.st { color: #f44f4f; } /* String */
  code span.va { color: #27aeae; } /* Variable */
  code span.vs { color: #da4453; } /* VerbatimString */
  code span.wa { color: #da4453; } /* Warning */
}