style.css

/* This template tag is replaced by CSS when this file is rendered */
{{{appCSS}}}

body {
  font: 1.125rem / 1.6 var(--sans);
  word-wrap: break-word;
  max-width: 36em;
  margin: 0 auto;
  padding: 2.5em 1.25em;
  background-color: var(--bg);
  color: var(--fg);
}

/* Text */

a {color: inherit;text-decoration: none;padding: 0.25em 0.5em;background: none;margin: -0.25em -0.5em;border-radius: 4px;transition: background 0.2s ease;}
a:hover {background-color: var(--hover-bg);color: var(--accent);}
a:active {opacity: 0.9}

h1 {font-size: 2.25em;line-height:1.2;}
h2 {font-size: 1.25em;}
h3, h4, h5, h6 {font-size: 1em}

hr {margin: 1.25em 0;border: 0;border-top: 1px solid #888; opacity: 0.7}
br {width: 100%;clear: both;float: none;}

hr.skinny { margin: 1em 0 }

blockquote {padding: 0 0 0 0.75em;color: #777}

small, .caption {color: #9e9e9e;font-weight: 400;}
sup {font-size: 0.83;line-height: 0;vertical-align: super;}

.entry {position: relative;}
.entry a {text-decoration: underline;}

.caption {font-size: smaller;}
.caption {/*max-width: 36rem;*/display: block;margin: .625em auto 1.25em auto;}

/* Theme specific styles */

#logo {font-weight: bold;display: inline-block;line-height: 1.75}
#logo img {max-width: 8em;max-height:8em;margin-bottom: 0.25em}
#logo img.rounded {border-radius: 50%;}

#logo:hover {opacity: 0.8;background: none;color: inherit;}
#logo:active {opacity: 0.75}

nav a {margin-right: 0em;line-height: 1.75;}

a.row {
  display: block;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

.archive {color: var(--fg);line-height: 1.75;margin-bottom: 0}

input[name="q"] {
  display: inline-block;
  font-size: inherit;
  box-sizing: border-box;
  padding: 0.444em 0.666em;
  color: var(--fg);
  background-color: var(--bg);
  background-image: none;
  border: 1px solid var(--fg);
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  font-family: inherit;
}

form[action="/search"] {
  text-align: center;
}

input[type="submit"] {
  display: inline-block;
  padding: 0.444em 0.666em;
  /*padding-left: 1.5em;*/
  font-size: inherit;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 4px;
  border: 1px solid var(--fg);
  color: var(--fg);
  background: none;
  /*background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbi1zZWFyY2giIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGlkPSJzZWFyY2giIGQ9Ik03Ljk5LDYuOTI4TDUuODQ3LDQuNzg0YzAuMjg5LTAuNDc2LDAuNDU4LTEuMDMzLDAuNDU4LTEuNjNDNi4zMDUsMS40MTIsNC44OTUsMCwzLjE1MiwwDQoJQzEuNDExLDAsMCwxLjQxMiwwLDMuMTU0YzAsMS43NDEsMS40MTIsMy4xNTEsMy4xNTMsMy4xNTFjMC41OTcsMCwxLjE1NC0wLjE2OSwxLjYzLTAuNDU4bDIuMTQ1LDIuMTQ2TDcuOTksNi45Mjh6IE0xLjIwMywzLjE1NA0KCWMwLjAwMi0xLjA3NywwLjg3NC0xLjk0OSwxLjk1MS0xLjk1MWMxLjA3NiwwLjAwMiwxLjk0OCwwLjg3NCwxLjk0OSwxLjk1MUM1LjEwMSw0LjIzLDQuMjI5LDUuMTAzLDMuMTUzLDUuMTAzDQoJQzIuMDc1LDUuMTAzLDEuMjA1LDQuMjMsMS4yMDMsMy4xNTR6Ii8+DQo8L3N2Zz4=) 0.5em center / 0.8em no-repeat;*/
}

/*html[data-theme="dark"] input[type=submit] {
  filter: brightness(0) invert(1);
}*/

:-moz-placeholder {color: var(--fg);}
::-moz-placeholder {color: var(--fg);}
:-ms-input-placeholder {color: var(--fg);}
::-webkit-input-placeholder {color: var(--fg);}

a.footnote-ref {
  margin-left: 0;
  margin-right: 0;
  text-decoration: none;
  padding: .2em .2em 0;
}

a.footnote-ref:hover {
  background-color: transparent;
}

a.footnote-ref sup {
  font-size: .75em;
  line-height: inherit;
}

a.footnote-back {
  text-decoration: none;
  background-color: transparent;
}

/* CODE */

code {
  background-color: var(--hover-bg);
  background-color: color-mix(in srgb, var(--fg) 10%, transparent);
  border-radius: 4px;
  font-size: smaller;
  line-height: inherit;
  margin: 0;
}

p code,
li code {
  line-height: 1em;
  padding: .2em .4em;
  /* display: inline-block; */
  white-space: break-spaces;
}

pre code {
  display: block;
  padding: .8rem 1.5rem;
  margin: 0 -1rem;
  background-color: rgba(0,0,0,.02);
  border-radius: 0;
  overflow-x: auto;
}

/* TABLES */

table {
  /*display: block;
  width: auto;*/
  width: 100%;
  overflow: auto;
  word-break: normal;
  word-break: keep-all;
  border-collapse: collapse;
  border-spacing: 0;
  box-sizing: border-box;
  font-size: inherit;
  line-height: inherit;
}

tr {box-sizing: border-box;border-top: 1px solid #ccc;padding: 0}
th, td {box-sizing: border-box;border: 1px solid #ddd;padding: 5px 12px 6px}

/* LISTS */

ul, ol {
  margin-left: 0;
  padding-left: 0;
  list-style-position: outside;
  margin-bottom: 1.25em;
}

ul {list-style: square;}

ul ul, ol ul, ol ol, ul ol {margin-left: 1.25em;margin-bottom: 0}

li {margin: 0}

/* IMAGES */

img {vertical-align: middle;max-width: 100%;height: auto;}


/* VIDEOS & tweets */
/* Only apply vertical margin to direct
descendants, prevents multi margins */

iframe {width: 100%;}
.entry > iframe {margin: 1.25em 0!important;}

/* Small caps */
.small-caps {
  font-variant: small-caps;
}

/* Double quote (") marks */
.pull-double{margin-left:-.45em}
.push-double{margin-right:.45em}

/* Single quote (') marks */
.pull-single{margin-left:-.20em}
.push-single{margin-right:.20em}

/* Optical margin alignment for particular letters */
.pull-T, .pull-V, .pull-W, .pull-Y {margin-left: -0.1em}
.push-T, .push-V, .push-W, .push-Y {margin-right: 0.1em}

.pull-O, .pull-C, .pull-o, .pull-c {margin-left: -0.06em}
.push-O, .push-C, .push-o, .push-c {margin-right: 0.06em}

.pull-A {margin-left: -0.04em}
.push-A {margin-right: 0.04em}

/* Layout tags */

.wide.left .caption {margin-left: 22.680412113%}
.wide.right .caption {margin-right: 22.680412113%}

.right {float: right;}
.left {float: left;}


.margin, .inside {
  box-sizing: border-box;
  width: 29.3333%;
  z-index: 1;
}

.margin {  position: absolute;}

.left.inside {margin-right: 2em}
.right.inside {margin-left: 2em}

.margin blockquote {margin: 3px 0;color:#232323;padding: 3px 6px;font-size: smaller;}
.margin blockquote p {margin: 0}

.margin h1, .margin h2, .margin h3 {margin-top:0}

.margin img,
.column img {margin-top: 6px}

.margin p, .inside p {font-style: italic;margin-top: 0}
.inside p, .inside .caption { margin-bottom: 0; }

.left.margin {
  left: -29.3333%;
  padding-right: 2em;
  text-align: right;
}

.right.margin {
  right: -29.3333%;
  padding-left: 2em;
}

.wide {
  width: 158.6666667%;
  margin-left: -29.3333333%;
  overflow: auto; /* collapse internal margins */
}

.wide.left, .wide.right {width: 129.3333333%;float: none;}
.wide.left {margin: 0 0 0 -29.3333333%}
.wide.right {margin: 0 -29.3333333% 0 0}


.column {
  box-sizing: border-box;
  float: left;
}

.column .caption {margin-bottom: 6px}

.column.two {
  width: 50%;
  padding-right: 12px;
}

.column.three {
  width: 33%;
  padding-right: 24px;
}

.column.four {
  width: 25%;
  padding-right: 36px;
}

.column.two + .column.two {
  padding: 0 0 0 12px;
}

.column h1,
.column h2,
.column h3 {margin-bottom: -12px}

/**
 * Hyphenation support. Taken from: http://clagnut.com/blog/2395
 */
p {
 -webkit-hyphens: auto;
 -webkit-hyphenate-limit-before: 3;
 -webkit-hyphenate-limit-after: 3;
 -webkit-hyphenate-limit-chars: 6 3 3;
 -webkit-hyphenate-limit-lines: 2;
 -webkit-hyphenate-limit-last: always;
 -webkit-hyphenate-limit-zone: 8%;

 -moz-hyphens: auto;
 -moz-hyphenate-limit-chars: 6 3 3;
 -moz-hyphenate-limit-lines: 2;
 -moz-hyphenate-limit-last: always;
 -moz-hyphenate-limit-zone: 8%;

 -ms-hyphens: auto;
 -ms-hyphenate-limit-chars: 6 3 3;
 -ms-hyphenate-limit-lines: 2;
 -ms-hyphenate-limit-last: always;
 -ms-hyphenate-limit-zone: 8%;

 hyphens: auto;
 hyphenate-limit-chars: 6 3 3;
 hyphenate-limit-lines: 2;
 hyphenate-limit-last: always;
 hyphenate-limit-zone: 8%;
}

/*
Atom One Light by Daniel Gamage
Original One Light Syntax theme from https://github.com/atom/one-light-syntax
*/
.hljs { display: block; overflow-x: auto; color: #383a42; background: #fafafa; }
.hljs-comment, .hljs-quote { color: #a0a1a7; font-style: italic; }
.hljs-doctag, .hljs-keyword, .hljs-formula { color: #a626a4; }
.hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst { color: #e45649; }
.hljs-literal { color: #0184bb; }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta-string { color: #50a14f; }
.hljs-built_in, .hljs-class .hljs-title { color: #c18401; }
.hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number { color: #986801; }
.hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title { color: #4078f2; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }
.hljs-link { text-decoration: underline; }

/*
Atom One Dark by Daniel Gamage
Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
*/
html[data-theme="dark"] .hljs,
html[data-theme="amoled"] .hljs { display: block; overflow-x: auto; color: #abb2bf; background: #282c34; }
html[data-theme="dark"] .hljs-comment, html[data-theme="dark"] .hljs-quote,
html[data-theme="amoled"] .hljs-comment, html[data-theme="amoled"] .hljs-quote { color: #5c6370; font-style: italic; }
html[data-theme="dark"] .hljs-doctag, html[data-theme="dark"] .hljs-keyword, html[data-theme="dark"] .hljs-formula,
html[data-theme="amoled"] .hljs-doctag, html[data-theme="amoled"] .hljs-keyword, html[data-theme="amoled"] .hljs-formula { color: #c678dd; }
html[data-theme="dark"] .hljs-section, html[data-theme="dark"] .hljs-name, html[data-theme="dark"] .hljs-selector-tag, html[data-theme="dark"] .hljs-deletion, html[data-theme="dark"] .hljs-subst,
html[data-theme="amoled"] .hljs-section, html[data-theme="amoled"] .hljs-name, html[data-theme="amoled"] .hljs-selector-tag, html[data-theme="amoled"] .hljs-deletion, html[data-theme="amoled"] .hljs-subst { color: #e06c75; }
html[data-theme="dark"] .hljs-literal,
html[data-theme="amoled"] .hljs-literal { color: #56b6c2; }
html[data-theme="dark"] .hljs-string, html[data-theme="dark"] .hljs-regexp, html[data-theme="dark"] .hljs-addition, html[data-theme="dark"] .hljs-attribute, html[data-theme="dark"] .hljs-meta-string,
html[data-theme="amoled"] .hljs-string, html[data-theme="amoled"] .hljs-regexp, html[data-theme="amoled"] .hljs-addition, html[data-theme="amoled"] .hljs-attribute, html[data-theme="amoled"] .hljs-meta-string { color: #98c379; }
html[data-theme="dark"] .hljs-built_in, html[data-theme="dark"] .hljs-class .hljs-title,
html[data-theme="amoled"] .hljs-built_in, html[data-theme="amoled"] .hljs-class .hljs-title { color: #e6c07b; }
html[data-theme="dark"] .hljs-attr, html[data-theme="dark"] .hljs-variable, html[data-theme="dark"] .hljs-template-variable, html[data-theme="dark"] .hljs-type, html[data-theme="dark"] .hljs-selector-class, html[data-theme="dark"] .hljs-selector-attr, html[data-theme="dark"] .hljs-selector-pseudo, html[data-theme="dark"] .hljs-number,
html[data-theme="amoled"] .hljs-attr, html[data-theme="amoled"] .hljs-variable, html[data-theme="amoled"] .hljs-template-variable, html[data-theme="amoled"] .hljs-type, html[data-theme="amoled"] .hljs-selector-class, html[data-theme="amoled"] .hljs-selector-attr, html[data-theme="amoled"] .hljs-selector-pseudo, html[data-theme="amoled"] .hljs-number { color: #d19a66; }
html[data-theme="dark"] .hljs-symbol, html[data-theme="dark"] .hljs-bullet, html[data-theme="dark"] .hljs-link, html[data-theme="dark"] .hljs-meta, html[data-theme="dark"] .hljs-selector-id, html[data-theme="dark"] .hljs-title,
html[data-theme="amoled"] .hljs-symbol, html[data-theme="amoled"] .hljs-bullet, html[data-theme="amoled"] .hljs-link, html[data-theme="amoled"] .hljs-meta, html[data-theme="amoled"] .hljs-selector-id, html[data-theme="amoled"] .hljs-title { color: #61aeee; }
html[data-theme="dark"] .hljs-emphasis,
html[data-theme="amoled"] .hljs-emphasis { font-style: italic; }
html[data-theme="dark"] .hljs-strong,
html[data-theme="amoled"] .hljs-strong { font-weight: bold; }
html[data-theme="dark"] .hljs-link,
html[data-theme="amoled"] .hljs-link { text-decoration: underline; }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs { display: block; overflow-x: auto; color: #abb2bf; background: #282c34; }
  html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-comment, html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-quote { color: #5c6370; font-style: italic; }
  html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-doctag, html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-keyword, html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-formula { color: #c678dd; }
  html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-section, html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-name, html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-selector-tag, html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-deletion, html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-subst { color: #e06c75; }
  html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-literal { color: #56b6c2; }
  html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-string, html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-regexp, html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-addition, html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-attribute, html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-meta-string { color: #98c379; }
  html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-built_in, html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-class .hljs-title { color: #e6c07b; }
  html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-attr, html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-variable, html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-template-variable, html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-type, html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-selector-class, html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-selector-attr, html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-selector-pseudo, html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-number { color: #d19a66; }
  html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-symbol, html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-bullet, html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-link, html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-meta, html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-selector-id, html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-title { color: #61aeee; }
  html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-emphasis { font-style: italic; }
  html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-strong { font-weight: bold; }
  html:not([data-theme="deloma"]):not([data-theme="light"]) .hljs-link { text-decoration: underline; }
}

/*! cuetip v1.1.3 | MIT License | https://pinjasaur.github.io/cuetip/ */
[data-tooltip]{position:relative;cursor:inherit}[data-tooltip]:not(.tooltip--no-tail)::before{display:none;pointer-events:none;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);left:50%;z-index:9999;content:"";bottom:calc(100% - .25em + .2em);border-width:.25em;border-style:solid;border-color:#333 transparent transparent transparent}[data-tooltip].tooltip--top:not(.tooltip--no-tail)::before{top:auto;right:auto;bottom:auto;left:auto;bottom:calc(100% - .25em + .2em);border-color:#333 transparent transparent transparent;-webkit-transform:translateX(-50%);transform:translateX(-50%);left:50%}[data-tooltip].tooltip--right:not(.tooltip--no-tail)::before{top:auto;right:auto;bottom:auto;left:auto;left:calc(100% - .25em + .2em);border-color:transparent #333 transparent transparent;-webkit-transform:translateY(-50%);transform:translateY(-50%);top:50%}[data-tooltip].tooltip--bottom:not(.tooltip--no-tail)::before{top:auto;right:auto;bottom:auto;left:auto;top:calc(100% - .25em + .2em);border-color:transparent transparent #333 transparent;-webkit-transform:translateX(-50%);transform:translateX(-50%);left:50%}[data-tooltip].tooltip--left:not(.tooltip--no-tail)::before{top:auto;right:auto;bottom:auto;left:auto;right:calc(100% - .25em + .2em);border-color:transparent transparent transparent #333;-webkit-transform:translateY(-50%);transform:translateY(-50%);top:50%}[data-tooltip]::after{display:none;pointer-events:none;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);left:50%;z-index:9999;content:attr(data-tooltip);white-space:nowrap;background:#333;color:#fff;padding:.25em;border-radius:.1em;bottom:calc(100% + .25em + .2em)}[data-tooltip].tooltip--top::after{top:auto;right:auto;bottom:auto;left:auto;bottom:calc(100% + .25em + .2em);-webkit-transform:translateX(-50%);transform:translateX(-50%);left:50%}[data-tooltip].tooltip--right::after{top:auto;right:auto;bottom:auto;left:auto;left:calc(100% + .25em + .2em);-webkit-transform:translateY(-50%);transform:translateY(-50%);top:50%}[data-tooltip].tooltip--bottom::after{top:auto;right:auto;bottom:auto;left:auto;top:calc(100% + .25em + .2em);-webkit-transform:translateX(-50%);transform:translateX(-50%);left:50%}[data-tooltip].tooltip--left::after{top:auto;right:auto;bottom:auto;left:auto;right:calc(100% + .25em + .2em);-webkit-transform:translateY(-50%);transform:translateY(-50%);top:50%}[data-tooltip]:not(.tooltip--no-tail):hover::before{display:inline-block}[data-tooltip]:hover::after{display:inline-block}

[data-tooltip] {
  border-bottom: 1px dotted var(--fg);
}

[data-tooltip]::after {
  font-size: .8em;
  opacity: .9;
  padding: .15em .3em;
  background-color: var(--accent);
  color: var(--bg);
}

[data-tooltip]:not(.tooltip--no-tail)::before {
  font-size: .8em;
  opacity: .9;
  border-color: var(--accent) transparent transparent;
}

abbr[data-tooltip] {
  text-decoration: none;
  cursor: help;
}

/*!
 *
 * J O T
 *
 * Custom styles below:
 *
 */

:root {
  /* https://css-tricks.com/snippets/css/system-font-stack/ */
  --sans: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  /* https://github.com/system-fonts/modern-font-stacks#monospace-code */
  --mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

code,
pre,
kbd,
samp {
  font-family: var(--mono);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]),
  html:not([data-theme="deloma"]) {
    --accent: #fff91a;
    --bg: rgb(16, 18, 22);
    --fg: rgb(252, 250, 253);
    --hover-bg: rgba(255, 255, 255, .02);
  }

  html:not([data-theme="light"]):not([data-theme="deloma"]) img:not(.invertable):not(.zoom-img):not(:hover) { filter: brightness(.8) contrast(1.2); }
  html:not([data-theme="light"]):not([data-theme="deloma"]) img.invertable { filter: invert(1); }
}

html[data-theme="dark"] img:not(.invertable):not(.zoom-img):not(:hover),
html[data-theme="amoled"] img:not(.invertable):not(.zoom-img):not(:hover) { filter: brightness(.8) contrast(1.2); }

html[data-theme="dark"] img.invertable,
html[data-theme="amoled"] img.invertable { filter: invert(1); }

html,
html[data-theme="light"] {
  --accent: #6d14e9;
  --bg: rgb(252, 250, 253);
  --fg: rgb(16, 18, 22);
  --hover-bg: rgba(0,0,0,0.02);
}

html[data-theme="dark"] {
  --accent: #fff91a;
  --bg: rgb(16, 18, 22);
  --fg: rgb(252, 250, 253);
  --hover-bg: rgba(255, 255, 255, .02);
}

html[data-theme="amoled"] {
  --accent: #fff91a;
  --bg: #000;
  --fg: #fff;
  --hover-bg: rgba(255, 255, 255, .05);
}

html[data-theme="deloma"] {
  --accent: #6d14e9;
  --bg: #fff;
  --fg: #000;
  --hover-bg: rgba(255, 255, 255, .02);
}

::selection {
  background-color: var(--accent);
  color: var(--bg);
  text-shadow: none;
}

::-moz-selection {
  background-color: var(--accent);
  color: var(--bg);
  text-shadow: none;
}

:focus {
  outline-color: var(--accent);
}

.footer {
  text-align: center;
}

.footer p {
  margin-bottom: .5em;
}

.footer p + p {
  margin-top: 0;
}

.text-center {
  text-align: center;
}

.text-uppercase {
  text-transform: uppercase;
}

/*
.small-caps {
  text-transform: lowercase;
}
*/

.tag {
  text-transform: uppercase;
  background-color: var(--accent);
  color: var(--bg);
  font-size: .8em;
  letter-spacing: .05em;
  padding: .15em .3em;
  border-radius: 1px;
  vertical-align: text-top;
  font-weight: bold;
  font-family: var(--mono);
}

kbd {
  background-color: var(--hover-bg);
  border: 1px solid #c6cbd1;
  border-bottom-color: #c6cbd1;
  border-bottom-color: #959da5;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 #959da5;
  color: var(--fg);
  display: inline-block;
  font-size: smaller;
  line-height: 1;
  padding: .15em .3em .25em;
  vertical-align: middle;
}

del {
  opacity: .7;
}

ins {
  text-decoration: none;
  background-color: var(--accent);
  color: var(--bg)
}

abbr[title] {
  cursor: help;
}

/* `zoom-in` is mostly supported, but fallback to `pointer` just in case */
img[data-action="zoom"] {
  cursor: pointer;
  cursor: zoom-in;
}

/* `zoom-out` is mostly supported, but fallback to `pointer` just in case */
img.zoom-img {
  cursor: pointer;
  cursor: zoom-out;
}

details > summary {
  cursor: pointer;
}

article aside {
  color: var(--fg);
  background-color: color-mix(in srgb, var(--fg) 10%, transparent);
}

aside {
  padding: .5rem 1rem;
  margin: 0.5rem auto;
  color: var(--bg);
  background-color: var(--accent);
  border-radius: 0.25rem;
}

aside > a:hover {
  color: inherit;
  text-decoration: none !important;
}

h1 + small {
  margin-top: -.625em;
}

a.header-hash {
  margin: 0;
  padding: 0;
  padding-right: .25em;
  text-decoration: none;
  color: #9e9e9e;
}

a.header-hash:hover {
  background: none;
  text-decoration: underline;
}

:has(a.header-hash):hover > a.header-hash {
  color: var(--accent);
}

:has(a.header-hash):target {
  border-bottom: 1px dashed var(--accent);
}

.archive + .entries {
  margin-top: .5em;
  border-left: 1px solid #9e9e9e;
}

.archive:hover + .entries,
.archive + .entries:hover {
  border-left: 1px solid var(--accent);
}

.archive + .entries > .archive {
  margin-left: 0;
  margin-right: 0;
}

.entry-title {
  margin-bottom: .5em;
}

.entry-date  {
  margin-bottom: 1.5em;
}

.entry-date small {
  display: inline-block;
  padding-bottom: .5em;
  border-bottom: 1px solid #888;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 20%, transparent);
}

.entry-featured {
  margin-left: -1rem;
  max-width: unset;
  width: calc(100% + 2rem);
}

.header .title {
  font-size: 1.5em;
}

.header nav a.is-active {
  position: relative;
}

.header nav a.is-active::before {
  content: "";
  position: absolute;
  left: .5em;
  right: .5em;
  bottom: .1em;
  height: .2em;
  background-color: var(--accent);
}

small,
.caption,
blockquote {
  color: color-mix(in srgb, var(--fg) 75%, transparent);
}

blockquote {
  margin: 1em 0;
  padding-left: 2em;
  border-left: 3px solid var(--accent);
}

.zoom-overlay {
  background-color: var(--bg);
}

.search-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.search__input {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.search__button {
  margin-left: .5em;
}

.footnotes li:not(:target):not(:hover) {
  opacity: .5;
}

[role="doc-noteref"]:target,
[role="doc-endnote"]:target {
  outline: 1px dashed var(--accent);
}

.heart {
  color: red;
  display: inline-block;
  animation: heartbeat 1.5s infinite;
}

@keyframes heartbeat {
  0%,20%,50%,80%,to {
    transform: scale(1);
  }

  40% {
    transform: scale(1.2);
  }

  60% {
    transform: scale(1.1);
  }
}

@media screen and (max-width: 952px) {

  .entry .margin {position: relative;top: auto;left: auto;right: auto;bottom: auto;}
  .entry .margin.right {float: right;}
  .entry .margin.left {text-align: left;display: block;float: left;}

  .entry .margin .caption,
  .entry .margin p {margin-bottom: 6px;text-align: left;}

  .wide, .wide.left, .wide.right {width: 100%;margin: 0}
  .wide.left .caption {margin-left: 0}
}

@media screen and (max-width: 38em) {

  a.row {margin-left: 0;margin-right:0;}
}

@media screen and (max-width: 730px) {

  li {margin-left: 24px}
  ul ul, ol ul, ol ol, ul ol {margin-left: 0}
  .nav .right {clear: both;float: none;margin-top: 3px}
  a.search {margin-left: 0}
  body {font-size: 1rem;padding: 1rem}

  .header .title {
    display: inline-block;
    vertical-align: bottom;
    margin-bottom: 0;
  }

  #logo img {
    max-width: 5em;
    margin-right: 1em;
  }

  #logo {
    margin-bottom: 1em;
  }
}

@media screen and (max-width: 400px) {

  body {font-size: 0.9rem;padding: 0.5rem;margin: 0}
  pre code {
    padding: .8rem .5rem;
    margin: 0 -.5rem;
  }
  #logo img {
    max-width: 3em;
  }
  .search-form {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .search__input {
    width: 100%;
  }
  .search__button {
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
  }
}