@charset "UTF-8";
* {
  font: unset;
  color: unset;
  background-color: unset;
  text-decoration-line: unset;
  text-decoration-thickness: 0;
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  vertical-align: baseline;
}

html {
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

body {
  color: inherit;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

button {
  background-color: transparent;
  cursor: pointer;
}

ol,
ul {
  list-style-type: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  object-fit: cover;
}

svg {
  display: inline;
  height: 1em;
}

dialog {
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
}

/* @font-face {
	font-family: "Source Serif 4";
	font-weight: 200;
	font-style: normal;
	src: url("/font/regular/SourceSerif4-ExtraLight.ttf") format("truetype");
}
@font-face {
	font-family: "Source Serif 4";
	font-weight: 300;
	font-style: normal;
	src: url("/font/regular/SourceSerif4-Light.ttf") format("truetype");
} */
@font-face {
  font-family: "Source Serif 4";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/font/SourceSerif4-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Source Serif 4";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("/font/SourceSerif4-It.ttf") format("truetype");
}
@font-face {
  font-family: "Source Serif 4";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/font/SourceSerif4-Semibold.ttf") format("truetype");
}
/* @font-face {
	font-family: "Source Serif 4";
	font-weight: 700;
	font-style: normal;
	src: url("/font/regular/SourceSerif4-Bold.ttf") format("truetype");
}
@font-face {
	font-family: "Source Serif 4";
	font-weight: 900;
	font-style: normal;
	src: url("/font/regular/SourceSerif4-Black.ttf") format("truetype");
} */
/* @font-face {
	font-family: "Source Serif 4 Display";
	font-weight: 200;
	font-style: normal;
	src: url("/font/display/SourceSerif4Display-ExtraLight.ttf") format("truetype");
}
@font-face {
	font-family: "Source Serif 4 Display";
	font-weight: 300;
	font-style: normal;
	src: url("/font/display/SourceSerif4Display-Light.ttf") format("truetype");
}
@font-face {
	font-family: "Source Serif 4 Display";
	font-weight: 400;
	font-style: normal;
	src: url("/font/display/SourceSerif4Display-Regular.ttf") format("truetype");
}
@font-face {
	font-family: "Source Serif 4 Display";
	font-weight: 600;
	font-style: normal;
	src: url("/font/display/SourceSerif4Display-Semibold.ttf") format("truetype");
}
@font-face {
	font-family: "Source Serif 4 Display";
	font-weight: 700;
	font-style: normal;
	src: url("/font/display/SourceSerif4Display-Bold.ttf") format("truetype");
}
@font-face {
	font-family: "Source Serif 4 Display";
	font-weight: 900;
	font-style: normal;
	src: url("/font/display/SourceSerif4Display-Black.ttf") format("truetype");
} */
/* @font-face {
	font-family: "Source Serif 4 Subhead";
	font-weight: 200;
	font-style: normal;
	src: url("/font/subhead/SourceSerif4Subhead-ExtraLight.ttf") format("truetype");
}
@font-face {
	font-family: "Source Serif 4 Subhead";
	font-weight: 300;
	font-style: normal;
	src: url("/font/subhead/SourceSerif4Subhead-Light.ttf") format("truetype");
} */
@font-face {
  font-family: "Source Serif 4 Subhead";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/font/SourceSerif4Subhead-Regular.ttf") format("truetype");
}
/* @font-face {
	font-family: "Source Serif 4 Subhead";
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	src: url("/font/SourceSerif4Subhead-It.ttf") format("truetype");
} */
/* @font-face {
	font-family: "Source Serif 4 Subhead";
	font-weight: 600;
	font-style: normal;
	src: url("/font/subhead/SourceSerif4Subhead-Semibold.ttf") format("truetype");
}
@font-face {
	font-family: "Source Serif 4 Subhead";
	font-weight: 700;
	font-style: normal;
	src: url("/font/subhead/SourceSerif4Subhead-Bold.ttf") format("truetype");
}
@font-face {
	font-family: "Source Serif 4 Subhead";
	font-weight: 900;
	font-style: normal;
	src: url("/font/subhead/SourceSerif4Subhead-Black.ttf") format("truetype");
} */
/* @font-face {
	font-family: "Source Serif 4 SmText";
	font-weight: 200;
	font-style: normal;
	src: url("/font/smtext/SourceSerif4SmText-ExtraLight.ttf") format("truetype");
}
@font-face {
	font-family: "Source Serif 4 SmText";
	font-weight: 300;
	font-style: normal;
	src: url("/font/smtext/SourceSerif4SmText-Light.ttf") format("truetype");
} */
@font-face {
  font-family: "Source Serif 4 SmText";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/font/SourceSerif4SmText-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Source Serif 4 SmText";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("/font/SourceSerif4SmText-It.ttf") format("truetype");
}
@font-face {
  font-family: "Source Serif 4 SmText";
  font-weight: 600;
  font-style: normal;
  src: url("/font/SourceSerif4SmText-Semibold.ttf") format("truetype");
}
/* @font-face {
	font-family: "Source Serif 4 SmText";
	font-weight: 700;
	font-style: normal;
	src: url("/font/smtext/SourceSerif4SmText-Bold.ttf") format("truetype");
}
@font-face {
	font-family: "Source Serif 4 SmText";
	font-weight: 900;
	font-style: normal;
	src: url("/font/smtext/SourceSerif4SmText-Black.ttf") format("truetype");
} */
/* @font-face {
	font-family: "Source Serif 4 Caption";
	font-weight: 200;
	font-style: normal;
	src: url("/font/caption/SourceSerif4Caption-ExtraLight.ttf") format("truetype");
}
@font-face {
	font-family: "Source Serif 4 Caption";
	font-weight: 300;
	font-style: normal;
	src: url("/font/caption/SourceSerif4Caption-Light.ttf") format("truetype");
} */
@font-face {
  font-family: "Source Serif 4 Caption";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/font/SourceSerif4Caption-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Source Serif 4 Caption";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("/font/SourceSerif4Caption-It.ttf") format("truetype");
}
/* @font-face {
	font-family: "Source Serif 4 Caption";
	font-weight: 600;
	font-style: normal;
	src: url("/font/caption/SourceSerif4Caption-Semibold.ttf") format("truetype");
}
@font-face {
	font-family: "Source Serif 4 Caption";
	font-weight: 700;
	font-style: normal;
	src: url("/font/caption/SourceSerif4Caption-Bold.ttf") format("truetype");
}
@font-face {
	font-family: "Source Serif 4 Caption";
	font-weight: 900;
	font-style: normal;
	src: url("/font/caption/SourceSerif4Caption-Black.ttf") format("truetype");
} */
@font-face {
  font-family: "Source Code Pro";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/font/SourceCodePro-Regular.ttf") format("truetype");
}
/* @mixin h1 {
	font-size: 28px;
	font-weight: 600;
	margin-bottom: 1em;
}

@mixin h2 {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 1em;
}

@mixin h3 {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 1em;
} */
/* @mixin desktop-hover-mobile-touch {
	&:hover {
		@content;
		touch-action: manipulation;
		-ms-touch-action: manipulation;
	}
} */
html,
html.light-theme {
  --text: #252519;
  --background: #ffffff;
  --link: #eb398c;
  --muted: #60656b;
  --selection: #fcdeec;
  --highlight: rgb(255, 255, 145);
  --border: #d0d7de;
  --shadow: rgba(140, 149, 159, 0.2);
  --button: #eb398c;
  --input-background: rgb(250, 250, 250);
  --input-outline: #b2bbc4;
  --input-text: #7d868f;
  --input-hover: #7d868f;
  --input-text-hover: rgb(88, 96, 104);
  --input-selected: #eb398c;
  --input-selected-hover: #ee65a5;
  /* --code-bckg: #0000000c;
  --codeblock-bckg: #f6f7f6;

  --syntax-grey: #555555;
  --syntax-purple: #8d4bb9;
  --syntax-yellow: #b38600;
  --syntax-red: #f03c35;
  --syntax-green: #5f9972;
  --syntax-blue: #0fa1a7;

  --syntax-prompt: #ff5c57;
  --syntax-error: #ff1259; */
}

html.sepia-theme {
  --text: #252519;
  --background: #e7e3de;
  --link: #eb398c;
  --muted: #5f594a;
  --selection: #e4bdce;
  --highlight: rgb(253, 227, 155);
  --border: #bbb7ad;
  --shadow: rgba(136, 125, 116, 0.329);
  --button: #eb398c;
  --input-background: rgb(240, 240, 240);
  --input-outline: #b8afa1;
  --input-text: #797066;
  --input-hover: #796d5f;
  --input-text-hover: #6d665d;
  --input-selected: #eb398c;
  --input-selected-hover: #ee65a5;
  /* --code-bckg: #251e1915;
  --codeblock-bckg: #ebe7e4;

  --syntax-grey: #555555;
  --syntax-purple: #8440b1;
  --syntax-yellow: #9b7400;
  --syntax-red: #df2f29;
  --syntax-green: #4d855f;
  --syntax-blue: #209296;

  --syntax-prompt: #eb4c46;
  --syntax-error: #db1651; */
}

html.grey-theme {
  --text: #252519;
  --background: #cfcfcf;
  --link: #d6146f;
  --muted: #555555;
  --selection: #caacba;
  --highlight: rgb(209, 209, 129);
  --border: #9e9e9e;
  --shadow: rgba(70, 70, 70, 0.2);
  --button: #d6146f;
  --input-background: rgb(230, 230, 230);
  --input-outline: #929292;
  --input-text: #686868;
  --input-hover: #575757;
  --input-text-hover: rgb(63, 63, 63);
  --input-selected: #d6146f;
  --input-selected-hover: #eb3b8d;
}

html.dark-theme {
  --text: #c5bda9;
  --background: #212121;
  --link: rgb(250, 78, 130);
  --muted: #a89f89;
  --selection: #4f2b36;
  --highlight: rgb(97, 26, 37);
  --border: #5f5b50;
  --shadow: rgba(0, 0, 0, 0.212);
  --button: rgb(250, 78, 130);
  --input-background: rgb(27, 27, 27);
  --input-outline: #837c6a;
  --input-text: #a89f89;
  --input-hover: #a89f89;
  --input-text-hover: #c4bba4;
  --input-selected: rgb(250, 78, 130);
  --input-selected-hover: rgb(250, 106, 149);
  /* //--code-bckg: #ffffff15;
  //--codeblock-bckg: #292929;
  --code-bckg: #00000060;
  --codeblock-bckg: #1a1a1a;

  --syntax-grey: #888787;
  --syntax-purple: #9f74bb;
  --syntax-yellow: #dbae25;
  --syntax-red: #f05b56;
  --syntax-green: #3da760;
  --syntax-blue: #20afb4;

  --syntax-prompt: #fc625d;
  --syntax-error: #f01166; */
}
html.dark-theme img {
  filter: brightness(0.85);
  z-index: -1;
}

html.black-theme {
  --text: rgb(204, 207, 212);
  --background: #000;
  --link: rgb(250, 78, 130);
  --muted: #979ea7;
  --selection: #431523;
  --highlight: #4d0e1c;
  --border: #555;
  --shadow: rgba(0, 0, 0, 0.486);
  --button: rgb(250, 78, 130);
  --input-background: rgb(27, 27, 27);
  --input-outline: #626a72;
  --input-text: #838c96;
  --input-hover: #838c96;
  --input-text-hover: #a4adb8;
  --input-selected: rgb(250, 78, 130);
  --input-selected-hover: rgb(250, 106, 149);
  /* --code-bckg: #ffffff25;
  --codeblock-bckg: #181818;

  --syntax-grey: #9c9c9c;
  --syntax-purple: #bd7fe6;
  --syntax-yellow: #ebba26;
  --syntax-red: #fc5a55;
  --syntax-green: #3fb867;
  --syntax-blue: #21bec4;

  --syntax-prompt: #ff6b66;
  --syntax-error: #ff1277; */
}
html.black-theme img {
  filter: brightness(0.85);
  z-index: -1;
}

html.dark-grey-theme {
  --text: rgb(199, 199, 199);
  --background: #424242;
  --link: rgb(255, 114, 157);
  --muted: #a7a7a7;
  --selection: #684e56;
  --highlight: #72454f;
  --border: #666666;
  --shadow: rgba(27, 27, 27, 0.486);
  --button: rgb(255, 114, 157);
  --input-background: rgb(49, 49, 49);
  --input-outline: #7e7e7e;
  --input-text: #979797;
  --input-hover: #a7a7a7;
  --input-text-hover: #b3b3b3;
  --input-selected: rgb(255, 114, 157);
  --input-selected-hover: rgb(253, 142, 175);
}
html.dark-grey-theme img {
  filter: brightness(0.85);
  z-index: -1;
}

@media (prefers-color-scheme: dark) {
  html.light-theme {
    --text: #252519;
    --background: #ffffff;
    --link: #eb398c;
    --muted: #60656b;
    --selection: #fcdeec;
    --highlight: rgb(255, 255, 145);
    --border: #d0d7de;
    --shadow: rgba(140, 149, 159, 0.2);
    --button: #eb398c;
    --input-background: rgb(250, 250, 250);
    --input-outline: #b2bbc4;
    --input-text: #7d868f;
    --input-hover: #7d868f;
    --input-text-hover: rgb(88, 96, 104);
    --input-selected: #eb398c;
    --input-selected-hover: #ee65a5;
    /* --code-bckg: #0000000c;
    --codeblock-bckg: #f6f7f6;

    --syntax-grey: #555555;
    --syntax-purple: #8d4bb9;
    --syntax-yellow: #b38600;
    --syntax-red: #f03c35;
    --syntax-green: #5f9972;
    --syntax-blue: #0fa1a7;

    --syntax-prompt: #ff5c57;
    --syntax-error: #ff1259; */
  }
  html.sepia-theme {
    --text: #252519;
    --background: #e7e3de;
    --link: #eb398c;
    --muted: #5f594a;
    --selection: #e4bdce;
    --highlight: rgb(253, 227, 155);
    --border: #bbb7ad;
    --shadow: rgba(136, 125, 116, 0.329);
    --button: #eb398c;
    --input-background: rgb(240, 240, 240);
    --input-outline: #b8afa1;
    --input-text: #797066;
    --input-hover: #796d5f;
    --input-text-hover: #6d665d;
    --input-selected: #eb398c;
    --input-selected-hover: #ee65a5;
    /* --code-bckg: #251e1915;
    --codeblock-bckg: #ebe7e4;

    --syntax-grey: #555555;
    --syntax-purple: #8440b1;
    --syntax-yellow: #9b7400;
    --syntax-red: #df2f29;
    --syntax-green: #4d855f;
    --syntax-blue: #209296;

    --syntax-prompt: #eb4c46;
    --syntax-error: #db1651; */
  }
  html.grey-theme {
    --text: #252519;
    --background: #cfcfcf;
    --link: #d6146f;
    --muted: #555555;
    --selection: #caacba;
    --highlight: rgb(209, 209, 129);
    --border: #9e9e9e;
    --shadow: rgba(70, 70, 70, 0.2);
    --button: #d6146f;
    --input-background: rgb(230, 230, 230);
    --input-outline: #929292;
    --input-text: #686868;
    --input-hover: #575757;
    --input-text-hover: rgb(63, 63, 63);
    --input-selected: #d6146f;
    --input-selected-hover: #eb3b8d;
  }
  html,
  html.dark-theme {
    --text: #c5bda9;
    --background: #212121;
    --link: rgb(250, 78, 130);
    --muted: #a89f89;
    --selection: #4f2b36;
    --highlight: rgb(97, 26, 37);
    --border: #5f5b50;
    --shadow: rgba(0, 0, 0, 0.212);
    --button: rgb(250, 78, 130);
    --input-background: rgb(27, 27, 27);
    --input-outline: #837c6a;
    --input-text: #a89f89;
    --input-hover: #a89f89;
    --input-text-hover: #c4bba4;
    --input-selected: rgb(250, 78, 130);
    --input-selected-hover: rgb(250, 106, 149);
    /* //--code-bckg: #ffffff15;
    //--codeblock-bckg: #292929;
    --code-bckg: #00000060;
    --codeblock-bckg: #1a1a1a;

    --syntax-grey: #888787;
    --syntax-purple: #9f74bb;
    --syntax-yellow: #dbae25;
    --syntax-red: #f05b56;
    --syntax-green: #3da760;
    --syntax-blue: #20afb4;

    --syntax-prompt: #fc625d;
    --syntax-error: #f01166; */
  }
  html img,
  html.dark-theme img {
    filter: brightness(0.85);
    z-index: -1;
  }
  html.black-theme {
    --text: rgb(204, 207, 212);
    --background: #000;
    --link: rgb(250, 78, 130);
    --muted: #979ea7;
    --selection: #431523;
    --highlight: #4d0e1c;
    --border: #555;
    --shadow: rgba(0, 0, 0, 0.486);
    --button: rgb(250, 78, 130);
    --input-background: rgb(27, 27, 27);
    --input-outline: #626a72;
    --input-text: #838c96;
    --input-hover: #838c96;
    --input-text-hover: #a4adb8;
    --input-selected: rgb(250, 78, 130);
    --input-selected-hover: rgb(250, 106, 149);
    /* --code-bckg: #ffffff25;
    --codeblock-bckg: #181818;

    --syntax-grey: #9c9c9c;
    --syntax-purple: #bd7fe6;
    --syntax-yellow: #ebba26;
    --syntax-red: #fc5a55;
    --syntax-green: #3fb867;
    --syntax-blue: #21bec4;

    --syntax-prompt: #ff6b66;
    --syntax-error: #ff1277; */
  }
  html.black-theme img {
    filter: brightness(0.85);
    z-index: -1;
  }
  html.dark-grey-theme {
    --text: rgb(199, 199, 199);
    --background: #424242;
    --link: rgb(255, 114, 157);
    --muted: #a7a7a7;
    --selection: #684e56;
    --highlight: #72454f;
    --border: #666666;
    --shadow: rgba(27, 27, 27, 0.486);
    --button: rgb(255, 114, 157);
    --input-background: rgb(49, 49, 49);
    --input-outline: #7e7e7e;
    --input-text: #979797;
    --input-hover: #a7a7a7;
    --input-text-hover: #b3b3b3;
    --input-selected: rgb(255, 114, 157);
    --input-selected-hover: rgb(253, 142, 175);
  }
  html.dark-grey-theme img {
    filter: brightness(0.85);
    z-index: -1;
  }
}
html {
  font-size: 18px;
  font-weight: 400;
  font-family: "Source Serif 4", "Georgia", serif;
  font-display: swap;
  /* line-height: 1.5em; */
  color: var(--text);
  background-color: var(--background);
  scroll-behavior: smooth;
  transition-property: color, background-color;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
  --h1-margin: 28px;
}
html:not(.transition) html {
  transition: none !important;
}

@media (prefers-reduced-motion) {
  html {
    transition: none !important;
  }
}

html:not(.transition) {
  transition: none !important;
}

::selection {
  background-color: var(--selection);
  transition-property: background-color;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
}
html:not(.transition) ::selection {
  transition: none !important;
}

@media (prefers-reduced-motion) {
  ::selection {
    transition: none !important;
  }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body main {
  flex: 1;
}
@media (hover: none) {
  body {
    margin-left: 1em;
    margin-right: 1em;
  }
}
@media (min-width: 550px) and (hover: none) {
  body {
    margin-left: 2em;
    margin-right: 2em;
  }
}
@media (hover: hover) {
  body {
    margin-left: 0.5em;
    margin-right: 0.5em;
  }
}
@media (min-width: 550px) and (max-width: calc(750px + 4em - 1px)) and (hover: hover) {
  body {
    margin-left: 1em;
    margin-right: 1em;
  }
}
@media (min-width: calc(750px + 4em)) and (hover: hover) {
  body {
    margin-left: calc((100vw - 750px) / 2);
    margin-right: calc((100vw - 750px) / 2);
  }
}
body:not(.transition) {
  transition: none !important;
}
@media (prefers-reduced-motion) {
  body {
    transition: none !important;
  }
}

h1 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.5em;
}

i,
em {
  font-style: italic;
}

b,
strong {
  font-weight: 600;
}

u {
  text-decoration: wavy;
}

s {
  text-decoration-style: solid;
  text-decoration-line: line-through;
  text-decoration-thickness: 1px;
}

q {
  quotes: "‘" "’" "“" "”";
}

cite {
  font-style: italic;
}

sup {
  font-size: 80%;
  line-height: 0;
  vertical-align: super;
}

hr {
  border-top: 1px solid var(--border);
  transition-property: border-top;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
}
html:not(.transition) hr {
  transition: none !important;
}

@media (prefers-reduced-motion) {
  hr {
    transition: none !important;
  }
}

figcaption {
  font-family: "Source Serif 4 Caption", "Georgia", serif;
  color: var(--muted);
  transition-property: color;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
}
html:not(.transition) figcaption {
  transition: none !important;
}

@media (prefers-reduced-motion) {
  figcaption {
    transition: none !important;
  }
}

body > a.skip-to-content {
  position: absolute;
  left: 0;
  transform: translateY(-100%);
  background-color: var(--background);
  border: 2px dashed var(--link);
  padding: 0.5em;
}
body > a.skip-to-content:focus {
  transform: translateY(0);
}

/* body div#chromium-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;

	line-height: 1.5em;
	color: var(--background);
	background-color: var(--button);
} */
header.page {
  display: flex;
  flex-direction: row;
  position: relative;
  font-size: 20px;
  line-height: 1.2em;
  margin-top: 1em;
  margin-bottom: 2em;
}
header.page a {
  color: var(--link);
}
header.page a svg {
  fill: var(--link);
}
@media (hover: none) {
  header.page a:active {
    color: var(--background);
    background-color: var(--link);
  }
  header.page a:active svg {
    fill: var(--background);
  }
}
@media (hover: hover) {
  header.page a:hover {
    color: var(--background);
    background-color: var(--link);
  }
  header.page a:hover svg {
    fill: var(--background);
  }
}
header.page button {
  display: grid;
  place-content: center;
}
header.page button > svg {
  height: 24px;
  width: 24px;
  pointer-events: none;
}
header.page > nav {
  display: flex;
  flex-direction: row;
  width: 100%;
}
header.page > nav > a {
  margin-left: 0.8em;
  padding-left: 0.1em;
  padding-right: 0.1em;
}
header.page > nav > a:first-of-type {
  margin-left: 0;
  margin-right: auto;
}
header.page > nav > a:last-of-type {
  margin-right: 0.8em;
}

body:has(main.home-page) header.page > nav > a.logo > span.dash {
  animation-name: flashing_underscore;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 3;
  animation-timing-function: step-end;
}
@media (prefers-reduced-motion) {
  body:has(main.home-page) header.page > nav > a.logo > span.dash {
    animation-name: none !important;
    opacity: 1;
  }
}
@keyframes flashing_underscore {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

footer.page {
  font-family: "Source Serif 4 SmText", "Georgia", serif;
  color: var(--muted);
}
@media (hover: none) {
  footer.page {
    font-size: 16px;
  }
}
@media (hover: hover) {
  footer.page {
    font-size: 14px;
  }
}
@media (hover: none) {
  footer.page a {
    color: var(--link);
  }
  footer.page a svg {
    fill: var(--link);
  }
}
@media (hover: none) and (hover: none) {
  footer.page a:active {
    color: var(--background);
    background-color: var(--link);
  }
  footer.page a:active svg {
    fill: var(--background);
  }
}
@media (hover: none) and (hover: hover) {
  footer.page a:hover {
    color: var(--background);
    background-color: var(--link);
  }
  footer.page a:hover svg {
    fill: var(--background);
  }
}
@media (hover: hover) {
  footer.page a {
    color: var(--muted);
  }
  footer.page a svg {
    fill: var(--muted);
  }
}
@media (hover: hover) and (hover: none) {
  footer.page a:active {
    color: var(--background);
    background-color: var(--link);
  }
  footer.page a:active svg {
    fill: var(--background);
  }
}
@media (hover: hover) and (hover: hover) {
  footer.page a:hover {
    color: var(--background);
    background-color: var(--link);
  }
  footer.page a:hover svg {
    fill: var(--background);
  }
}
footer.page a {
  padding: 0.2em;
}
footer.page > div {
  display: flex;
  align-items: center;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}
@media (hover: none) {
  footer.page > div {
    flex-direction: column;
  }
}
@media (min-width: 550px) and (hover: none) {
  footer.page > div {
    flex-direction: row;
  }
}
@media (hover: hover) {
  footer.page > div {
    flex-direction: row;
  }
}
footer.page > div > ul {
  display: flex;
  align-items: center;
}
@media (max-width: 549px) and (hover: none) {
  footer.page > div > ul {
    flex-direction: column;
  }
}
@media (min-width: 550px) and (hover: none) {
  footer.page > div > ul {
    flex-direction: row;
    margin-right: auto;
  }
}
@media (hover: hover) {
  footer.page > div > ul {
    flex-direction: row;
    margin-right: auto;
  }
}
@media (max-width: 549px) and (hover: none) {
  footer.page > div > ul > li {
    margin-bottom: 1em;
  }
}
@media (min-width: 550px) and (hover: none) {
  footer.page > div > ul > li {
    margin-right: 1em;
  }
}
@media (hover: hover) {
  footer.page > div > ul > li {
    margin-right: 1em;
  }
}
footer.page > div > ul > li > a {
  display: flex;
  flex-direction: row;
  align-items: center;
}
footer.page > div > ul > li > a > svg {
  margin-right: 0.3em;
}

main.home-page {
  margin-bottom: 2em;
}
main.home-page h1 {
  margin-bottom: var(--h1-margin);
}
main.home-page ol.posts {
  list-style-type: none;
}
main.home-page ol.posts > li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (hover: none) {
  main.home-page ol.posts > li {
    margin-bottom: 2em;
  }
}
@media (hover: hover) {
  main.home-page ol.posts > li {
    margin-bottom: 1.7em;
  }
}
main.home-page ol.posts > li:last-of-type {
  margin-bottom: 0;
}
main.home-page ol.posts > li h2 {
  font-size: 20px;
  line-height: 1.5em;
  margin-bottom: 0.2em;
}
main.home-page ol.posts > li a {
  color: var(--link);
}
main.home-page ol.posts > li a svg {
  fill: var(--link);
}
@media (hover: none) {
  main.home-page ol.posts > li a:active {
    color: var(--background);
    background-color: var(--link);
  }
  main.home-page ol.posts > li a:active svg {
    fill: var(--background);
  }
}
@media (hover: hover) {
  main.home-page ol.posts > li a:hover {
    color: var(--background);
    background-color: var(--link);
  }
  main.home-page ol.posts > li a:hover svg {
    fill: var(--background);
  }
}
main.home-page ol.posts > li a {
  display: block;
}
main.home-page ol.posts > li p {
  font-family: "Source Serif 4 Subhead", "Georgia", serif;
  line-height: 1.5em;
}
main.home-page ol.posts > li p time {
  margin-right: 1.5em;
}
main.home-page ul.topics-list a {
  color: var(--link);
}
main.home-page ul.topics-list a svg {
  fill: var(--link);
}
@media (hover: none) {
  main.home-page ul.topics-list a:active {
    color: var(--background);
    background-color: var(--link);
  }
  main.home-page ul.topics-list a:active svg {
    fill: var(--background);
  }
}
@media (hover: hover) {
  main.home-page ul.topics-list a:hover {
    color: var(--background);
    background-color: var(--link);
  }
  main.home-page ul.topics-list a:hover svg {
    fill: var(--background);
  }
}
main.home-page section:first-of-type {
  margin-bottom: 4em;
}

main.blog-page {
  margin-bottom: 2em;
}
main.blog-page header {
  margin-bottom: var(--h1-margin);
}
main.blog-page header h1 {
  display: inline-block;
}
main.blog-page header button {
  color: var(--muted);
}
main.blog-page header button svg {
  fill: var(--muted);
}
@media (hover: none) {
  main.blog-page header button:active {
    color: var(--background);
    background-color: var(--link);
  }
  main.blog-page header button:active svg {
    fill: var(--background);
  }
}
@media (hover: hover) {
  main.blog-page header button:hover {
    color: var(--background);
    background-color: var(--link);
  }
  main.blog-page header button:hover svg {
    fill: var(--background);
  }
}
main.blog-page header button#filter-toggle {
  display: inline-block;
  font-size: 16px;
  font-family: "Source Serif 4 SmText", "Georgia", serif;
  line-height: 1;
  margin-left: 1.5em;
  padding-left: 0.1em;
  padding-right: 0.1em;
  padding-top: 0.1em;
}
main.blog-page header button#filter-toggle::before {
  display: inline-block;
  width: 0.5em;
  content: "+";
}
main.blog-page header button#filter-toggle.open::before {
  content: "-";
}
main.blog-page header span#filter-panel-clear-msg {
  display: none;
  font-size: 16px;
  color: var(--muted);
  margin-left: 1em;
}
main.blog-page header span#filter-panel-clear-msg.visible {
  display: inline;
  animation-name: fade_away;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
