:root {
  --border-radius: 5px;
}

:root:not([data-theme=dark]) {
  --page-bg-color: #f7f7f7;
  --content-bg-color: white;
  --tr-0-bg-color: rgb(74 153 255 / 20%);
  --tr-1-bg-color: transparent;
  --table-border-color: var(--accent-color-darker);
  --accent-color: rgb(74, 153, 255);
  --accent-color-transparent: rgb(74, 153, 255, 30%);
  --accent-color-darker: rgb(48, 108, 185);
  --muted-color: rgb(130, 130, 130);
  --nav-home-link-color: white;
  --nav-link-color: var(--text-main);
  --nav-marker-color: var(--accent-color);
  --background-darker: #ddd;
  --background-body: var(--page-bg-color);
  --background: #eaeaea;
  --border: #ddd;
  --button-base: var(--background);
  --button-hover: #ddd;
  --text-main: #222;
  --text-bright: #000;
  --text-muted: var(--muted-color);
  --selection: #1c76c540;
  --focus: var(--accent-color);
  --nav-hover-bg-color: transparent;
  --nav-hover-shadow-color: #0002;
}
:root:not([data-theme=dark]) pre {
  line-height: 125%;
}
:root:not([data-theme=dark]) td.linenos .normal {
  color: inherit;
  background-color: transparent;
  padding-left: 5px;
  padding-right: 5px;
}
:root:not([data-theme=dark]) span.linenos {
  color: inherit;
  background-color: transparent;
  padding-left: 5px;
  padding-right: 5px;
}
:root:not([data-theme=dark]) td.linenos .special {
  color: #000000;
  background-color: #ffffc0;
  padding-left: 5px;
  padding-right: 5px;
}
:root:not([data-theme=dark]) span.linenos.special {
  color: #000000;
  background-color: #ffffc0;
  padding-left: 5px;
  padding-right: 5px;
}
:root:not([data-theme=dark]) .highlight .hll {
  background-color: #ffffcc;
}
:root:not([data-theme=dark]) .highlight .k {
  color: #cc371d;
}
:root:not([data-theme=dark]) {
  /* Keyword */
}
:root:not([data-theme=dark]) .highlight .l {
  color: rgb(60, 122, 60);
}
:root:not([data-theme=dark]) {
  /* Literal */
}
:root:not([data-theme=dark]) .highlight .c {
  color: #888;
}
:root:not([data-theme=dark]) .highlight .ch {
  color: #888;
}
:root:not([data-theme=dark]) {
  /* Comment.Hashbang */
}
:root:not([data-theme=dark]) .highlight .cm {
  color: #888;
}
:root:not([data-theme=dark]) {
  /* Comment.Multiline */
}
:root:not([data-theme=dark]) .highlight .cp {
  color: #cc371d;
}
:root:not([data-theme=dark]) {
  /* Comment.Preproc */
}
:root:not([data-theme=dark]) .highlight .c1 {
  color: #888;
}
:root:not([data-theme=dark]) {
  /* Comment.Single */
}
:root:not([data-theme=dark]) .highlight .cs {
  color: #888;
}
:root:not([data-theme=dark]) {
  /* Comment.Special */
}
:root:not([data-theme=dark]) .highlight .kc {
  color: #cc371d;
}
:root:not([data-theme=dark]) {
  /* Keyword.Constant */
}
:root:not([data-theme=dark]) .highlight .kd {
  color: #cc371d;
}
:root:not([data-theme=dark]) {
  /* Keyword.Declaration */
}
:root:not([data-theme=dark]) .highlight .kn {
  color: #cc371d;
}
:root:not([data-theme=dark]) {
  /* Keyword.Namespace */
}
:root:not([data-theme=dark]) .highlight .kp {
  color: #cc371d;
}
:root:not([data-theme=dark]) {
  /* Keyword.Pseudo */
}
:root:not([data-theme=dark]) .highlight .kr {
  color: #cc371d;
}
:root:not([data-theme=dark]) {
  /* Keyword.Reserved */
}
:root:not([data-theme=dark]) .highlight .kt {
  color: #cc371d;
}
:root:not([data-theme=dark]) {
  /* Keyword.Type */
}
:root:not([data-theme=dark]) .highlight .ld {
  color: rgb(60, 122, 60);
}
:root:not([data-theme=dark]) {
  /* Literal.Date */
}
:root:not([data-theme=dark]) .highlight .m {
  color: rgb(60, 122, 60);
}
:root:not([data-theme=dark]) {
  /* Literal.Number */
}
:root:not([data-theme=dark]) .highlight .s {
  color: rgb(60, 122, 60);
}
:root:not([data-theme=dark]) {
  /* Literal.String */
}
:root:not([data-theme=dark]) .highlight .ow {
  color: #cc371d;
}
:root:not([data-theme=dark]) {
  /* Operator.Word */
}
:root:not([data-theme=dark]) .highlight .mb {
  color: rgb(60, 122, 60);
}
:root:not([data-theme=dark]) {
  /* Literal.Number.Bin */
}
:root:not([data-theme=dark]) .highlight .mf {
  color: rgb(60, 122, 60);
}
:root:not([data-theme=dark]) {
  /* Literal.Number.Float */
}
:root:not([data-theme=dark]) .highlight .mh {
  color: rgb(60, 122, 60);
}
:root:not([data-theme=dark]) {
  /* Literal.Number.Hex */
}
:root:not([data-theme=dark]) .highlight .mi {
  color: rgb(60, 122, 60);
}
:root:not([data-theme=dark]) {
  /* Literal.Number.Integer */
}
:root:not([data-theme=dark]) .highlight .mo {
  color: rgb(60, 122, 60);
}
:root:not([data-theme=dark]) {
  /* Literal.Number.Oct */
}
:root:not([data-theme=dark]) .highlight .sa {
  color: rgb(60, 122, 60);
}
:root:not([data-theme=dark]) {
  /* Literal.String.Affix */
}
:root:not([data-theme=dark]) .highlight .sb {
  color: rgb(60, 122, 60);
}
:root:not([data-theme=dark]) {
  /* Literal.String.Backtick */
}
:root:not([data-theme=dark]) .highlight .sc {
  color: rgb(60, 122, 60);
}
:root:not([data-theme=dark]) {
  /* Literal.String.Char */
}
:root:not([data-theme=dark]) .highlight .dl {
  color: rgb(60, 122, 60);
}
:root:not([data-theme=dark]) {
  /* Literal.String.Delimiter */
}
:root:not([data-theme=dark]) .highlight .sd {
  color: rgb(60, 122, 60);
}
:root:not([data-theme=dark]) {
  /* Literal.String.Doc */
}
:root:not([data-theme=dark]) .highlight .s2 {
  color: rgb(60, 122, 60);
}
:root:not([data-theme=dark]) {
  /* Literal.String.Double */
}
:root:not([data-theme=dark]) .highlight .se {
  color: rgb(150, 150, 60);
}
:root:not([data-theme=dark]) {
  /* Literal.String.Escape */
}
:root:not([data-theme=dark]) .highlight .sh {
  color: rgb(60, 122, 60);
}
:root:not([data-theme=dark]) {
  /* Literal.String.Heredoc */
}
:root:not([data-theme=dark]) .highlight .si {
  color: rgb(60, 122, 60);
}
:root:not([data-theme=dark]) {
  /* Literal.String.Interpol */
}
:root:not([data-theme=dark]) .highlight .sx {
  color: rgb(60, 122, 60);
}
:root:not([data-theme=dark]) {
  /* Literal.String.Other */
}
:root:not([data-theme=dark]) .highlight .sr {
  color: rgb(60, 122, 60);
}
:root:not([data-theme=dark]) {
  /* Literal.String.Regex */
}
:root:not([data-theme=dark]) .highlight .s1 {
  color: rgb(60, 122, 60);
}
:root:not([data-theme=dark]) {
  /* Literal.String.Single */
}
:root:not([data-theme=dark]) .highlight .ss {
  color: rgb(60, 122, 60);
}
:root:not([data-theme=dark]) {
  /* Literal.String.Symbol */
}
:root:not([data-theme=dark]) .highlight .il {
  color: rgb(60, 122, 60);
}
:root:not([data-theme=dark]) {
  /* Literal.Number.Integer.Long */
}
:root:not([data-theme=dark]) .hide-in-light-mode {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
}
:root:not([data-theme=dark]) #theme-switcher .hide-in-light-mode {
  transition: transform ease-out 0.2s, opacity ease-out 0.1s !important;
  transform: scale(0) !important;
}

