body {
  --font-size: 16px;
  --medium-size: 14px;
  --normal-weight: 400;
  --header-height: 16px;
  --content-max-width: 650px;
  --content-height: calc(100% - var(--header-height));
}

:root {
  /*
  Theme: kanagawa, Source: https://github.com/rebelot/kanagawa.nvim/blob/debe91547d7fb1eef34ce26a5106f277fbfdd109/lua/kanagawa/colors.lua
  Licensed under the MIT license: https://github.com/rebelot/kanagawa.nvim/blob/master/LICENSE
  */
  --sumiInk0: #16161d;
  --sumiInk1: #181820;
  --sumiInk2: #1a1a22;
  --sumiInk3: #1f1f28;
  --sumiInk4: #2a2a37;
  --sumiInk5: #363646;
  --sumiInk6: #54546d;
  --waveBlue1: #223249;
  --waveBlue2: #2d4f67;
  --winterGreen: #2b3328;
  --winterYellow: #49443c;
  --winterRed: #43242b;
  --winterBlue: #252535;
  --autumnGreen: #76946a;
  --autumnRed: #c34043;
  --autumnYellow: #dca561;
  --samuraiRed: #e82424;
  --roninYellow: #ff9e3b;
  --waveAqua1: #6a9589;
  --dragonBlue: #658594;
  --oldWhite: #c8c093;
  --fujiWhite: #dcd7ba;
  --fujiGray: #727169;
  --oniViolet: #957fb8;
  --oniViolet2: #b8b4d0;
  --crystalBlue: #7e9cd8;
  --springViolet1: #938aa9;
  --springViolet2: #9cabca;
  --springBlue: #7fb4ca;
  --lightBlue: #a3d4d5;
  --waveAqua2: #7aa89f;
  --waveAqua2: #68ad99;
  --waveAqua4: #7aa880;
  --waveAqua5: #6caf95;
  --waveAqua3: #68ad99;
  --springGreen: #98bb6c;
  --boatYellow1: #938056;
  --boatYellow2: #c0a36e;
  --carpYellow: #e6c384;
  --sakuraPink: #d27e99;
  --waveRed: #e46876;
  --peachRed: #ff5d62;
  --surimiOrange: #ffa066;
  --katanaGray: #717c7c;
  --dragonBlack0: #0d0c0c;
  --dragonBlack1: #12120f;
  --dragonBlack2: #1d1c19;
  --dragonBlack3: #181616;
  --dragonBlack4: #282727;
  --dragonBlack5: #393836;
  --dragonBlack6: #625e5a;
  --dragonWhite: #c5c9c5;
  --dragonGreen: #87a987;
  --dragonGreen2: #8a9a7b;
  --dragonPink: #a292a3;
  --dragonOrange: #b6927b;
  --dragonOrange2: #b98d7b;
  --dragonGray: #a6a69c;
  --dragonGray2: #9e9b93;
  --dragonGray3: #7a8382;
  --dragonBlue2: #8ba4b0;
  --dragonViolet: #8992a7;
  --dragonRed: #c4746e;
  --dragonAqua: #8ea4a2;
  --dragonAsh: #737c73;
  --dragonTeal: #949fb5;
  --dragonYellow: #c4b28a;
  --lotusInk1: #545464;
  --lotusInk2: #43436c;
  --lotusGray: #dcd7ba;
  --lotusGray2: #716e61;
  --lotusGray3: #8a8980;
  --lotusWhite0: #d5cea3;
  --lotusWhite1: #dcd5ac;
  --lotusWhite2: #e5ddb0;
  --lotusWhite3: #f2ecbc;
  --lotusWhite4: #e7dba0;
  --lotusWhite5: #e4d794;
  --lotusViolet1: #a09cac;
  --lotusViolet2: #766b90;
  --lotusViolet3: #c9cbd1;
  --lotusViolet4: #624c83;
  --lotusBlue1: #c7d7e0;
  --lotusBlue2: #b5cbd2;
  --lotusBlue3: #9fb5c9;
  --lotusBlue4: #4d699b;
  --lotusBlue5: #5d57a3;
  --lotusGreen: #6f894e;
  --lotusGreen2: #6e915f;
  --lotusGreen3: #b7d0ae;
  --lotusPink: #b35b79;
  --lotusOrange: #cc6d00;
  --lotusOrange2: #e98a00;
  --lotusYellow: #77713f;
  --lotusYellow2: #836f4a;
  --lotusYellow3: #de9800;
  --lotusYellow4: #f9d791;
  --lotusRed: #c84053;
  --lotusRed2: #d7474b;
  --lotusRed3: #e82424;
  --lotusRed4: #d9a594;
  --lotusAqua: #597b75;
  --lotusAqua2: #5e857a;
  --lotusTeal1: #4e8ca2;
  --lotusTeal2: #6693bf;
  --lotusTeal3: #5a7785;
  --lotusCyan: #d7e3d8;
  /* Theme: Kanagawa Dragon */
  --fg: var(--dragonWhite);
  --fg-dim: var(--oldWhite);
  --fg-reverse: var(--waveBlue1);
  --bg-dim: var(--dragonBlack1);
  --bg-gutter: var(--dragonBlack4);
  --bg-m3: var(--dragonBlack0);
  --bg-m2: var(--dragonBlack1);
  --bg-m1: var(--dragonBlack2);
  --bg: var(--dragonBlack3);
  --bg-p1: var(--dragonBlack4);
  --bg-p2: var(--dragonBlack5);
  --ui-special: var(--dragonGray3);
  --ui-whitespace: var(--dragonBlack6);
  --ui-nontext: var(--dragonBlack6);
  --syn-string: var(--dragonGreen2);
  --syn-variable: var(--fg);
  --syn-number: var(--dragonPink);
  --syn-constant: var(--dragonOrange);
  --syn-identifier: var(--dragonYellow);
  --syn-parameter: var(--dragonGray);
  --syn-fun: var(--dragonBlue2);
  --syn-statement: var(--dragonViolet);
  --syn-keyword: var(--dragonViolet);
  --syn-operator: var(--dragonRed);
  --syn-preproc: var(--dragonRed);
  --syn-type: var(--dragonAqua);
  --syn-regex: var(--dragonRed);
  --syn-deprecated: var(--katanaGray);
  --syn-punct: var(--dragonGray2);
  --syn-comment: var(--dragonAsh);
  --syn-special1: var(--dragonTeal);
  --syn-special2: var(--dragonRed);
  --syn-special3: var(--dragonRed);
  --diff-add: var(--winterGreen);
  --diff-delete: var(--winterRed);
  --diff-change: var(--winterBlue);
  --diff-text: var(--winterYellow);
  --diag-ok: var(--springGreen);
  --diag-error: var(--samuraiRed);
  --diag-warning: var(--roninYellow);
  --diag-info: var(--dragonBlue);
  --diag-hint: var(--waveAqua1);
  --vcs-added: var(--autumnGreen);
  --vcs-removed: var(--autumnRed);
  --vcs-changed: var(--autumnYellow);
  /* End Theme: kanagawa */
  --palette0: #0d0c0c;
  --palette1: #c4746e;
  --palette2: #8a9a7b;
  --palette3: #c4b28a;
  --palette4: #8ba4b0;
  --palette5: #a292a3;
  --palette6: #8ea4a2;
  --palette7: #c8c093;
  --palette8: #a6a69c;
  --palette9: #e46876;
  --palette10: #87a987;
  --palette11: #e6c384;
  --palette12: #7fb4ca;
  --palette13: #938aa9;
  --palette14: #7aa89f;
  --palette15: #c5c9c5;
  /* --bg1: #181616;
  --fg1: #c5c9c5; */
  --selection-background: var(--palette2);
  --selection-foreground: var(--palette0);
  --text-color: var(--fg1);
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  color: var(--fg);
  scrollbar-color: var(--palette10) var(--bg-m3);
  font-size-adjust: ex-height 0.5;
  -webkit-text-size-adjust: 100%;
}

