@font-face {
  font-family: 'Epilogue';
  font-weight: 700;
  font-display: swap;
  font-style: normal;
  src: url("fonts/epilogue-bold.woff2") format("woff2");
}

@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url("fonts/inter.woff2") format("woff2");
}

@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
  font-named-instance: 'Italic';
  src: url("fonts/inter-italic.woff2") format("woff2");
}

:root {
  /* Light colors */
  color-scheme: light;
  --color-base: hsl(220, 20%, 10%);
  --color-text: hsl(220, 20%, 20%);
  --color-dim: hsl(220, 20%, 40%);
  --color-link: hsl(220, 20%, 10%);
  --color-link-hover: hsl(220, 20%, 40%);
  --color-line: hsl(220, 20%, 90%);
  --color-background: hsl(220, 20%, 100%);

  /* Fonts */
  --font-family-code: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
  --font-family-ui: -apple-system, system-ui, sans-serif;
  --font-family-display: Epilogue, var(--font-family-ui);

  --font-code: .9em/1.5 var(--font-family-code);
  --font-display: bold clamp(2rem, 10vw, 4rem)/1 var(--font-family-display);
  --font-display-spacing: -0.02em;
  --font-title: bold clamp(1.5rem, 8vw, 2rem)/1.2 var(--font-family-ui);
  --font-title-spacing: -0.015em;
  --font-body: clamp(1rem, 5vw, 1.2rem)/1.6 var(--font-family-ui);
  --font-body-bold: bold var(--font-body);
  --font-body-spacing: 0;
  --font-ui: 1rem/1.4 var(--font-family-ui);
  --font-ui-bold: bold var(--font-ui);
  --font-small: 0.85rem/1.4 var(--font-family-ui);
  --font-small-bold: bold var(--font-small);

  /* Space */
  --row-gap-xsmall: 1rem;
  --row-gap-small: 2.5rem;
  --row-gap-medium: 5rem;

  /* Pagefind */
  --pagefind-ui-scale: .8;
  --pagefind-ui-primary: var(--color-text);
  --pagefind-ui-text: var(--color-text);
  --pagefind-ui-background: var(--color-background);
  --pagefind-ui-border: var(--color-line);
  --pagefind-ui-tag: #eeeeee;
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 6px;
  --pagefind-ui-image-border-radius: 6px;
  --pagefind-ui-image-box-ratio: 3 / 2;
  --pagefind-ui-font: var(--font-family-ui);
}

@supports (font-variation-settings: normal) {
  :root {
    --font-family-ui: Inter, -apple-system, system-ui, sans-serif;
    --font-display-spacing: -0.035em;
    --font-title-spacing: -0.025em;
    --font-body-spacing: -0.015em;
  }
}

/* Dark colors */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-base: hsl(220, 20%, 100%);
    --color-text: hsl(220, 20%, 80%);
    --color-dim: hsl(220, 20%, 60%);
    --color-link: hsl(220, 20%, 100%);
    --color-link-hover: hsl(220, 20%, 70%);
    --color-line: hsl(220, 20%, 20%);
    --color-background: hsl(220, 20%, 10%);
  }
}

html {
  scroll-padding-top: 120px;
  scroll-behavior: smooth;
}

html,
body {
  padding: 0;
  margin: 0;
  font: var(--font-ui);
  color: var(--color-base);
  background-color: var(--color-background);
}

main {
  padding: var(--row-gap-medium) 5vw;
  max-width: 80em;
  margin: 0 auto;
}

main > :first-child {
    margin-top: 0;
  }

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

a:hover {
    text-decoration: none;
    color: var(--color-link-hover);
  }

table {
  margin: 1em 0;
}

table td,
  table th {
    padding-right: 1em;
  }

pre,
code {
  font: var(--font-code);
  letter-spacing: 0;
}

:not(pre) > code {
  background: var(--color-line);
  padding: 0 .2rem;
  border-radius: 4px;
}

hr {
  border: 0;
  border-top: solid 1px var(--color-line);
  margin: var(--row-gap-medium) 0;
}

.navbar {
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  row-gap: 1rem;
  justify-content: space-between;
  padding: 2rem min(5vw, 5rem);
}

.navbar a:not(:hover) {
      text-decoration: none;
    }

.navbar-links {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
  font: var(--font-ui-bold);
  text-decoration: underline;
}

.navbar-links [aria-current="page"] {
    text-decoration: none;
  }

.navbar-search {
  padding: 0 1em;
  margin-left: auto;
  display: flex;
  align-items: center;
}

.postList {
  list-style: none;
  padding: 0;
}