:root[data-theme=dark] {
  --page-bg-color: #1a1a1a;
  --content-bg-color: #141414;
  --tr-0-bg-color: rgb(74 153 255 / 20%);
  --tr-1-bg-color: transparent;
  --table-border-color: var(--accent-color-darker);
  --accent-color: rgb(74, 153, 255);
  --accent-color-transparent: rgb(74, 153, 255, 30%);
  --accent-color-darker: rgb(79, 139, 217);
  --muted-color: #888;
  --nav-home-link-color: white;
  --nav-link-color: var(--text-main);
  --nav-marker-color: var(--accent-color);
  --background-darker: #252525;
  --background-body: var(--page-bg-color);
  --background: #101010;
  --border: #252525;
  --button-base: var(--background);
  --button-hover: #4d4d4d;
  --text-main: #dddddd;
  --text-bright: #dddddd;
  --text-muted: var(--muted-color);
  --selection: #30485ed0;
  --focus: var(--accent-color);
  --code: var(--text-main);
  --nav-hover-bg-color: #3338;
  --nav-hover-shadow-color: #0009;
}
:root[data-theme=dark] pre {
  line-height: 125%;
}
:root[data-theme=dark] td.linenos .normal {
  color: inherit;
  background-color: transparent;
  padding-left: 5px;
  padding-right: 5px;
}
:root[data-theme=dark] span.linenos {
  color: inherit;
  background-color: transparent;
  padding-left: 5px;
  padding-right: 5px;
}
:root[data-theme=dark] td.linenos .special {
  color: #000000;
  background-color: #ffffc0;
  padding-left: 5px;
  padding-right: 5px;
}
:root[data-theme=dark] span.linenos.special {
  color: #000000;
  background-color: #ffffc0;
  padding-left: 5px;
  padding-right: 5px;
}
:root[data-theme=dark] .highlight .hll {
  background-color: #49483e;
}
:root[data-theme=dark] .highlight .k {
  color: #ff7d67;
}
:root[data-theme=dark] {
  /* Keyword */
}
:root[data-theme=dark] .highlight .l {
  color: rgb(120, 206, 120);
}
:root[data-theme=dark] {
  /* Literal */
}
:root[data-theme=dark] .highlight .c {
  color: #777;
}
:root[data-theme=dark] .highlight .ch {
  color: #777;
}
:root[data-theme=dark] {
  /* Comment.Hashbang */
}
:root[data-theme=dark] .highlight .cm {
  color: #777;
}
:root[data-theme=dark] {
  /* Comment.Multiline */
}
:root[data-theme=dark] .highlight .cp {
  color: #ff7d67;
}
:root[data-theme=dark] {
  /* Comment.Preproc */
}
:root[data-theme=dark] .highlight .c1 {
  color: #777;
}
:root[data-theme=dark] {
  /* Comment.Single */
}
:root[data-theme=dark] .highlight .cs {
  color: #777;
}
:root[data-theme=dark] {
  /* Comment.Special */
}
:root[data-theme=dark] .highlight .kc {
  color: #ff7d67;
}
:root[data-theme=dark] {
  /* Keyword.Constant */
}
:root[data-theme=dark] .highlight .kd {
  color: #ff7d67;
}
:root[data-theme=dark] {
  /* Keyword.Declaration */
}
:root[data-theme=dark] .highlight .kn {
  color: #ff7d67;
}
:root[data-theme=dark] {
  /* Keyword.Namespace */
}
:root[data-theme=dark] .highlight .kp {
  color: #ff7d67;
}
:root[data-theme=dark] {
  /* Keyword.Pseudo */
}
:root[data-theme=dark] .highlight .kr {
  color: #ff7d67;
}
:root[data-theme=dark] {
  /* Keyword.Reserved */
}
:root[data-theme=dark] .highlight .kt {
  color: #ff7d67;
}
:root[data-theme=dark] {
  /* Keyword.Type */
}
:root[data-theme=dark] .highlight .ld {
  color: rgb(120, 206, 120);
}
:root[data-theme=dark] {
  /* Literal.Date */
}
:root[data-theme=dark] .highlight .m {
  color: rgb(120, 206, 120);
}
:root[data-theme=dark] {
  /* Literal.Number */
}
:root[data-theme=dark] .highlight .s {
  color: rgb(120, 206, 120);
}
:root[data-theme=dark] {
  /* Literal.String */
}
:root[data-theme=dark] .highlight .ow {
  color: #ff7d67;
}
:root[data-theme=dark] {
  /* Operator.Word */
}
:root[data-theme=dark] .highlight .mb {
  color: rgb(120, 206, 120);
}
:root[data-theme=dark] {
  /* Literal.Number.Bin */
}
:root[data-theme=dark] .highlight .mf {
  color: rgb(120, 206, 120);
}
:root[data-theme=dark] {
  /* Literal.Number.Float */
}
:root[data-theme=dark] .highlight .mh {
  color: rgb(120, 206, 120);
}
:root[data-theme=dark] {
  /* Literal.Number.Hex */
}
:root[data-theme=dark] .highlight .mi {
  color: rgb(120, 206, 120);
}
:root[data-theme=dark] {
  /* Literal.Number.Integer */
}
:root[data-theme=dark] .highlight .mo {
  color: rgb(120, 206, 120);
}
:root[data-theme=dark] {
  /* Literal.Number.Oct */
}
:root[data-theme=dark] .highlight .sa {
  color: rgb(120, 206, 120);
}
:root[data-theme=dark] {
  /* Literal.String.Affix */
}
:root[data-theme=dark] .highlight .sb {
  color: rgb(120, 206, 120);
}
:root[data-theme=dark] {
  /* Literal.String.Backtick */
}
:root[data-theme=dark] .highlight .sc {
  color: rgb(120, 206, 120);
}
:root[data-theme=dark] {
  /* Literal.String.Char */
}
:root[data-theme=dark] .highlight .dl {
  color: rgb(120, 206, 120);
}
:root[data-theme=dark] {
  /* Literal.String.Delimiter */
}
:root[data-theme=dark] .highlight .sd {
  color: rgb(120, 206, 120);
}
:root[data-theme=dark] {
  /* Literal.String.Doc */
}
:root[data-theme=dark] .highlight .s2 {
  color: rgb(120, 206, 120);
}
:root[data-theme=dark] {
  /* Literal.String.Double */
}
:root[data-theme=dark] .highlight .se {
  color: rgb(250, 206, 120);
}
:root[data-theme=dark] {
  /* Literal.String.Escape */
}
:root[data-theme=dark] .highlight .sh {
  color: rgb(120, 206, 120);
}
:root[data-theme=dark] {
  /* Literal.String.Heredoc */
}
:root[data-theme=dark] .highlight .si {
  color: rgb(120, 206, 120);
}
:root[data-theme=dark] {
  /* Literal.String.Interpol */
}
:root[data-theme=dark] .highlight .sx {
  color: rgb(120, 206, 120);
}
:root[data-theme=dark] {
  /* Literal.String.Other */
}
:root[data-theme=dark] .highlight .sr {
  color: rgb(120, 206, 120);
}
:root[data-theme=dark] {
  /* Literal.String.Regex */
}
:root[data-theme=dark] .highlight .s1 {
  color: rgb(120, 206, 120);
}
:root[data-theme=dark] {
  /* Literal.String.Single */
}
:root[data-theme=dark] .highlight .ss {
  color: rgb(120, 206, 120);
}
:root[data-theme=dark] {
  /* Literal.String.Symbol */
}
:root[data-theme=dark] .highlight .il {
  color: rgb(120, 206, 120);
}
:root[data-theme=dark] {
  /* Literal.Number.Integer.Long */
}
:root[data-theme=dark] .hide-in-dark-mode {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
}
:root[data-theme=dark] #theme-switcher .hide-in-dark-mode {
  transition: transform ease-out 0.2s, opacity ease-out 0.1s !important;
  transform: scale(0) !important;
}
:root[data-theme=dark] #spice-canvas {
  opacity: 80%;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme=auto] {
    --page-bg-color: #1a1a1a;
    --content-bg-color: #141414;
    --tr-0-bg-color: rgb(74 153 255 / 20%);
    --tr-1-bg-color: transparent;
    --table-border-color: var(--accent-color-darker);
    --accent-color: rgb(74, 153, 255);
    --accent-color-transparent: rgb(74, 153, 255, 30%);
    --accent-color-darker: rgb(79, 139, 217);
    --muted-color: #888;
    --nav-home-link-color: white;
    --nav-link-color: var(--text-main);
    --nav-marker-color: var(--accent-color);
    --background-darker: #252525;
    --background-body: var(--page-bg-color);
    --background: #101010;
    --border: #252525;
    --button-base: var(--background);
    --button-hover: #4d4d4d;
    --text-main: #dddddd;
    --text-bright: #dddddd;
    --text-muted: var(--muted-color);
    --selection: #30485ed0;
    --focus: var(--accent-color);
    --code: var(--text-main);
    --nav-hover-bg-color: #3338;
    --nav-hover-shadow-color: #0009;
  }
  :root[data-theme=auto] pre {
    line-height: 125%;
  }
  :root[data-theme=auto] td.linenos .normal {
    color: inherit;
    background-color: transparent;
    padding-left: 5px;
    padding-right: 5px;
  }
  :root[data-theme=auto] span.linenos {
    color: inherit;
    background-color: transparent;
    padding-left: 5px;
    padding-right: 5px;
  }
  :root[data-theme=auto] td.linenos .special {
    color: #000000;
    background-color: #ffffc0;
    padding-left: 5px;
    padding-right: 5px;
  }
  :root[data-theme=auto] span.linenos.special {
    color: #000000;
    background-color: #ffffc0;
    padding-left: 5px;
    padding-right: 5px;
  }
  :root[data-theme=auto] .highlight .hll {
    background-color: #49483e;
  }
  :root[data-theme=auto] .highlight .k {
    color: #ff7d67;
  }
  :root[data-theme=auto] {
    /* Keyword */
  }
  :root[data-theme=auto] .highlight .l {
    color: rgb(120, 206, 120);
  }
  :root[data-theme=auto] {
    /* Literal */
  }
  :root[data-theme=auto] .highlight .c {
    color: #777;
  }
  :root[data-theme=auto] .highlight .ch {
    color: #777;
  }
  :root[data-theme=auto] {
    /* Comment.Hashbang */
  }
  :root[data-theme=auto] .highlight .cm {
    color: #777;
  }
  :root[data-theme=auto] {
    /* Comment.Multiline */
  }
  :root[data-theme=auto] .highlight .cp {
    color: #ff7d67;
  }
  :root[data-theme=auto] {
    /* Comment.Preproc */
  }
  :root[data-theme=auto] .highlight .c1 {
    color: #777;
  }
  :root[data-theme=auto] {
    /* Comment.Single */
  }
  :root[data-theme=auto] .highlight .cs {
    color: #777;
  }
  :root[data-theme=auto] {
    /* Comment.Special */
  }
  :root[data-theme=auto] .highlight .kc {
    color: #ff7d67;
  }
  :root[data-theme=auto] {
    /* Keyword.Constant */
  }
  :root[data-theme=auto] .highlight .kd {
    color: #ff7d67;
  }
  :root[data-theme=auto] {
    /* Keyword.Declaration */
  }
  :root[data-theme=auto] .highlight .kn {
    color: #ff7d67;
  }
  :root[data-theme=auto] {
    /* Keyword.Namespace */
  }
  :root[data-theme=auto] .highlight .kp {
    color: #ff7d67;
  }
  :root[data-theme=auto] {
    /* Keyword.Pseudo */
  }
  :root[data-theme=auto] .highlight .kr {
    color: #ff7d67;
  }
  :root[data-theme=auto] {
    /* Keyword.Reserved */
  }
  :root[data-theme=auto] .highlight .kt {
    color: #ff7d67;
  }
  :root[data-theme=auto] {
    /* Keyword.Type */
  }
  :root[data-theme=auto] .highlight .ld {
    color: rgb(120, 206, 120);
  }
  :root[data-theme=auto] {
    /* Literal.Date */
  }
  :root[data-theme=auto] .highlight .m {
    color: rgb(120, 206, 120);
  }
  :root[data-theme=auto] {
    /* Literal.Number */
  }
  :root[data-theme=auto] .highlight .s {
    color: rgb(120, 206, 120);
  }
  :root[data-theme=auto] {
    /* Literal.String */
  }
  :root[data-theme=auto] .highlight .ow {
    color: #ff7d67;
  }
  :root[data-theme=auto] {
    /* Operator.Word */
  }
  :root[data-theme=auto] .highlight .mb {
    color: rgb(120, 206, 120);
  }
  :root[data-theme=auto] {
    /* Literal.Number.Bin */
  }
  :root[data-theme=auto] .highlight .mf {
    color: rgb(120, 206, 120);
  }
  :root[data-theme=auto] {
    /* Literal.Number.Float */
  }
  :root[data-theme=auto] .highlight .mh {
    color: rgb(120, 206, 120);
  }
  :root[data-theme=auto] {
    /* Literal.Number.Hex */
  }
  :root[data-theme=auto] .highlight .mi {
    color: rgb(120, 206, 120);
  }
  :root[data-theme=auto] {
    /* Literal.Number.Integer */
  }
  :root[data-theme=auto] .highlight .mo {
    color: rgb(120, 206, 120);
  }
  :root[data-theme=auto] {
    /* Literal.Number.Oct */
  }
  :root[data-theme=auto] .highlight .sa {
    color: rgb(120, 206, 120);
  }
  :root[data-theme=auto] {
    /* Literal.String.Affix */
  }
  :root[data-theme=auto] .highlight .sb {
    color: rgb(120, 206, 120);
  }
  :root[data-theme=auto] {
    /* Literal.String.Backtick */
  }
  :root[data-theme=auto] .highlight .sc {
    color: rgb(120, 206, 120);
  }
  :root[data-theme=auto] {
    /* Literal.String.Char */
  }
  :root[data-theme=auto] .highlight .dl {
    color: rgb(120, 206, 120);
  }
  :root[data-theme=auto] {
    /* Literal.String.Delimiter */
  }
  :root[data-theme=auto] .highlight .sd {
    color: rgb(120, 206, 120);
  }
  :root[data-theme=auto] {
    /* Literal.String.Doc */
  }
  :root[data-theme=auto] .highlight .s2 {
    color: rgb(120, 206, 120);
  }
  :root[data-theme=auto] {
    /* Literal.String.Double */
  }
  :root[data-theme=auto] .highlight .se {
    color: rgb(250, 206, 120);
  }
  :root[data-theme=auto] {
    /* Literal.String.Escape */
  }
  :root[data-theme=auto] .highlight .sh {
    color: rgb(120, 206, 120);
  }
  :root[data-theme=auto] {
    /* Literal.String.Heredoc */
  }
  :root[data-theme=auto] .highlight .si {
    color: rgb(120, 206, 120);
  }
  :root[data-theme=auto] {
    /* Literal.String.Interpol */
  }
  :root[data-theme=auto] .highlight .sx {
    color: rgb(120, 206, 120);
  }
  :root[data-theme=auto] {
    /* Literal.String.Other */
  }
  :root[data-theme=auto] .highlight .sr {
    color: rgb(120, 206, 120);
  }
  :root[data-theme=auto] {
    /* Literal.String.Regex */
  }
  :root[data-theme=auto] .highlight .s1 {
    color: rgb(120, 206, 120);
  }
  :root[data-theme=auto] {
    /* Literal.String.Single */
  }
  :root[data-theme=auto] .highlight .ss {
    color: rgb(120, 206, 120);
  }
  :root[data-theme=auto] {
    /* Literal.String.Symbol */
  }
  :root[data-theme=auto] .highlight .il {
    color: rgb(120, 206, 120);
  }
  :root[data-theme=auto] {
    /* Literal.Number.Integer.Long */
  }
  :root[data-theme=auto] .hide-in-dark-mode {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
  }
  :root[data-theme=auto] #theme-switcher .hide-in-dark-mode {
    transition: transform ease-out 0.2s, opacity ease-out 0.1s !important;
    transform: scale(0) !important;
  }
  :root[data-theme=auto] #spice-canvas {
    opacity: 80%;
  }
}
@media (max-width: 600px) {
  :root {
    --content-horizontal-padding: 1rem !important;
  }
  body {
    padding: 0;
  }
  nav > ul li a {
    padding: 0.3em 0 !important;
  }
}
@media (max-width: 750px) {
  footer {
    flex-direction: column !important;
  }
  footer .surprise {
    display: block !important;
  }
}
* {
  transition: opacity linear 0.2s, background-color linear 0.2s, border-color linear 0.2s, color linear 0.2s, scrollbar-color linear 0.2s;
}