@media (prefers-reduced-motion) {
  main.blog-page header span#filter-panel-clear-msg.visible {
    animation-name: none !important;
    opacity: 1;
  }
}
@keyframes fade_away {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 100;
  }
  100% {
    opacity: 0;
  }
}
main.blog-page header div#filter-panel {
  font-size: 16px;
  font-family: "Source Serif 4 SmText", "Georgia", serif;
  color: var(--input-text);
  margin-top: 16px;
  user-select: none;
}
main.blog-page header div#filter-panel input[type=checkbox] {
  appearance: none;
  cursor: pointer;
}
main.blog-page header div#filter-panel input[type=checkbox]::before {
  display: inline-block;
  width: 0.5em;
  content: "";
}
@media (hover: none) {
  main.blog-page header div#filter-panel input[type=checkbox]:focus, main.blog-page header div#filter-panel input[type=checkbox]:focus + label {
    color: inherit;
  }
}
@media (hover: hover) {
  main.blog-page header div#filter-panel input[type=checkbox]:hover, main.blog-page header div#filter-panel input[type=checkbox]:hover + label {
    color: var(--input-text-hover);
  }
}
main.blog-page header div#filter-panel input[type=checkbox]:checked, main.blog-page header div#filter-panel input[type=checkbox]:checked + label {
  color: var(--input-selected);
}
@media (hover: none) {
  main.blog-page header div#filter-panel input[type=checkbox]:focus:checked, main.blog-page header div#filter-panel input[type=checkbox]:focus:checked + label {
    color: var(--input-selected);
  }
}
main.blog-page header div#filter-panel input[type=checkbox]:checked::before {
  content: "+";
}
@media (hover: hover) {
  main.blog-page header div#filter-panel input[type=checkbox]:checked:hover, main.blog-page header div#filter-panel input[type=checkbox]:checked:hover + label {
    color: var(--input-selected-hover);
  }
}
main.blog-page header div#filter-panel label {
  margin-right: 1em;
  cursor: pointer;
}
main.blog-page header div#filter-panel hr {
  margin-top: 20px;
}
main.blog-page ol#post-table {
  display: flex;
  flex-direction: column;
  line-height: 1.5em;
  list-style: none;
}
@media (min-width: calc(750px + 4em)) and (hover: hover) {
  main.blog-page ol#post-table {
    display: grid;
    grid-template-columns: max-content auto max-content;
    column-gap: 1em;
    row-gap: 0.3em;
  }
}
main.blog-page ol#post-table > li {
  margin-bottom: 1.5em;
}
@media (min-width: calc(750px + 4em)) and (hover: hover) {
  main.blog-page ol#post-table > li {
    display: contents;
  }
}
main.blog-page ol#post-table > li:last-of-type {
  margin-bottom: 0;
}
main.blog-page ol#post-table > li.hidden {
  display: none;
}
main.blog-page ol#post-table > li > article {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (min-width: 550px) and (hover: none) {
  main.blog-page ol#post-table > li > article {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
  }
}
@media (hover: hover) {
  main.blog-page ol#post-table > li > article {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
  }
}
@media (min-width: calc(750px + 4em)) and (hover: hover) {
  main.blog-page ol#post-table > li > article {
    display: contents;
  }
}
main.blog-page ol#post-table > li > article > h2 {
  font-size: 20px;
  line-height: 1.5em;
  order: 1;
}
@media (hover: hover) {
  main.blog-page ol#post-table > li > article > h2 {
    font-size: inherit;
  }
}
main.blog-page ol#post-table > li > article > h2 a {
  color: var(--link);
}
main.blog-page ol#post-table > li > article > h2 a svg {
  fill: var(--link);
}
@media (hover: none) {
  main.blog-page ol#post-table > li > article > h2 a:active {
    color: var(--background);
    background-color: var(--link);
  }
  main.blog-page ol#post-table > li > article > h2 a:active svg {
    fill: var(--background);
  }
}
@media (hover: hover) {
  main.blog-page ol#post-table > li > article > h2 a:hover {
    color: var(--background);
    background-color: var(--link);
  }
  main.blog-page ol#post-table > li > article > h2 a:hover svg {
    fill: var(--background);
  }
}
main.blog-page ol#post-table > li > article > h2 > a {
  display: block;
}
@media (min-width: 550px) and (hover: none) {
  main.blog-page ol#post-table > li > article > h2 {
    flex-basis: 100%;
  }
}
@media (hover: hover) {
  main.blog-page ol#post-table > li > article > h2 {
    flex-basis: 100%;
  }
}
@media (min-width: calc(750px + 4em)) and (hover: hover) {
  main.blog-page ol#post-table > li > article > h2 {
    order: unset;
  }
}
@media (hover: none) {
  main.blog-page ol#post-table > li > article > h2 {
    margin-bottom: 0.2em;
  }
}
main.blog-page ol#post-table > li > article > time {
  order: 2;
  font-family: "Source Serif 4 Subhead";
}
@media (min-width: calc(750px + 4em)) and (hover: hover) {
  main.blog-page ol#post-table > li > article > time {
    order: unset;
  }
}
@media (min-width: calc(750px + 4em)) and (hover: hover) {
  main.blog-page ol#post-table > li > article > time {
    text-align: right;
  }
}
@media (hover: none) {
  main.blog-page ol#post-table > li > article > time {
    margin-bottom: 0.2em;
  }
}
@media (min-width: 550px) and (hover: none) {
  main.blog-page ol#post-table > li > article > time {
    margin-bottom: 0;
    margin-right: 2em;
  }
}
@media (hover: hover) {
  main.blog-page ol#post-table > li > article > time {
    margin-right: 2em;
  }
}
@media (min-width: calc(750px + 4em)) and (hover: hover) {
  main.blog-page ol#post-table > li > article > time {
    margin-right: 0;
  }
}
main.blog-page ol#post-table > li > article > span {
  order: 3;
  font-family: "Source Serif 4 Subhead";
}
@media (min-width: calc(750px + 4em)) and (hover: hover) {
  main.blog-page ol#post-table > li > article > span {
    order: unset;
  }
}
@media (min-width: calc(750px + 4em)) and (hover: hover) {
  main.blog-page ol#post-table > li > article > span {
    text-align: right;
  }
}

