/* https://andy-bell.co.uk/a-modern-css-reset/ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html:focus-within {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
}
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

html, body {
  font-family: "Source Sans Pro", Roboto, "Droid Sans", Ubuntu, Helvetica, Arial, sans-serif;
  line-height: 1.8em;
  color: #444;
  background-color: white;
}

body {
  max-width: 75ch;
  margin: 60px auto 0;
  padding: 0 1.5em;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.1em;
  color: #222;
  font-weight: 700;
  text-wrap: balance;
}

main > * + * {
  margin-block-start: var(--flow-space, 1em);
}
:is(h1, h2, h3, h4, h5, h6, blockquote) {
  --flow-space: 1.5em;
}
:is(h1, h2, h3, h4, h5, h6) + * {
  --flow-space: 0.5em;
}

abbr {
  font-variant: small-caps;
  font-weight: 600;
  letter-spacing: .1em;
}

header, nav {
  text-align: center;
}

small {
  font-size: smaller;
}

footer {
  line-height: normal;
  margin-block-start: 3em;
}

.discuss {
  color: #666;
  text-align: center;
  margin-block: 3em;
}

.discuss img {
  vertical-align: middle;
}

code {
  font-family: 'DejaVu Sans Mono', 'Source Code Pro', 'Droid Sans Mono', 'Ubuntu Mono', monospace;
}
/* pre[class*=language-] sets a font-size already, so set size as needed. */
:not(pre) > code {
  font-size: .8125em;
}
pre > code {
  font-size: .8125rem;
}

pre {
  background: #eef;
  border: 1px solid #ddd;
  overflow-x: auto;
  padding: 1em;
  margin: 0;
  line-height: 1.5em;
}

img {
  border: 0;
  max-width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}

figure {
  text-align: center;
  margin-left: 0;
  margin-right: 0;
}
figure.highlight, figure details {
  text-align: initial;
}
figcaption {
  font-style: italic;
  text-wrap: balance;
}

q {
  quotes: "“" "”" "‘" "’";
  font-style: italic;
}
q:before {
  content: open-quote;
}
q:after {
  content: close-quote;
}

aside[role~=doc-pullquote] {
  font-size: 1.3em;
  font-weight: lighter;
  font-style: italic;
  text-align: end;
  text-wrap: balance;
  margin-inline-end: -.8ch;
  border-inline-end: .8ch solid;
  padding-inline-end: 1ch;
  padding-block: 1ex;
}

main.posts {
  display: table;
  border-spacing: 1em .8em;
  line-height: normal;
}
main.posts div {
  display: table-row;
}
main.posts time {
  display: table-cell;
  color: #999;
  font-size: smaller;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

main.posts a {
  display: table-cell;
}

/*
 * Syntax highlighting
 */
code[class*=language-],pre[class*=language-]{background-color:var(--color-bg-code-block);color:var(--color-fg-default);direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;tab-size:2;hyphens:none}pre[class*=language-]{font-size:.875rem;font-family:"Fira Code","Fira Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-]{font-size:1rem;background-color:var(--color-bg-inline-code-block);padding:.2em .3em;border-radius:.3em;white-space:normal}@media (width <= 700px){:not(pre)>code[class*=language-]{font-size:.875rem}}.token.cdata,.token.comment,.token.prolog{color:var(--color-gray)}.token.doctype,.token.entity,.token.punctuation{color:var(--color-fg-default)}.token.atrule,.token.attr-name,.token.boolean,.token.class-name,.token.constant,.token.number{color:var(--color-blue)}.token.keyword{color:var(--color-indigo)}.token.deleted,.token.important,.token.property,.token.symbol,.token.tag{color:var(--color-green)}.token.attr-value,.token.attr-value>.token.punctuation,.token.builtin,.token.char,.token.inserted,.token.regex,.token.selector,.token.string{color:var(--color-blue)}.token.function,.token.operator,.token.variable{color:var(--color-indigo)}.token.url{color:var(--color-green)}.token.attr-value>.token.punctuation.attr-equals,.token.special-attr>.token.attr-value>.token.value.css{color:var(--color-fg-default)}.language-css .token.selector{color:var(--color-green)}.language-css .token.property{color:var(--color-blue)}.language-css .token.atrule .token.rule,.language-css .token.important{color:var(--color-red)}.language-javascript .token.keyword,.language-js .token.keyword{color:var(--color-red)}.language-javascript .token.atrule,.language-javascript .token.boolean,.language-javascript .token.constant,.language-javascript .token.number,.language-javascript .token.operator,.language-js .token.atrule,.language-js .token.boolean,.language-js .token.constant,.language-js .token.number,.language-js .token.operator{color:var(--color-blue)}.language-javascript .token.function,.language-js .token.function{color:var(--color-purple)}.language-javascript .token.attr-name,.language-javascript .token.class-name,.language-javascript .token.function-variable,.language-js .token.attr-name,.language-js .token.class-name,.language-js .token.function-variable{color:var(--color-brown)}.language-jsx .token.keyword{color:var(--color-red)}.language-jsx .token.function{color:var(--color-purple)}.language-jsx .token.function-variable{color:var(--color-brown)}.language-jsx .token.punctuation{color:var(--color-blue)}.language-jsx .token.attr-name,.language-jsx .token.class-name{color:var(--color-green)}.language-jsx .token.string{color:var(--color-indigo)}.language-json .token.operator{color:var(--color-fg-default)}.language-json .token.null.keyword{color:var(--color-blue)}.language-java .token.keyword{color:var(--color-red)}.language-java .token.atrule,.language-java .token.boolean,.language-java .token.constant,.language-java .token.number,.language-java .token.operator{color:var(--color-blue)}.language-java .token.function{color:var(--color-purple)}.language-java .token.attr-name,.language-java .token.function-variable{color:var(--color-green)}.language-kotlin .token.keyword{color:var(--color-red)}.language-kotlin .token.atrule,.language-kotlin .token.boolean,.language-kotlin .token.constant,.language-kotlin .token.number,.language-kotlin .token.operator{color:var(--color-blue)}.language-kotlin .token.function{color:var(--color-purple)}.language-kotlin .token.attr-name,.language-kotlin .token.function-variable{color:var(--color-green)}.language-go .token.keyword{color:var(--color-red)}.language-go .token.atrule,.language-go .token.boolean,.language-go .token.constant,.language-go .token.number,.language-go .token.operator{color:var(--color-blue)}.language-go .token.function{color:var(--color-purple)}.language-go .token.attr-name,.language-go .token.function-variable{color:var(--color-green)}.language-yaml .token.atrule,.language-yml .token.atrule{color:var(--color-green)}.language-dockerfile .token.keyword{color:var(--color-red)}.language-dockerfile .token.function{color:var(--color-purple)}.language-dockerfile .token.punctuation{color:var(--color-blue)}.language-dockerfile .token.attr-name,.language-dockerfile .token.class-name{color:var(--color-green)}.language-dockerfile .token.string{color:var(--color-indigo)}.token.bold{font-weight:700}.token.comment,.token.italic{font-style:italic}.token.entity{cursor:help}.token.namespace{opacity:.8}:root{--color-fg-default:#24292f;--color-bg-code-block:#f6f8fa;--color-bg-inline-code-block:rgb(175 184 193 / 20%);--color-gray:#6e7781;--color-red:#cf222e;--color-green:#116329;--color-blue:#0550ae;--color-indigo:#0a3069;--color-purple:#8250df;--color-brown:#953800}