:root {
  --content-horizontal-padding: 2rem;
  --grid-gap: 1rem;
  min-height: 100vh;
  display: flex;
}

body {
  margin: auto;
  width: 750px;
  max-width: 100%;
  box-sizing: border-box;
  background-color: var(--page-bg-color);
}

header {
  padding: 0 var(--content-horizontal-padding);
}
header nav > ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
  padding: 0;
}
header nav > ul a {
  text-decoration: none !important;
}
header nav > ul div.shell {
  display: flex;
  align-items: center;
  gap: 1em;
}
header nav > ul h1, header nav > ul > li {
  border-radius: var(--border-radius);
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0;
  transition: transform 0.2s ease;
  transform-origin: top left;
}
header nav > ul h1 {
  padding: 0;
}
header nav > ul h1 > a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 5px;
  color: var(--text) !important;
  background: none !important;
}
header nav > ul > li {
  position: relative;
}
header nav > ul > li::marker {
  content: "~/";
  color: var(--nav-marker-color);
}
header nav > ul > li::before {
  content: "";
  position: absolute;
  left: -1.7rem;
  right: -0.6rem;
  top: 0px;
  bottom: 0px;
  border-radius: 10px;
  z-index: -1;
  pointer-events: none;
  transition: all 0.2s ease;
  border: transparent solid 1px;
}
header nav > ul > li {
  transform-origin: center;
}
header nav > ul > li:has(a:hover)::before {
  box-shadow: 0 1px 4px 0 var(--nav-hover-shadow-color);
  border: var(--background-darker) solid 1px;
  background-color: var(--nav-hover-bg-color);
}
header nav > ul > li > a {
  color: var(--nav-link-color);
  background: none !important;
  padding: 5px 0;
  margin: auto;
  display: block;
}