main.essay-page span.term {
  font-style: italic;
}
main.essay-page article {
  line-height: 1.5em;
}
main.essay-page article h1 {
  font-size: 40px;
  margin-bottom: 1em;
}
main.essay-page article h2 {
  font-weight: 600;
  margin-bottom: 0.5em;
  margin-top: 2em;
}
main.essay-page article h1 > a {
  display: block;
}
main.essay-page article p a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
}
main.essay-page article p a:hover {
  color: var(--background);
  background-color: var(--link);
  text-decoration: none;
}
main.essay-page article p a.footnote-ref,
main.essay-page article p a.reverse-footnote {
  font-family: "Source Serif 4 SmText";
  color: var(--link);
  text-decoration: none;
}
main.essay-page article p a.footnote-ref:hover,
main.essay-page article p a.reverse-footnote:hover {
  color: var(--background);
  background-color: var(--link);
  text-decoration: none;
}
main.essay-page article p a.footnote-ref {
  padding-left: 0.1em;
  padding-right: 0.1em;
}
main.essay-page article p a.footnote-ref:target:not(:hover) {
  background-color: var(--highlight);
}
main.essay-page article p a.reverse-footnote {
  padding-left: 0.1em;
  padding-right: 0.2em;
}
main.essay-page article p:last-of-type {
  margin-bottom: 2em;
}
@media (min-width: 550px) and (hover: none) {
  main.essay-page article p:last-of-type {
    margin-bottom: 3em;
  }
}
@media (min-width: 550px) and (hover: hover) {
  main.essay-page article p:last-of-type {
    margin-bottom: 3em;
  }
}
main.essay-page article p,
main.essay-page article ol,
main.essay-page article ul {
  margin-bottom: 1.5em;
}
main.essay-page article ol {
  list-style-position: outside;
  counter-reset: footnotes;
}
main.essay-page article ol > li {
  display: table;
  margin-bottom: 1em;
  counter-increment: footnotes;
}
main.essay-page article ol > li::before {
  display: table-cell;
  text-align: right;
  padding-right: 1em;
  content: counter(footnotes) ". ";
}
main.essay-page article ol > li:last-of-type {
  margin-bottom: 0;
}
main.essay-page article ol > li:target > span {
  background-color: var(--highlight);
}
main.essay-page article ol.count-double-digit > li::before {
  width: 2ch;
}
main.essay-page article ol.count-double-digit > li:nth-child(1)::before, main.essay-page article ol.count-double-digit > li:nth-child(2)::before, main.essay-page article ol.count-double-digit > li:nth-child(3)::before, main.essay-page article ol.count-double-digit > li:nth-child(4)::before, main.essay-page article ol.count-double-digit > li:nth-child(5)::before, main.essay-page article ol.count-double-digit > li:nth-child(6)::before, main.essay-page article ol.count-double-digit > li:nth-child(7)::before, main.essay-page article ol.count-double-digit > li:nth-child(8)::before, main.essay-page article ol.count-double-digit > li:nth-child(9)::before {
  width: calc(3ch - 3px);
}
main.essay-page article footer {
  margin-bottom: 2em;
}
main.essay-page article footer a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
}
main.essay-page article footer a:hover {
  color: var(--background);
  background-color: var(--link);
  text-decoration: none;
}
main.essay-page article footer a.footnote-ref,
main.essay-page article footer a.reverse-footnote {
  font-family: "Source Serif 4 SmText";
  color: var(--link);
  text-decoration: none;
}
main.essay-page article footer a.footnote-ref:hover,
main.essay-page article footer a.reverse-footnote:hover {
  color: var(--background);
  background-color: var(--link);
  text-decoration: none;
}
main.essay-page article footer a.footnote-ref {
  padding-left: 0.1em;
  padding-right: 0.1em;
}
main.essay-page article footer a.footnote-ref:target:not(:hover) {
  background-color: var(--highlight);
}
main.essay-page article footer a.reverse-footnote {
  padding-left: 0.1em;
  padding-right: 0.2em;
}
@media (min-width: 550px) and (hover: none) {
  main.essay-page article footer {
    margin-bottom: 3em;
  }
}
@media (min-width: 550px) and (hover: hover) {
  main.essay-page article footer {
    margin-bottom: 3em;
  }
}
main.essay-page article footer > ol > li {
  margin-bottom: 0.7em;
}
main.essay-page article p.details {
  color: var(--muted);
  margin-bottom: 2em;
}
@media (hover: none) {
  main.essay-page article p.details {
    display: flex;
    flex-direction: column;
  }
}
@media (min-width: 550px) and (hover: none) {
  main.essay-page article p.details {
    display: block;
  }
}
@media (hover: hover) {
  main.essay-page article p.details {
    font-size: 16px;
  }
}
main.essay-page article p.details time {
  margin-right: 2em;
}
@media (hover: none) {
  main.essay-page article p.details time {
    margin-bottom: 0.5em;
  }
}
@media (min-width: 550px) and (hover: none) {
  main.essay-page article p.details time {
    margin-bottom: 0;
  }
}
main.essay-page article hr {
  margin-top: 1em;
  margin-bottom: 1em;
}
@media (min-width: 550px) and (hover: none) {
  main.essay-page article hr {
    margin-top: 2em;
    margin-bottom: 2em;
  }
}
@media (min-width: 550px) and (hover: hover) {
  main.essay-page article hr {
    margin-top: 2em;
    margin-bottom: 2em;
  }
}
main.essay-page article hr.footer-divider {
  margin-top: 2em;
  margin-bottom: 2em;
}
@media (min-width: 550px) and (hover: none) {
  main.essay-page article hr.footer-divider {
    margin-top: 3em;
    margin-bottom: 3em;
  }
}
@media (min-width: 550px) and (hover: hover) {
  main.essay-page article hr.footer-divider {
    margin-top: 3em;
    margin-bottom: 3em;
  }
}
@media (hover: hover) {
  main.essay-page article h1 > a,
  main.essay-page article h2 > a,
  main.essay-page article h3 > a {
    position: relative;
    color: var(--text);
  }
  main.essay-page article h1 > a:hover,
  main.essay-page article h2 > a:hover,
  main.essay-page article h3 > a:hover {
    color: var(--text);
    background-color: unset;
  }
  main.essay-page article h1 > a:hover::before,
  main.essay-page article h2 > a:hover::before,
  main.essay-page article h3 > a:hover::before {
    content: "§";
    color: inherit;
    position: absolute;
  }
}
@media (hover: hover) and (hover: hover) {
  main.essay-page article h1 > a:hover::before {
    font-size: 30px;
    left: 0px;
    top: -40px;
  }
  main.essay-page article h2 > a:hover::before {
    top: -2px;
    right: -0.7em;
  }
}
@media (hover: hover) and (min-width: calc(750px + 4em)) and (hover: hover) {
  main.essay-page article h1 > a:hover::before {
    font-size: inherit;
    top: -5px;
    left: -0.7em;
  }
  main.essay-page article h2 > a:hover::before {
    top: -2px;
    left: -0.7em;
  }
}
main.essay-page article figure {
  width: 100%;
  margin-bottom: 1.5em;
}
main.essay-page article figure img {
  width: 100%;
}
@media (hover: none) {
  main.essay-page article figure figcaption {
    font-size: 16px;
  }
}
@media (hover: hover) {
  main.essay-page article figure figcaption {
    font-size: 14px;
  }
}
main.essay-page {
  position: relative;
}
main.essay-page aside#sidenotes {
  display: none;
}
@media (min-width: calc(1050px + 5em)) {
  main.essay-page aside#sidenotes {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: calc((100vw - 750px - 5em) / 2);
    font-family: "Source Serif 4 SmText", "Georgia", serif;
    margin-left: 2em;
  }
  main.essay-page aside#sidenotes > div.sidenote {
    position: absolute;
    font-size: 15px;
    line-height: 1.4em;
    color: var(--muted);
    padding-left: 0.1em;
  }
  main.essay-page aside#sidenotes > div.sidenote a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-style: dotted;
  }
  main.essay-page aside#sidenotes > div.sidenote a:hover {
    color: var(--background);
    background-color: var(--link);
    text-decoration: none;
  }
  main.essay-page aside#sidenotes > div.sidenote.focused {
    color: var(--text);
    background-color: var(--highlight);
  }
  main.essay-page aside#sidenotes > div.sidenote span.counter {
    margin-right: 0.5em;
  }
  main.essay-page aside#sidenotes > div.sidenote p {
    display: inline;
    margin: 0;
  }
}
@media (min-width: calc(1250px + 6em)) {
  main.essay-page aside#sidenotes {
    width: 250px;
  }
}

