:root {
  color-scheme: light dark;
  --background: #fefefe;
  --text: #444;
  --heading: #222;
  --dimtext: #666;
  --code-border: #ddd;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #2b2b2b;
    --text: #bbb;
    --heading: #ddd;
    --dimtext: #999;
    --code-border: #444;
  }
}

/* https://piccalil.li/blog/a-more-modern-css-reset/ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
body {
  min-height: 100vh;
}
:target {
  scroll-margin-block: 5ex;
}

html, body {
  font-family: "Source Sans Pro", Roboto, "Droid Sans", Ubuntu, Helvetica, Arial, sans-serif;
  line-height: 1.8em;
  color: var(--text);
  background-color: var(--background);
}

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

h1, h2, h3, h4, h5, h6 {
  line-height: 1.1em;
  color: var(--heading);
  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;
}

header .pubdate {
  color: var(--dimtext);
}

.discuss {
  color: var(--dimtext);
  text-align: center;
  margin-block: 3em;
}
/* The DEV logo is transparent and doesn't render well on a dark background */
.discuss a {
  background: white;
}
.discuss img {
  vertical-align: middle;
}

code {
  font-family: 'DejaVu Sans Mono', 'Source Code Pro', 'Droid Sans Mono', 'Ubuntu Mono', monospace;
  font-size: .8125em;
}

pre {
  border: 1px solid var(--code-border);
  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: var(--dimtext);
  font-size: smaller;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/*
 * Syntax highlighting
 */
@media (prefers-color-scheme: light) {
code[class*=language-],pre[class*=language-]{color:#545454;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#fefefe}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#696969}.token.punctuation{color:#545454}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#007299}.token.boolean,.token.number{color:green}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#aa5d00}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:green}.token.atrule,.token.attr-value,.token.function{color:#aa5d00}.token.keyword{color:#d91e18}.token.important,.token.regex{color:#d91e18}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.line-highlight{background:rgba(183,134,11,.075);border-top:1px solid #b8860b;border-bottom:1px solid #b8860b}.line-numbers .line-numbers-rows{border-right:1px solid #aa5d00}.line-numbers-rows>span:before{color:#696969}@media screen and (-ms-high-contrast:active){code[class*=language-],pre[class*=language-]{color:windowText;background:window}:not(pre)>code[class*=language-],pre[class*=language-]{background:window}.token.important{background:highlight;color:window;font-weight:400}.token.atrule,.token.attr-value,.token.function,.token.keyword,.token.operator,.token.selector{font-weight:700}.token.attr-value,.token.comment,.token.doctype,.token.function,.token.keyword,.token.operator,.token.property,.token.string{color:highlight}.token.attr-value,.token.url{font-weight:400}}

}
@media (prefers-color-scheme: dark) {
code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2b2b2b}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#d4d0ab}.token.punctuation{color:#fefefe}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#ffa07a}.token.boolean,.token.number{color:#00e0e0}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#abe338}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#00e0e0}.token.atrule,.token.attr-value,.token.function{color:gold}.token.keyword{color:#00e0e0}.token.important,.token.regex{color:gold}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.line-highlight{background:rgba(255,217,0,.1);border-top:1px solid rgba(255,217,0,.55);border-bottom:1px solid rgba(255,217,0,.55)}.line-numbers .line-numbers-rows{border-right:1px solid #f8f8f2}.line-numbers-rows>span:before{color:#d4d0ab}@media screen and (-ms-high-contrast:active){code[class*=language-],pre[class*=language-]{color:windowText;background:window}:not(pre)>code[class*=language-],pre[class*=language-]{background:window}.token.important{background:highlight;color:window;font-weight:400}.token.atrule,.token.attr-value,.token.function,.token.keyword,.token.operator,.token.selector{font-weight:700}.token.attr-value,.token.comment,.token.doctype,.token.function,.token.keyword,.token.operator,.token.property,.token.string{color:highlight}.token.attr-value,.token.url{font-weight:400}}

}