#main-grid {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
  width: 100%;
  font-family: "Source Serif 4", serif;
}
#main-grid #content-grid-item {
  padding: 0 var(--content-horizontal-padding);
  font-size: 1.1em;
}
#main-grid #content-grid-item h1, #main-grid #content-grid-item h2, #main-grid #content-grid-item h3, #main-grid #content-grid-item h4, #main-grid #content-grid-item h5, #main-grid #content-grid-item h6 {
  margin-top: 4rem;
  font-family: "Source Sans 3", sans-serif;
}
#main-grid #content-grid-item h1 {
  font-size: 1.9em;
}
#main-grid #content-grid-item h2 {
  font-size: 1.7em;
}
#main-grid #content-grid-item h3, #main-grid #content-grid-item h4, #main-grid #content-grid-item h5, #main-grid #content-grid-item h6 {
  font-size: 1.4em;
}
#main-grid #content-grid-item ul {
  line-height: 150%;
}
#main-grid #content-grid-item ul code {
  padding: 1px 3px;
}
#main-grid #content-grid-item li {
  margin: 5px 0;
}
#main-grid #content-grid-item img {
  margin: 2rem auto;
}
#main-grid #content-grid-item .comments {
  margin-top: 4rem;
}
#main-grid #nav-header-grid-item {
  margin-top: var(--grid-gap);
  font-family: "Iosevka Web", "Iosevka Term", monospace;
  display: flex;
  justify-content: space-between;
}
#main-grid #nav-header-grid-item #theme-switcher {
  margin: auto 0;
  padding: 0;
  height: 40px;
  width: 40px;
  box-sizing: content-box;
  display: flex;
  justify-content: center;
  align-items: center;
  fill: var(--text-bright);
  box-shadow: none;
  background: none;
}
#main-grid #nav-header-grid-item #theme-switcher:hover > div {
  background: var(--button-hover);
}
#main-grid #nav-header-grid-item #theme-switcher > div {
  width: 100%;
  height: 100%;
  border-radius: 10000000000px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.3s, opacity ease 0.2s, opacity linear 0.2s, background-color linear 0.2s, border-color linear 0.2s, color linear 0.2s, scrollbar-color linear 0.2s;
}
#main-grid #nav-header-grid-item #theme-switcher > div > span {
  position: relative;
  height: 24px;
  width: 24px;
}
#main-grid #nav-header-grid-item #theme-switcher > div svg {
  transition: transform cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.3s, opacity ease 0.2s, opacity linear 0.2s, background-color linear 0.2s, border-color linear 0.2s, color linear 0.2s, scrollbar-color linear 0.2s;
  transform: scale(0.9);
}
#main-grid #nav-header-grid-item #theme-switcher > div svg.hide-in-dark-mode {
  transform: scale(0.9) rotate(135deg);
}
#main-grid #nav-header-grid-item #theme-switcher > div:active {
  transform: scale(0.85) !important;
}
#main-grid #nav-header-grid-item #theme-switcher > div:active svg.hide-in-dark-mode {
  transform: scale(0.9) rotate(180deg);
}
#main-grid > * {
  min-width: 0;
}