/* @use 'page_programming'; */
main.about-page {
  margin-bottom: 2em;
}
main.about-page h1 {
  margin-bottom: var(--h1-margin);
}
main.about-page div.columns {
  display: flex;
  flex-direction: column;
}
@media (min-width: 650px) and (hover: none) {
  main.about-page div.columns {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto 1fr;
    column-gap: 2em;
  }
}
@media (min-width: 550px) and (hover: hover) {
  main.about-page div.columns {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto 1fr;
    column-gap: 2em;
  }
}
@media (hover: none) {
  main.about-page div.columns > div:first-child {
    margin-bottom: 1em;
  }
}
@media (min-width: 650px) and (hover: none) {
  main.about-page div.columns > div:first-child {
    grid-column-start: 1;
    grid-row-start: 1;
    margin-bottom: 2em;
  }
}
@media (max-width: 549px) and (hover: hover) {
  main.about-page div.columns > div:first-child {
    margin-bottom: 1em;
  }
}
@media (min-width: 550px) and (hover: hover) {
  main.about-page div.columns > div:first-child {
    grid-column-start: 1;
    grid-row-start: 1;
    margin-bottom: 2em;
  }
}
main.about-page div.columns > div:first-child p {
  line-height: 1.5em;
  margin-bottom: 1.5em;
}
main.about-page div.columns > div:first-child p a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
}
main.about-page div.columns > div:first-child p a:hover {
  color: var(--background);
  background-color: var(--link);
  text-decoration: none;
}
@media (hover: none) {
  main.about-page div.columns > figure {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4em;
  }
}
@media (min-width: 650px) and (hover: none) {
  main.about-page div.columns > figure {
    grid-column-start: 2;
    grid-row-start: 1;
    grid-row-end: 3;
  }
}
@media (max-width: 549px) and (hover: hover) {
  main.about-page div.columns > figure {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4em;
  }
}
@media (min-width: 550px) and (hover: hover) {
  main.about-page div.columns > figure {
    grid-column-start: 2;
    grid-row-start: 1;
    grid-row-end: 3;
  }
}
main.about-page div.columns > figure img {
  width: auto;
  min-height: 400px;
  margin-bottom: 0.2em;
}
@media (hover: none) {
  main.about-page div.columns > figure img {
    height: 60vh;
  }
}
@media (min-width: 650px) and (hover: none) {
  main.about-page div.columns > figure img {
    height: 40vh;
    max-width: 40vw;
  }
}
@media (max-width: 549px) and (hover: hover) {
  main.about-page div.columns > figure img {
    height: 50vh;
  }
}
@media (min-width: 550px) and (hover: hover) {
  main.about-page div.columns > figure img {
    height: 40vh;
    max-width: 40vw;
  }
}
@media (hover: none) {
  main.about-page div.columns > figure figcaption {
    font-size: 16px;
  }
}
@media (hover: hover) {
  main.about-page div.columns > figure figcaption {
    font-size: 14px;
  }
}
main.about-page div.columns > div.build-info {
  font-size: 14px;
}
@media (hover: none) {
  main.about-page div.columns > div.build-info {
    margin-right: 30%;
    min-width: 220px;
  }
}
@media (min-width: 650px) and (hover: none) {
  main.about-page div.columns > div.build-info {
    grid-column-start: 1;
    grid-row-start: 2;
    margin-right: 20%;
  }
}
@media (max-width: 549px) and (hover: hover) {
  main.about-page div.columns > div.build-info {
    margin-right: 40%;
    min-width: 220px;
  }
}
@media (min-width: 550px) and (hover: hover) {
  main.about-page div.columns > div.build-info {
    grid-column-start: 1;
    grid-row-start: 2;
    margin-right: 30%;
    min-width: 220px;
  }
}
main.about-page div.columns > div.build-info p {
  line-height: 1.5em;
}