.postList article.post + article.post {
    margin-top: var(--row-gap-medium);
  }

.postList li.post + li.post {
    margin-top: var(--row-gap-small);
  }

.postList .post-header {
    margin-bottom: var(--row-gap-xsmall);
  }

.postList .post-details {
    font: var(--font-small);
  }

.postList .post-title {
    font: var(--font-title);
    letter-spacing: var(--font-title-spacing);
    display: block;
  }

.postList .post-title a {
      text-decoration: none;
    }

.post-header {
  margin-bottom: var(--row-gap-small);
}

.post-title {
  font: var(--font-display);
  letter-spacing: var(--font-display-spacing);
  margin: 0 0 0.1em;
}

.post-details {
  display: flex;
  flex-flow: row wrap;
  row-gap: 1em;
  -moz-column-gap: .5em;
       column-gap: .5em;
  align-items: center;
  font: var(--font-small);
  color: var(--color-dim);
}

.post-details p {
    margin: 0;
  }

.post-details p:nth-child(-n+2)::after {
    content: "•";
    padding-left: .5em;
    align-self: stretch;
  }

.post-details p:last-of-type {
    margin-right: .5em;
  }

.post-details a {
    color: inherit;
  }

.post-tags {
  display: flex;
  flex-flow: row wrap;
  gap: .5em;
  align-items: center;
}

.post-excerpt,
.post-body {
  font: var(--font-body);
  letter-spacing: var(--font-body-spacing);
  color: var(--color-text);
}

.post-excerpt h2, .post-body h2, .post-excerpt h3, .post-body h3, .post-excerpt h4, .post-body h4, .post-excerpt h5, .post-body h5, .post-excerpt h6, .post-body h6 {
    color: var(--color-base);
    margin: 1.5em 0 .5em 0;
  }

.post-excerpt h2, .post-body h2 {
    font: var(--font-title);
    letter-spacing: var(--font-title-spacing);
    border-bottom: solid 1px var(--color-line);
  }

.post-body .header-anchor {
    color: inherit;
    text-decoration: none;
  }

.post-link {
  display: inline-block;
  color: var(--color-dim);
}

.post-toc {
  font: var(--font-small);
  margin-bottom: var(--row-gap-small);
}

.post-toc h2 {
    font: var(--font-small-bold);
    text-transform: uppercase;
    margin: .5em 0;
  }

.post-toc ol {
    color: var(--color-dim);
    padding-left: 1.5em;
    margin: 0;
  }

.post-toc ul {
    padding-left: 1em;
    margin: 0;
  }

.post-toc a {
    color: inherit;
  }

.badge {
  border: 1px solid var(--color-line);
  color: var(--color-dim);
  padding: .2em .6em;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
}

.badge:hover {
    background-color: var(--color-line);
  }

.page-header {
  margin-bottom: var(--row-gap-medium);
}

.page-header > p:first-child {
    margin-top: 0;
    margin-bottom: var(--row-gap-medium);
  }

.page-title {
  font: var(--font-display);
  letter-spacing: var(--font-display-spacing);
  margin: 0;
}

.page-navigation {
  margin-bottom: var(--row-gap-medium);
}

.page-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
  }

.page-navigation h2 {
    font: var(--font-body-bold);
    letter-spacing: var(--font-body-spacing);
    margin: .5em 0;
  }

.page-pagination {
  border-top: solid 1px var(--color-line);
  margin-top: var(--row-gap-medium);
}

.page-pagination ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    -moz-column-gap: 2rem;
         column-gap: 2rem;
    justify-content: space-between;
  }

.page-pagination a {
    display: block;
    text-decoration: none;
    color: var(--color-dim);
  }

.page-pagination a:hover strong {
      text-decoration: underline;
    }

.page-pagination strong {
    color: var(--color-base);
    display: block;
  }

.page-pagination-prev {
  text-align: right;
}

.page-pagination-next {
  margin-left: auto;
}

@media only screen and (max-width: 576px){
    .page-pagination strong {
      display: none;
    }
}

.search {
  margin-top: var(--row-gap-xsmall);

  /* Pagefind tweaks */
}

.search .pagefind-ui__search-input {
    font-weight: normal;
  }

.search .pagefind-ui__search-input::-moz-placeholder {
      opacity: 1;
      color: var(--color-dim);
    }

.search .pagefind-ui__search-input::placeholder {
      opacity: 1;
      color: var(--color-dim);
    }

.search .pagefind-ui__search-input:focus {
      box-shadow: 0 1px 5px rgba(0,0,0,0.2);
      border-color: var(--color-dim);
    }

/* Remote files */