footer {
  border: none;
  padding: 3rem var(--content-horizontal-padding);
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
  gap: 1rem;
}
footer > * {
  text-align: center;
}
footer .copyright-span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
footer .copyright-span .overshifted {
  font-family: "Iosevka Web", "Iosevka Term", monospace;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3em;
}
footer .copyright-span .overshifted .overshifted-box {
  width: 1em;
  height: 1em;
  display: inline-block;
  background-color: var(--links);
}
footer .surprise {
  image-rendering: pixelated;
}

ul > li::marker {
  color: var(--muted-color);
}

ol > li::marker {
  color: var(--muted-color);
}

p {
  text-align-last: left;
}

h2, h3, h4, h5, h6 {
  font-size: xx-large;
}

input:active, input:active, button:active, button:active {
  transform: none !important;
}

table thead {
  border-bottom: solid 2px var(--table-border-color);
}
table tbody tr:nth-child(odd) {
  background-color: var(--tr-0-bg-color);
}
table tbody tr:nth-child(even) {
  background-color: var(--tr-1-bg-color);
}
table td, table th {
  border-right: solid 2px var(--table-border-color);
}
table td:last-child, table th:last-child {
  border-right: none;
}

hr {
  border-color: var(--muted-color);
}

figure.highlight {
  margin: 0;
}