button#theme-panel-toggle svg {
  stroke: var(--button);
}
@media (hover: none) {
  button#theme-panel-toggle:active {
    background-color: var(--button);
  }
  button#theme-panel-toggle:active svg {
    stroke: var(--background);
  }
  button#theme-panel-toggle:active svg .sun-moon {
    fill: var(--button);
  }
}
@media (hover: hover) {
  button#theme-panel-toggle:hover {
    background-color: var(--button);
  }
  button#theme-panel-toggle:hover svg {
    stroke: var(--background);
  }
  button#theme-panel-toggle:hover svg .sun-moon {
    fill: var(--button);
  }
}

button#theme-panel-toggle > svg * {
  transform-origin: center center;
}
button#theme-panel-toggle > svg .sun-moon {
  fill: var(--background);
  transition: transform 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
button#theme-panel-toggle > svg .sun-beams {
  transition: opacity 300ms ease-in 200ms, transform 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55) 200ms;
}
button#theme-panel-toggle > svg .moon > circle {
  transition: transform 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

html.dark-theme button#theme-panel-toggle > svg .sun-moon,
html.black-theme button#theme-panel-toggle > svg .sun-moon,
html.dark-grey-theme button#theme-panel-toggle > svg .sun-moon {
  fill: var(--button);
  transform: scale(1.75);
  transition: transform 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55) 200ms;
}
html.dark-theme button#theme-panel-toggle > svg .sun-beams,
html.black-theme button#theme-panel-toggle > svg .sun-beams,
html.dark-grey-theme button#theme-panel-toggle > svg .sun-beams {
  opacity: 0;
  transform: rotate(-20deg);
  transition: opacity 300ms ease-in, transform 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