header {
  height: var(--header-height);
  width: 100%;
  background-color: var(--palette10);
}

content {
  margin: auto;
  max-width: var(--content-max-width);
  height: var(--content-height);
  display: flex;
  flex-direction: column;
  align-content: space-between;
  justify-content: space-between;
}

@media only screen and (max-width: 320px) {
  content {
    padding: 0 1em;
    font-size: larger;
  }
}
@media only screen and (max-width: 800px) and (min-width: 321px) {
  content {
    padding: 0 2em;
  }
}
@font-face {
  font-family: "Andada Pro";
  src: url("/fonts/AndadaPro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Andada Pro";
  src: url("/fonts/AndadaPro-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Andada Pro";
  src: url("/fonts/AndadaPro-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Andada Pro";
  src: url("/fonts/AndadaPro-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Andada Pro";
  src: url("/fonts/AndadaPro-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Andada Pro";
  src: url("/fonts/AndadaPro-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Andada Pro";
  src: url("/fonts/AndadaPro-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Andada Pro";
  src: url("/fonts/AndadaPro-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Andada Pro";
  src: url("/fonts/AndadaPro-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Andada Pro";
  src: url("/fonts/AndadaPro-ExtraBoldItalic.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TX-02";
  src: url("/fonts/TX-02.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
content,
nav {
  font-family: "Andada Pro";
  font-size: var(--font-size);
  font-weight: var(--normal-weight);
  font-style: normal;
  font-feature-settings: "liga" 1, "calt" 1;
  line-height: 1.6;
}

::selection {
  background-color: var(--selection-background);
  color: var(--selection-foreground);
}

::-moz-selection {
  background-color: var(--selection-background);
  color: var(--selection-foreground);
}

a {
  color: var(--palette12);
}
a:hover, a:visited {
  color: var(--palette4);
}

.block {
  --block-highlight: var(--dragonBlue2);
  --block-header: currentColor;
  display: inline-block;
  box-sizing: border-box;
  max-width: var(--content-max-width);
  width: 100%;
  margin: 16px 0;
  background: color-mix(in srgb, currentColor 5%, transparent);
  border-left: 8px solid var(--block-highlight);
  scrollbar-color: var(--block-highlight) var(--bg-m3);
}
.block > * {
  margin-left: 16px;
  margin-right: 16px;
}
.block summary::marker {
  content: "- ";
}
.block:open summary::marker {
  content: "~ ";
}
.block h1,
.block h2,
.block h3,
.block summary {
  margin: 0;
  padding: 0 16px;
  background: color-mix(in srgb, var(--block-highlight) 30%, transparent);
  color: var(--block-header);
}
.block h1:before,
.block h2:before,
.block h3:before,
.block summary:before {
  font-family: "Phosphor-Bold" !important;
  speak: never;
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  font-feature-settings: "liga";
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 32px;
  position: relative;
  top: 2px;
}
.block ::selection {
  background-color: var(--block-highlight);
  color: var(--selection-foreground);
}
.block ::-moz-selection {
  background-color: var(--block-highlight);
  color: var(--selection-foreground);
}

.block.warning {
  --block-highlight: var(--dragonOrange);
}
.block.warning h1:before {
  padding-right: 5px;
  content: "\e4e0";
}

code {
  font-family: "TX-02", monospace;
  font-size: var(--medium-size);
  padding: 3px 8px;
  overflow-wrap: anywhere;
  background-color: var(--palette0);
  border-radius: 5px;
}

pre:has(code) {
  font-family: "TX-02", monospace;
  line-height: 1.4;
  background-color: var(--palette0);
  border-radius: 5px;
  padding: 10px 15px;
  overflow-y: auto;
}
pre:has(code) code {
  padding: unset;
  border-radius: unset;
}

.block:has(pre > code) pre {
  margin: 0 16px;
}

figure:has(pre > code) {
  margin: auto;
}
figure:has(pre > code) figcaption {
  text-align: center;
}

code > .variable {
  color: var(--fg);
  font-weight: 400;
  font-style: normal;
}
code > .variable::selection {
  background-color: var(--fg);
  color: var(--selection-foreground);
}
code > .variable::-moz-selection {
  background-color: var(--fg);
  color: var(--selection-foreground);
}

code > .variable_builtin {
  color: var(--syn-special2);
  font-weight: 400;
  font-style: italic;
}
code > .variable_builtin::selection {
  background-color: var(--syn-special2);
  color: var(--selection-foreground);
}
code > .variable_builtin::-moz-selection {
  background-color: var(--syn-special2);
  color: var(--selection-foreground);
}

code > .comment {
  color: var(--syn-comment);
  font-weight: 400;
  font-style: italic;
}
code > .comment::selection {
  background-color: var(--syn-comment);
  color: var(--selection-foreground);
}
code > .comment::-moz-selection {
  background-color: var(--syn-comment);
  color: var(--selection-foreground);
}

code > .constant,
code > .markup_math,
code > .attribute {
  color: var(--syn-constant);
  font-weight: 400;
  font-style: normal;
}
code > .constant::selection,
code > .markup_math::selection,
code > .attribute::selection {
  background-color: var(--syn-constant);
  color: var(--selection-foreground);
}
code > .constant::-moz-selection,
code > .markup_math::-moz-selection,
code > .attribute::-moz-selection {
  background-color: var(--syn-constant);
  color: var(--selection-foreground);
}

code > .string,
code > .character,
code > .markup_raw {
  color: var(--syn-string);
  font-weight: 400;
  font-style: normal;
}
code > .string::selection,
code > .character::selection,
code > .markup_raw::selection {
  background-color: var(--syn-string);
  color: var(--selection-foreground);
}
code > .string::-moz-selection,
code > .character::-moz-selection,
code > .markup_raw::-moz-selection {
  background-color: var(--syn-string);
  color: var(--selection-foreground);
}

code > .number,
code > .float {
  color: var(--syn-number);
  font-weight: 400;
  font-style: normal;
}
code > .number::selection,
code > .float::selection {
  background-color: var(--syn-number);
  color: var(--selection-foreground);
}
code > .number::-moz-selection,
code > .float::-moz-selection {
  background-color: var(--syn-number);
  color: var(--selection-foreground);
}

code > .boolean {
  color: var(--syn-constant);
  font-weight: bold;
  font-style: normal;
}
code > .boolean::selection {
  background-color: var(--syn-constant);
  color: var(--selection-foreground);
}
code > .boolean::-moz-selection {
  background-color: var(--syn-constant);
  color: var(--selection-foreground);
}

code > .identifier {
  color: var(--syn-identifier);
  font-weight: 400;
  font-style: normal;
}
code > .identifier::selection {
  background-color: var(--syn-identifier);
  color: var(--selection-foreground);
}
code > .identifier::-moz-selection {
  background-color: var(--syn-identifier);
  color: var(--selection-foreground);
}

code > .function,
code > .function_call,
code > .markup_heading {
  color: var(--syn-fun);
  font-weight: 400;
  font-style: normal;
}
code > .function::selection,
code > .function_call::selection,
code > .markup_heading::selection {
  background-color: var(--syn-fun);
  color: var(--selection-foreground);
}
code > .function::-moz-selection,
code > .function_call::-moz-selection,
code > .markup_heading::-moz-selection {
  background-color: var(--syn-fun);
  color: var(--selection-foreground);
}

code > .statement,
code > .module {
  color: var(--syn-statement);
  font-weight: 400;
  font-style: normal;
}
code > .statement::selection,
code > .module::selection {
  background-color: var(--syn-statement);
  color: var(--selection-foreground);
}
code > .statement::-moz-selection,
code > .module::-moz-selection {
  background-color: var(--syn-statement);
  color: var(--selection-foreground);
}

code > .operator {
  color: var(--syn-operator);
  font-weight: 400;
  font-style: normal;
}
code > .operator::selection {
  background-color: var(--syn-operator);
  color: var(--selection-foreground);
}
code > .operator::-moz-selection {
  background-color: var(--syn-operator);
  color: var(--selection-foreground);
}

code > .keyword,
code > .markup_environment {
  color: var(--syn-keyword);
  font-weight: 400;
  font-style: normal;
}
code > .keyword::selection,
code > .markup_environment::selection {
  background-color: var(--syn-keyword);
  color: var(--selection-foreground);
}
code > .keyword::-moz-selection,
code > .markup_environment::-moz-selection {
  background-color: var(--syn-keyword);
  color: var(--selection-foreground);
}

code > .preproc,
code > .keyword_import {
  color: var(--syn-preproc);
  font-weight: 400;
  font-style: normal;
}
code > .preproc::selection,
code > .keyword_import::selection {
  background-color: var(--syn-preproc);
  color: var(--selection-foreground);
}
code > .preproc::-moz-selection,
code > .keyword_import::-moz-selection {
  background-color: var(--syn-preproc);
  color: var(--selection-foreground);
}

code > .type,
code > .constructor.constant {
  color: var(--syn-type);
  font-weight: 400;
  font-style: normal;
}
code > .type::selection,
code > .constructor.constant::selection {
  background-color: var(--syn-type);
  color: var(--selection-foreground);
}
code > .type::-moz-selection,
code > .constructor.constant::-moz-selection {
  background-color: var(--syn-type);
  color: var(--selection-foreground);
}

code > .type_builtin,
code > .function_builtin {
  color: var(--syn-keyword);
  font-weight: 400;
  font-style: normal;
}
code > .type_builtin::selection,
code > .function_builtin::selection {
  background-color: var(--syn-keyword);
  color: var(--selection-foreground);
}
code > .type_builtin::-moz-selection,
code > .function_builtin::-moz-selection {
  background-color: var(--syn-keyword);
  color: var(--selection-foreground);
}

code > .special {
  color: var(--syn-special1);
  font-weight: 400;
  font-style: normal;
}
code > .special::selection {
  background-color: var(--syn-special1);
  color: var(--selection-foreground);
}
code > .special::-moz-selection {
  background-color: var(--syn-special1);
  color: var(--selection-foreground);
}

code > .delimiter {
  color: var(--syn-punct);
  font-weight: 400;
  font-style: normal;
}
code > .delimiter::selection {
  background-color: var(--syn-punct);
  color: var(--selection-foreground);
}
code > .delimiter::-moz-selection {
  background-color: var(--syn-punct);
  color: var(--selection-foreground);
}

code > .underlined {
  text-decoration: underline;
  color: var(--syn-special1);
  font-weight: 400;
  font-style: normal;
}
code > .underlined::selection {
  background-color: var(--syn-special1);
  color: var(--selection-foreground);
}
code > .underlined::-moz-selection {
  background-color: var(--syn-special1);
  color: var(--selection-foreground);
}

code > .bold {
  color: var(--none);
  font-weight: bold;
  font-style: normal;
}
code > .bold::selection {
  background-color: var(--none);
  color: var(--selection-foreground);
}
code > .bold::-moz-selection {
  background-color: var(--none);
  color: var(--selection-foreground);
}

code > .italic {
  color: var(--none);
  font-weight: 400;
  font-style: italic;
}
code > .italic::selection {
  background-color: var(--none);
  color: var(--selection-foreground);
}
code > .italic::-moz-selection {
  background-color: var(--none);
  color: var(--selection-foreground);
}

code > .error {
  color: var(--diag-error);
  font-weight: 400;
  font-style: normal;
}
code > .error::selection {
  background-color: var(--diag-error);
  color: var(--selection-foreground);
}
code > .error::-moz-selection {
  background-color: var(--diag-error);
  color: var(--selection-foreground);
}

code > .todo {
  background-color: var(--diag-info);
  color: var(--fg-reverse);
  font-weight: bold;
  font-style: normal;
}
code > .todo::selection {
  background-color: var(--fg-reverse);
  color: var(--selection-foreground);
}
code > .todo::-moz-selection {
  background-color: var(--fg-reverse);
  color: var(--selection-foreground);
}

code > .variable_parameter {
  color: var(--syn-parameter);
  font-weight: 400;
  font-style: normal;
}
code > .variable_parameter::selection {
  background-color: var(--syn-parameter);
  color: var(--selection-foreground);
}
code > .variable_parameter::-moz-selection {
  background-color: var(--syn-parameter);
  color: var(--selection-foreground);
}

code > .variable_member,
code > .property,
code > .tag_attribute {
  color: var(--syn-identifier);
  font-weight: 400;
  font-style: normal;
}
code > .variable_member::selection,
code > .property::selection,
code > .tag_attribute::selection {
  background-color: var(--syn-identifier);
  color: var(--selection-foreground);
}
code > .variable_member::-moz-selection,
code > .property::-moz-selection,
code > .tag_attribute::-moz-selection {
  background-color: var(--syn-identifier);
  color: var(--selection-foreground);
}

code > .string_regexp {
  color: var(--syn-regex);
  font-weight: 400;
  font-style: normal;
}
code > .string_regexp::selection {
  background-color: var(--syn-regex);
  color: var(--selection-foreground);
}
code > .string_regexp::-moz-selection {
  background-color: var(--syn-regex);
  color: var(--selection-foreground);
}

code > .string_escape {
  color: var(--syn-regex);
  font-weight: bold;
  font-style: normal;
}
code > .string_escape::selection {
  background-color: var(--syn-regex);
  color: var(--selection-foreground);
}
code > .string_escape::-moz-selection {
  background-color: var(--syn-regex);
  color: var(--selection-foreground);
}

code > .string_special_symbol {
  color: var(--syn-identifier);
  font-weight: 400;
  font-style: normal;
}
code > .string_special_symbol::selection {
  background-color: var(--syn-identifier);
  color: var(--selection-foreground);
}
code > .string_special_symbol::-moz-selection {
  background-color: var(--syn-identifier);
  color: var(--selection-foreground);
}

code > .string_special_url,
code > .markup_link_url {
  text-decoration: wavy;
  color: var(--syn-special1);
  font-weight: 400;
  font-style: normal;
}
code > .string_special_url::selection,
code > .markup_link_url::selection {
  background-color: var(--syn-special1);
  color: var(--selection-foreground);
}
code > .string_special_url::-moz-selection,
code > .markup_link_url::-moz-selection {
  background-color: var(--syn-special1);
  color: var(--selection-foreground);
}

code > .constructor {
  color: var(--syn-special1);
  font-weight: 400;
  font-style: normal;
}
code > .constructor::selection {
  background-color: var(--syn-special1);
  color: var(--selection-foreground);
}
code > .constructor::-moz-selection {
  background-color: var(--syn-special1);
  color: var(--selection-foreground);
}

code > .keyword_operator {
  color: var(--syn-operator);
  font-weight: bold;
  font-style: normal;
}
code > .keyword_operator::selection {
  background-color: var(--syn-operator);
  color: var(--selection-foreground);
}
code > .keyword_operator::-moz-selection {
  background-color: var(--syn-operator);
  color: var(--selection-foreground);
}

code > .keyword_modifier,
code > .keyword_function,
code > .keyword_type {
  color: var(--syn-keyword);
  font-weight: 400;
  font-style: italic;
}
code > .keyword_modifier::selection,
code > .keyword_function::selection,
code > .keyword_type::selection {
  background-color: var(--syn-keyword);
  color: var(--selection-foreground);
}
code > .keyword_modifier::-moz-selection,
code > .keyword_function::-moz-selection,
code > .keyword_type::-moz-selection {
  background-color: var(--syn-keyword);
  color: var(--selection-foreground);
}

code > .keyword_return {
  color: var(--syn-special3);
  font-weight: 400;
  font-style: italic;
}
code > .keyword_return::selection {
  background-color: var(--syn-special3);
  color: var(--selection-foreground);
}
code > .keyword_return::-moz-selection {
  background-color: var(--syn-special3);
  color: var(--selection-foreground);
}

code > .keyword_conditional {
  color: var(--syn-keyword);
  font-weight: 400;
  font-style: italic;
}
code > .keyword_conditional::selection {
  background-color: var(--syn-keyword);
  color: var(--selection-foreground);
}
code > .keyword_conditional::-moz-selection {
  background-color: var(--syn-keyword);
  color: var(--selection-foreground);
}

code > .keyword_exception {
  color: var(--syn-special3);
  font-weight: bold;
  font-style: normal;
}
code > .keyword_exception::selection {
  background-color: var(--syn-special3);
  color: var(--selection-foreground);
}
code > .keyword_exception::-moz-selection {
  background-color: var(--syn-special3);
  color: var(--selection-foreground);
}

code > .punctuation_delimiter,
code > .punctuation_bracket,
code > .tag_delimiter {
  color: var(--syn-punct);
  font-weight: 400;
  font-style: normal;
}
code > .punctuation_delimiter::selection,
code > .punctuation_bracket::selection,
code > .tag_delimiter::selection {
  background-color: var(--syn-punct);
  color: var(--selection-foreground);
}
code > .punctuation_delimiter::-moz-selection,
code > .punctuation_bracket::-moz-selection,
code > .tag_delimiter::-moz-selection {
  background-color: var(--syn-punct);
  color: var(--selection-foreground);
}

code > .punctuation_special {
  color: var(--syn-special1);
  font-weight: 400;
  font-style: normal;
}
code > .punctuation_special::selection {
  background-color: var(--syn-special1);
  color: var(--selection-foreground);
}
code > .punctuation_special::-moz-selection {
  background-color: var(--syn-special1);
  color: var(--selection-foreground);
}

code > .comment_error {
  background-color: var(--diag-error);
  color: var(--fg);
  font-weight: bold;
  font-style: normal;
}
code > .comment_error::selection {
  background-color: var(--fg);
  color: var(--selection-foreground);
}
code > .comment_error::-moz-selection {
  background-color: var(--fg);
  color: var(--selection-foreground);
}

code > .comment_warning {
  background-color: var(--diag-warning);
  color: var(--fg);
  font-weight: bold;
  font-style: normal;
}
code > .comment_warning::selection {
  background-color: var(--fg);
  color: var(--selection-foreground);
}
code > .comment_warning::-moz-selection {
  background-color: var(--fg);
  color: var(--selection-foreground);
}

code > .comment_note {
  color: var(--fg);
  background-color: var(--diag-hint);
  font-weight: bold;
  color: var(--syn-constant);
  font-weight: 400;
  font-style: normal;
}
code > .comment_note::selection {
  background-color: var(--syn-constant);
  color: var(--selection-foreground);
}
code > .comment_note::-moz-selection {
  background-color: var(--syn-constant);
  color: var(--selection-foreground);
}

code > .markup_strong {
  color: var(--none);
  font-weight: bold;
  font-style: normal;
}
code > .markup_strong::selection {
  background-color: var(--none);
  color: var(--selection-foreground);
}
code > .markup_strong::-moz-selection {
  background-color: var(--none);
  color: var(--selection-foreground);
}

code > .markup_italic {
  color: var(--none);
  font-weight: 400;
  font-style: italic;
}
code > .markup_italic::selection {
  background-color: var(--none);
  color: var(--selection-foreground);
}
code > .markup_italic::-moz-selection {
  background-color: var(--none);
  color: var(--selection-foreground);
}
code > .markup_italic::selection {
  background-color: var(--selection-background);
  color: var(--selection-foreground);
}
code > .markup_italic::-moz-selection {
  background-color: var(--selection-background);
  color: var(--selection-foreground);
}

code > .markup_strikethrough {
  text-decoration: line-through;
}

code > .markup_quote {
  color: var(--syn-parameter);
  font-weight: 400;
  font-style: normal;
}
code > .markup_quote::selection {
  background-color: var(--syn-parameter);
  color: var(--selection-foreground);
}
code > .markup_quote::-moz-selection {
  background-color: var(--syn-parameter);
  color: var(--selection-foreground);
}

code > .diff_plus {
  color: var(--syn-added);
  font-weight: 400;
  font-style: normal;
}
code > .diff_plus::selection {
  background-color: var(--syn-added);
  color: var(--selection-foreground);
}
code > .diff_plus::-moz-selection {
  background-color: var(--syn-added);
  color: var(--selection-foreground);
}

code > .diff_minus {
  color: var(--syn-removed);
  font-weight: 400;
  font-style: normal;
}
code > .diff_minus::selection {
  background-color: var(--syn-removed);
  color: var(--selection-foreground);
}
code > .diff_minus::-moz-selection {
  background-color: var(--syn-removed);
  color: var(--selection-foreground);
}

code > .diff_delta {
  color: var(--syn-changed);
  font-weight: 400;
  font-style: normal;
}
code > .diff_delta::selection {
  background-color: var(--syn-changed);
  color: var(--selection-foreground);
}
code > .diff_delta::-moz-selection {
  background-color: var(--syn-changed);
  color: var(--selection-foreground);
}

figure {
  max-width: var(--content-max-width);
  overflow-y: auto;
  text-align: center;
  margin: 1em 0;
}
figure > * {
  max-width: var(--content-max-width);
  width: 90%;
  height: auto;
}
figure img {
  resize: "horizontal";
  object-fit: scale-down;
}
figure svg {
  overflow: hidden;
  resize: "horizontal";
  color: var(--text-color);
}

.footnotes .back a {
  text-decoration: none;
}
.footnotes .back .ph-bold {
  font-size: 32px;
  position: relative;
  top: 2px;
}

footer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  padding: 2em 0;
  overflow-wrap: anywhere;
  font-family: "TX-02", monospace;
  font-size: 16px;
  text-decoration: none;
  color: var(--text-color);
}
footer h2 {
  font-size: 24px;
  margin: 5px 0;
}
footer h2 a,
footer h2 a:visited {
  text-decoration: none;
  color: var(--text-color);
}
footer .socials ul {
  list-style: none;
  padding: 0;
  display: flex;
  line-height: normal;
}
footer .socials ul li {
  padding-right: 15px;
  font-size: 14px;
}
footer #copyright {
  font-size: 0.8rem;
  align-self: end;
}

.socials {
  display: flex;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.socials .icon {
  width: 20px;
  height: 20px;
  color: var(--arc-palette-maxContrastColor, #000);
  text-decoration: none;
}

.email {
  display: block;
  width: 28px !important;
  height: 28px !important;
}

.sourcehut-logo {
  display: block;
}

.github-logo {
  padding: 3px;
  background-color: white;
  border-radius: 5px;
}
.github-logo img {
  width: 20px;
  height: 20px;
}

nav {
  margin: 0.25em 1em -1em 1em;
}
nav .back {
  text-decoration: none;
}
nav .back .ph-bold {
  font-size: 32px;
  position: relative;
  top: 2px;
}

table {
  display: block;
  overflow-x: unset;
  overflow-y: auto;
  border-spacing: 0;
  border-collapse: collapse;
}
table tr:nth-child(even) {
  background-color: var(--bg-dim);
  border: unset;
}
table td,
table th {
  padding: 3px 8px;
}