code {
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 2px 4px !important;
  font-family: "Iosevka Web", "Iosevka Term", monospace;
  font-size: 0.9em;
  line-height: 130%;
}
code pre {
  font-family: inherit;
}

pre > code {
  padding: 8px !important;
}
pre > code:has(.rouge-table) {
  padding: 0 !important;
}
pre > code .rouge-table {
  margin: 0;
}
pre > code .rouge-table tr {
  background: none;
  display: flex;
  flex-direction: row;
}
pre > code .rouge-table tr td {
  display: inline-block;
}
pre > code .rouge-table tr td.gutter {
  user-select: none;
  color: var(--muted-color);
  border-right: none;
  background-color: var(--background-darker);
  padding: 8px 8px 8px 1rem;
  text-align: right;
}
pre > code .rouge-table tr td.code {
  padding: 8px 0px 0px 8px;
  overflow: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
}
pre > code .rouge-table tr td.code::after {
  content: "";
  min-width: 8px;
  display: block;
}
pre > code .rouge-table tr td > pre {
  margin: 0;
  min-width: max-content;
  flex-grow: 1;
}

.highlight .hll {
  display: block;
  margin-left: -8px;
  padding-left: 8px;
  margin-right: -8px;
  padding-right: 8px;
}

blockquote {
  background-color: var(--background);
  font-style: normal;
  border-radius: var(--border-radius);
}