html.dark-theme button#theme-panel-toggle > svg .moon > circle,
html.black-theme button#theme-panel-toggle > svg .moon > circle,
html.dark-grey-theme button#theme-panel-toggle > svg .moon > circle {
  transform: translateX(-8.5px);
  transition: transform 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

@media (hover: none) {
  html.dark-theme button#theme-panel-toggle:active .sun-moon,
  html.black-theme button#theme-panel-toggle:active .sun-moon,
  html.dark-grey-theme button#theme-panel-toggle:active .sun-moon {
    fill: var(--background);
  }
}
@media (hover: hover) {
  html.dark-theme button#theme-panel-toggle:hover .sun-moon,
  html.black-theme button#theme-panel-toggle:hover .sun-moon,
  html.dark-grey-theme button#theme-panel-toggle:hover .sun-moon {
    fill: var(--background);
  }
}

html:not(.transition) button#theme-panel-toggle .sun-moon,
html:not(.transition) button#theme-panel-toggle .sun-beams,
html:not(.transition) button#theme-panel-toggle .moon > circle {
  transition: none !important;
}

@media (prefers-reduced-motion) {
  button#theme-panel-toggle .sun-moon,
  button#theme-panel-toggle .sun-beams,
  button#theme-panel-toggle .moon > circle {
    transition: none !important;
  }
}
dialog#theme-panel::before {
  position: absolute;
  display: inline;
  top: 0;
  width: 10px;
  height: 10px;
  transform-origin: 100% 0%;
  transform: rotate(45deg);
  background-color: var(--background);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  content: "";
  pointer-events: none;
  transition-property: background-color, border-color;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
}
@media (max-width: 549px) and (hover: none) {
  dialog#theme-panel::before {
    right: 8px;
  }
}
@media (min-width: 550px) and (hover: none) {
  dialog#theme-panel::before {
    right: 16px;
  }
}
@media (max-width: 549px) and (hover: hover) {
  dialog#theme-panel::before {
    right: 8px;
  }
}
@media (min-width: 550px) and (max-width: calc(750px + 4em - 1px)) and (hover: hover) {
  dialog#theme-panel::before {
    right: 11px;
  }
}
@media (min-width: calc(750px + 4em)) and (hover: hover) {
  dialog#theme-panel::before {
    right: 16px;
  }
}
html:not(.transition) dialog#theme-panel::before {
  transition: none !important;
}