@media (prefers-color-scheme: light) {
code[class*="language-"],pre[class*="language-"]{color:black;text-shadow:0 1px white;font-family:Consolas,Monaco,'Andale Mono',monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}pre[class*="language-"]::-moz-selection,pre[class*="language-"] ::-moz-selection,code[class*="language-"]::-moz-selection,code[class*="language-"] ::-moz-selection{text-shadow:none;background:#b3d4fc}pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection{text-shadow:none;background:#b3d4fc}pre[class*="language-"]::selection,pre[class*="language-"] ::selection,code[class*="language-"]::selection,code[class*="language-"] ::selection{text-shadow:none;background:#b3d4fc}
}

@media print and (prefers-color-scheme: light){code[class*="language-"],pre[class*="language-"]{text-shadow:none}}

@media (prefers-color-scheme: light) {
pre[class*="language-"]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*="language-"],pre[class*="language-"]{background:#f5f2f0}:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray}.token.punctuation{color:#999}.namespace{opacity:.7}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:#905}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#690}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#a67f59;background:hsla(0,0,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function{color:#dd4a68}.token.regex,.token.important,.token.variable{color:#e90}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}
}

@media (prefers-color-scheme: dark) {
code[class*="language-"],pre[class*="language-"]{color:white;direction:ltr;font-family:Consolas,Monaco,'Andale Mono',monospace;text-align:left;text-shadow:0 -.1em .2em black;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}pre[class*="language-"],:not(pre)>code[class*="language-"]{background:hsl(0,0,8%)}pre[class*="language-"]{border-radius:.5em;border:.3em solid hsl(0,0,33%);box-shadow:1px 1px .5em black inset;margin:.5em 0;overflow:auto;padding:1em}pre[class*="language-"]::-moz-selection{background:hsl(200,4%,16%)}pre[class*="language-"]::selection{background:hsl(200,4%,16%)}pre[class*="language-"]::-moz-selection{background:hsl(200,4%,16%)}pre[class*="language-"]::selection{background:hsl(200,4%,16%)}pre[class*="language-"]::-moz-selection,pre[class*="language-"] ::-moz-selection,code[class*="language-"]::-moz-selection,code[class*="language-"] ::-moz-selection{text-shadow:none;background:hsla(0,0,93%,0.15)}pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection{text-shadow:none;background:hsla(0,0,93%,0.15)}pre[class*="language-"]::selection,pre[class*="language-"] ::selection,code[class*="language-"]::selection,code[class*="language-"] ::selection{text-shadow:none;background:hsla(0,0,93%,0.15)}:not(pre)>code[class*="language-"]{border-radius:.3em;border:.13em solid hsl(0,0,33%);box-shadow:1px 1px .3em -.1em black inset;padding:.15em .2em .05em}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:hsl(0,0,47%)}.token.punctuation{opacity:.7}.namespace{opacity:.7}.token.tag,.token.boolean,.token.number,.token.deleted{color:hsl(14,58%,55%)}.token.keyword,.token.property,.token.selector,.token.constant,.token.symbol,.token.builtin{color:hsl(53,89%,79%)}.token.attr-name,.token.attr-value,.token.string,.token.char,.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable,.token.inserted{color:hsl(76,21%,52%)}.token.atrule{color:hsl(218,22%,55%)}.token.regex,.token.important{color:hsl(42,75%,65%)}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}pre[data-line]{padding:1em 0 1em 3em;position:relative}.language-markup .token.tag,.language-markup .token.attr-name,.language-markup .token.punctuation{color:hsl(33,33%,52%)}.token{position:relative;z-index:1}.line-highlight{background:-webkit-linear-gradient(left,hsla(0,0,33%,.1) 70%,hsla(0,0,33%,0));background:hsla(0,0,33%,0.25);background:linear-gradient(left,hsla(0,0,33%,.1) 70%,hsla(0,0,33%,0));border-bottom:1px dashed hsl(0,0,33%);border-top:1px dashed hsl(0,0,33%);left:0;line-height:inherit;margin-top:.75em;padding:inherit 0;pointer-events:none;position:absolute;right:0;white-space:pre;z-index:0}.line-highlight:before,.line-highlight[data-end]:after{background-color:hsl(215,15%,59%);border-radius:999px;box-shadow:0 1px white;color:hsl(24,20%,95%);content:attr(data-start);font:bold 65%/1.5 sans-serif;left:.6em;min-width:1em;padding:0 .5em;position:absolute;text-align:center;text-shadow:none;top:.4em;vertical-align:.3em}.line-highlight[data-end]:after{bottom:.4em;content:attr(data-end);top:auto}
}