var {
  font-family: "Iosevka Web", "Iosevka Term", monospace !important;
}

#page-title {
  margin-top: 1rem !important;
  margin-bottom: 0.2rem;
  font-size: 2em;
}

#page-title::before {
  display: none;
}

#page-date {
  color: var(--muted-color);
  margin-bottom: 2.5rem;
}

#post-widgets {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
  list-style: none;
}
#post-widgets .post-widget {
  margin-top: 1.2rem;
}
#post-widgets .post-widget > h3 {
  display: inline;
}
#post-widgets .post-widget > p {
  margin: 0.5rem 0 0 0;
}
#post-widgets .post-date {
  color: var(--muted-color);
}

#spice-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#spice-canvas.pixelated {
  image-rendering: pixelated;
}

#spice-settings.hidden {
  display: none;
}

.muted {
  color: var(--muted-color);
}

@keyframes logo-animation {
  from {
    transform: none;
  }
  to {
    transform: rotate3d(1, 1, 0, 360deg);
  }
}
#logo.animate {
  animation: logo-animation 1s ease;
}

#logo {
  transform-style: preserve-3d;
  display: inline-block;
  width: 20px;
  height: 20px;
}
#logo span {
  width: 20px;
  height: 20px;
  display: inline-block;
  position: absolute;
}
#logo span.logo-1 {
  background-color: #4a99ff;
  transform: translate3d(0, 0, -10px);
}
#logo span.logo-2 {
  background-color: rgb(68.1238489871, 252.5, 0);
  transform: translate3d(0, 10px, 0) rotateX(90deg);
}
#logo span.logo-3 {
  background-color: rgb(255, 74, 77.5833333333);
  transform: translate3d(10px, 0, 0) rotateY(90deg);
}
#logo span.logo-4 {
  background-color: #4a99ff;
  transform: translate3d(0, 0, 10px);
}
#logo span.logo-5 {
  background-color: rgb(68.1238489871, 252.5, 0);
  transform: translate3d(0, -10px, 0) rotateX(90deg);
}
#logo span.logo-6 {
  background-color: rgb(255, 74, 77.5833333333);
  transform: translate3d(-10px, 0, 0) rotateY(90deg);
}

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