@media (prefers-reduced-motion) {
  dialog#theme-panel::before {
    transition: none !important;
  }
}

dialog#theme-panel {
  display: none;
  position: absolute;
  top: 60%;
  left: auto;
  z-index: 9;
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: 0 8px 24px var(--shadow);
  margin-top: 0.8em;
  padding: 1em;
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
}
@media (max-width: 549px) and (hover: none) {
  dialog#theme-panel {
    right: -5px;
  }
}
@media (min-width: 550px) and (hover: none) {
  dialog#theme-panel {
    right: -13px;
  }
}
@media (max-width: 549px) and (hover: hover) {
  dialog#theme-panel {
    right: -5px;
  }
}
@media (min-width: 550px) and (max-width: calc(750px + 4em - 1px)) and (hover: hover) {
  dialog#theme-panel {
    right: -8px;
  }
}
@media (min-width: calc(750px + 4em)) and (hover: hover) {
  dialog#theme-panel {
    right: -13px;
  }
}
html:not(.transition) dialog#theme-panel {
  transition: none !important;
}

@media (prefers-reduced-motion) {
  dialog#theme-panel {
    transition: none !important;
  }
}
dialog#theme-panel[open] {
  display: grid;
  grid-template-columns: auto auto auto auto;
  align-items: center;
  column-gap: 1em;
  row-gap: 0.5em;
}
dialog#theme-panel div.light-dark-system {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
dialog#theme-panel div.light-dark-system > label {
  color: var(--text);
  margin-right: 1em;
  user-select: none;
  cursor: pointer;
  transition-property: color;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
}
html:not(.transition) dialog#theme-panel div.light-dark-system > label {
  transition: none !important;
}

@media (prefers-reduced-motion) {
  dialog#theme-panel div.light-dark-system > label {
    transition: none !important;
  }
}
dialog#theme-panel div.light-dark-system input[type=radio] {
  display: grid;
  place-content: center;
  width: 1em;
  height: 1em;
  appearance: none;
  background-color: var(--background);
  border: 2px solid var(--input-outline);
  border-radius: 50%;
  cursor: pointer;
  transition-property: background-color, border-color;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
}
html:not(.transition) dialog#theme-panel div.light-dark-system input[type=radio] {
  transition: none !important;
}

@media (prefers-reduced-motion) {
  dialog#theme-panel div.light-dark-system input[type=radio] {
    transition: none !important;
  }
}
dialog#theme-panel div.light-dark-system input[type=radio]::before {
  width: 0.5em;
  height: 0.5em;
  transform: scale(0);
  background-color: var(--input-selected);
  border-radius: 50%;
  content: "";
  transition-property: transform;
  transition-duration: 150ms;
  transition-timing-function: ease-in-out;
}
@media (prefers-reduced-motion) {
  dialog#theme-panel div.light-dark-system input[type=radio]::before {
    transition: none !important;
  }
}
dialog#theme-panel div.light-dark-system input[type=radio]:checked {
  border-color: var(--input-selected);
}
dialog#theme-panel div.light-dark-system input[type=radio]:checked::before {
  transform: scale(1);
}
dialog#theme-panel div.light-dark-system input[type=radio]:hover {
  border-color: var(--input-hover);
}
dialog#theme-panel div.light-dark-system input[type=radio]:checked:hover {
  border-color: var(--input-selected-hover);
}
dialog#theme-panel div.light-dark-system input[type=radio]:checked:hover::before {
  background-color: var(--input-selected-hover);
}
dialog#theme-panel > input[type=radio].color {
  display: grid;
  place-content: center;
  width: 2em;
  height: 2em;
  appearance: none;
  background-color: var(--input-background);
  border: 2px solid var(--input-outline);
  border-radius: 50%;
  cursor: pointer;
  transition-property: background-color, border-color;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
}
html:not(.transition) dialog#theme-panel > input[type=radio].color {
  transition: none !important;
}

@media (prefers-reduced-motion) {
  dialog#theme-panel > input[type=radio].color {
    transition: none !important;
  }
}
dialog#theme-panel > input[type=radio].color::before {
  width: 36px;
  height: 36px;
  transform: scale(1);
  border-radius: 50%;
  content: "";
  transition-property: transform;
  transition-duration: 150ms;
  transition-timing-function: ease-in-out;
}
@media (prefers-reduced-motion) {
  dialog#theme-panel > input[type=radio].color::before {
    transition: none !important;
  }
}
dialog#theme-panel > input[type=radio].color:hover {
  border-color: var(--input-hover);
}
dialog#theme-panel > input[type=radio].color:hover::before {
  transform: scale(0.7);
  border: 1px solid var(--input-outline);
}
dialog#theme-panel > input[type=radio].color:checked {
  border-color: var(--input-selected);
}
dialog#theme-panel > input[type=radio].color:checked::before {
  transform: scale(0.7);
  border: 1px solid var(--input-outline);
}
dialog#theme-panel > input[type=radio].color:checked:hover {
  border-color: var(--input-selected-hover);
}
dialog#theme-panel > input[type=radio].color#theme-panel-option-light::before {
  background-color: #ffffff;
}
dialog#theme-panel > input[type=radio].color#theme-panel-option-sepia::before {
  background-color: #e7e3de;
}
dialog#theme-panel > input[type=radio].color#theme-panel-option-grey::before {
  background-color: #cfcfcf;
}
dialog#theme-panel > input[type=radio].color#theme-panel-option-dark::before {
  background-color: #212121;
}
dialog#theme-panel > input[type=radio].color#theme-panel-option-black::before {
  background-color: #000000;
}
dialog#theme-panel > input[type=radio].color#theme-panel-option-dark-grey::before {
  background-color: #424242;
}
dialog#theme-panel div.spacer {
  height: 2em;
}

div#dialog-background {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  cursor: pointer;
}
div#dialog-background.open {
  display: block;
}

@media (hover: none) {
  header:has(dialog#theme-panel[open]) div#dialog-background {
    display: block;
  }
}

/*# sourceMappingURL=stylesheet.css.map */