@charset "UTF-8";
@counter-style decimal-without-full-stop {
    system: numeric;
    symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
    suffix: " "
}
@counter-style upper-alpha-without-full-stop {
    system: alphabetic;
    symbols: "A" "B" "C" "D" "E" "F" "G" "H" "I" "J" "K" "L" "M" "N" "O" "P" "Q" "R" "S" "T" "U" "V" "W" "X" "Y" "Z";
    suffix: " "
}
@font-face {
    font-family: "98153e5";
    src: url("../fonts/delicious-roman.woff2?v=2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}
@font-face {
    font-family: "98153e5";
    src: url("../fonts/delicious-italic.woff2?v=2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap
}
@font-face {
    font-family: ceb6623;
    src: url("../fonts/dw.woff2?v=2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: block;
    unicode-range: U+0057,U+0064
}
@font-face {
    font-family: "914892a";
    src: local("Noto Sans Light"),local("NotoSans-Light"),url("../fonts/notosans-light.woff2?v=2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}
@font-face {
    font-family: "914892a";
    src: local("Noto Sans Light Italic"),local("NotoSans-LightItalic"),url("../fonts/notosans-lightitalic.woff2?v=2") format("woff2");
    font-weight: 300;
    font-style: italic;
    font-display: swap
}
@font-face {
    font-family: "914892a";
    src: local("Noto Sans Regular"),local("NotoSans-Regular"),url("../fonts/notosans-regular.woff2?v=2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}
@font-face {
    font-family: "914892a";
    src: local("Noto Sans Italic"),local("NotoSans-Italic"),url("../fonts/notosans-italic.woff2?v=2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap
}
@font-face {
    font-family: "914892a";
    src: local("Noto Sans Medium"),local("NotoSans-Medium"),url("../fonts/notosans-medium.woff2?v=2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}
@font-face {
    font-family: "914892a";
    src: local("Noto Sans Medium Italic"),local("NotoSans-MediumItalic"),url("../fonts/notosans-mediumitalic.woff2?v=2") format("woff2");
    font-weight: 500;
    font-style: italic;
    font-display: swap
}
@font-face {
    font-family: "914892a";
    src: local("Noto Sans SemiBold"),local("NotoSans-SemiBold"),url("../fonts/notosans-semibold.woff2?v=2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}
@font-face {
    font-family: "914892a";
    src: local("Noto Sans SemiBold Italic"),local("NotoSans-SemiBoldItalic"),url("../fonts/notosans-semibolditalic.woff2?v=2") format("woff2");
    font-weight: 600;
    font-style: italic;
    font-display: swap
}
@font-face {
    font-family: "914892a";
    src: local("Noto Sans Bold"),local("NotoSans-Bold"),url("../fonts/notosans-bold.woff2?v=2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}
@font-face {
    font-family: "914892a";
    src: local("Noto Sans Bold Italic"),local("NotoSans-BoldItalic"),url("../fonts/notosans-bolditalic.woff2?v=2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap
}
@font-face {
    font-family: "2db9adf";
    src: url("../fonts/notosans-ext-light.woff2?v=2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0021,U+002A-002B,U+002D-002E,U+0041-005A,U+0061-0069,U+006B-0079,U+00AD,U+039A,U+03AC,U+03B8,U+03BD,U+03BF-03C2,U+03C4,U+03C9,U+03CC
}
@font-face {
    font-family: "2db9adf";
    src: url("../fonts/notosans-ext-lightitalic.woff2?v=2") format("woff2");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0021,U+002A-002B,U+002D-002E,U+0041-005A,U+0061-0069,U+006B-0079,U+00AD,U+039A,U+03AC,U+03B8,U+03BD,U+03BF-03C2,U+03C4,U+03C9,U+03CC
}
@font-face {
    font-family: "2db9adf";
    src: url("../fonts/notosans-ext-regular.woff2?v=2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0021,U+002A-002B,U+002D-002E,U+0041-005A,U+0061-0069,U+006B-0079,U+00AD,U+039A,U+03AC,U+03B8,U+03BD,U+03BF-03C2,U+03C4,U+03C9,U+03CC
}
@font-face {
    font-family: "2db9adf";
    src: url("../fonts/notosans-ext-italic.woff2?v=2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0021,U+002A-002B,U+002D-002E,U+0041-005A,U+0061-0069,U+006B-0079,U+00AD,U+039A,U+03AC,U+03B8,U+03BD,U+03BF-03C2,U+03C4,U+03C9,U+03CC
}
@font-face {
    font-family: "2db9adf";
    src: url("../fonts/notosans-ext-medium.woff2?v=2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0021,U+002A-002B,U+002D-002E,U+0041-005A,U+0061-0069,U+006B-0079,U+00AD,U+039A,U+03AC,U+03B8,U+03BD,U+03BF-03C2,U+03C4,U+03C9,U+03CC
}
@font-face {
    font-family: "2db9adf";
    src: url("../fonts/notosans-ext-mediumitalic.woff2?v=2") format("woff2");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0021,U+002A-002B,U+002D-002E,U+0041-005A,U+0061-0069,U+006B-0079,U+00AD,U+039A,U+03AC,U+03B8,U+03BD,U+03BF-03C2,U+03C4,U+03C9,U+03CC
}
@font-face {
    font-family: "2db9adf";
    src: url("../fonts/notosans-ext-semibold.woff2?v=2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0021,U+002A-002B,U+002D-002E,U+0041-005A,U+0061-0069,U+006B-0079,U+00AD,U+039A,U+03AC,U+03B8,U+03BD,U+03BF-03C2,U+03C4,U+03C9,U+03CC
}
@font-face {
    font-family: "2db9adf";
    src: url("../fonts/notosans-ext-semibolditalic.woff2?v=2") format("woff2");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0021,U+002A-002B,U+002D-002E,U+0041-005A,U+0061-0069,U+006B-0079,U+00AD,U+039A,U+03AC,U+03B8,U+03BD,U+03BF-03C2,U+03C4,U+03C9,U+03CC
}
@font-face {
    font-family: "2db9adf";
    src: url("../fonts/notosans-ext-bold.woff2?v=2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0021,U+002A-002B,U+002D-002E,U+0041-005A,U+0061-0069,U+006B-0079,U+00AD,U+039A,U+03AC,U+03B8,U+03BD,U+03BF-03C2,U+03C4,U+03C9,U+03CC
}
@font-face {
    font-family: "2db9adf";
    src: url("../fonts/notosans-ext-bolditalic.woff2?v=2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0021,U+002A-002B,U+002D-002E,U+0041-005A,U+0061-0069,U+006B-0079,U+00AD,U+039A,U+03AC,U+03B8,U+03BD,U+03BF-03C2,U+03C4,U+03C9,U+03CC
}
@font-face {
    font-family: f172229;
    src: local("Noto Sans Mono Regular"),local("NotoSansMono-Regular"),url("../fonts/notosansmono-regular.woff2?v=2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}
@font-face {
    font-family: f172229;
    src: local("Noto Sans Mono Italic"),local("NotoSansMono-Italic"),local("Noto Sans Mono Oblique"),local("NotoSansMono-Oblique"),url("../fonts/notosansmono-oblique.woff2?v=2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap
}
@font-face {
    font-family: f172229;
    src: local("Noto Sans Mono Bold"),local("NotoSansMono-Bold"),url("../fonts/notosansmono-bold.woff2?v=2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}
@font-face {
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
    src: local(".AppleSystemUIFont"),local("Segoe UI"),local("Ubuntu"),local("Roboto-Regular"),local("HelveticaNeue")
}
@font-face {
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
    font-style: italic;
    src: local(".AppleSystemUIFont"),local("Segoe UI Italic"),local("Ubuntu-Italic"),local("Roboto-Italic"),local("HelveticaNeue-Italic")
}
@font-face {
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
    font-weight: 700;
    src: local(".AppleSystemUIFont"),local("Segoe UI Bold"),local("Ubuntu-Bold"),local("Roboto-Bold"),local("HelveticaNeue-Bold")
}
@font-face {
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
    font-style: italic;
    font-weight: 700;
    src: local(".AppleSystemUIFont"),local("Segoe UI Bold Italic"),local("Ubuntu-BoldItalic"),local("Roboto-BoldItalic"),local("HelveticaNeue-BoldItalic")
}
:root {
    --page: #f5f3f2;
    --page-overlay: rgba(245, 243, 242, 0.95);
    --primary: #c16640;
    --primary2: #a7502b;
    --text: #353845;
    --text-translucent: rgba(53, 56, 69, 0.5);
    --grey5: #eae8e7;
    --grey10: #dedcdc;
    --grey15: #d5d3d3;
    --grey30: #bab8b8;
    --grey45: #9e9c9c;
    --grey60: #7f7e7d;
    --grey75: #5e5c5c;
    --base00: #353845;
    --base01: #8f9097;
    --base02: #a3a3a8;
    --base03: #bfbec2;
    --base04: #dad8da;
    --base05: #f5f3f2;
    --base06: #f5f3f2;
    --base07: #f5f3f2;
    --base08: #ffa79b;
    --base09: #ffab6d;
    --base0A: #ddba76;
    --base0B: #b6c76a;
    --base0C: #a2c5c1;
    --base0D: #82c7e9;
    --base0E: #cdb6da;
    --base0F: #f4af83
}
*,::after,::before {
    background-repeat: no-repeat;
    box-sizing: border-box
}
::after,::before {
    text-decoration: inherit;
    vertical-align: inherit
}
:focus {
    outline: 0
}
.focus-visible,:focus:not(:hover) {
    outline: 2px dashed var(--primary);
    outline-offset: 2px
}
:focus-visible,:focus:not(:hover) {
    outline: 2px dashed var(--primary);
    outline-offset: 2px
}
::-moz-selection {
    background-color: var(--primary);
    color: var(--page);
    text-shadow: none;
    -moz-transition: background-color 250ms ease-in-out,color 250ms ease-in-out;
    transition: background-color 250ms ease-in-out,color 250ms ease-in-out
}
::selection {
    background-color: var(--primary);
    color: var(--page);
    text-shadow: none;
    transition: background-color 250ms ease-in-out,color 250ms ease-in-out
}
html {
    background-color: var(--page);
    color: var(--text);
    cursor: default;
    font-family: "914892a",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    font-size: 13px;
    font-synthesis: none;
    font-variant-numeric: oldstyle-nums;
    word-wrap: break-word;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    transition: background-color 250ms ease-in-out,color 250ms ease-in-out;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%
}
html.loading-theme {
    display: none
}
body,html {
    min-height: 100vh
}
body {
    font-size: 1.2307692308rem;
    line-height: 2rem;
    margin: 0 auto;
    max-width: 100%;
    padding: 2rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}
body > * {
    max-width: 53rem
}
body > header #logo {
    font-size: 3.2307692308rem;
    line-height: 4rem;
    font-family: ceb6623,"98153e5","Trebuchet MS",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif
}
body > header b {
    font-weight: 500
}
body > header input,body > header svg {
    display: none
}
body > header nav {
    font-weight: 300
}
body > header nav a {
    font-weight: inherit;
    text-decoration: none
}
body > header nav a:active {
    text-decoration: underline
}
body > header ul {
    font-size: 1.6153846154rem;
    line-height: 2rem;
    margin: 0
}
body > header li {
    padding-bottom: .25rem;
    padding-top: .25rem
}
body > footer a:focus #ko-fi-icon circle {
    fill: #29abe0
}
body > footer a:focus #ko-fi-icon path {
    fill: #ff5e5b
}
body > footer a:focus #ko-fi-icon path.counter {
    fill: #fff
}
body > footer a:focus #mastodon-icon path {
    fill: #2b90d9
}
body > footer a:focus #mastodon-icon .counter {
    fill: #fff
}
body > footer a:focus #rss-icon path {
    fill: #c16640
}
body > footer a:focus #rss-icon .counter {
    fill: #fff
}
body > footer a:focus #hellsite-icon path {
    fill: #1da1f2
}
body > footer a,body > footer svg {
    display: block
}
body > footer nav {
    margin-bottom: 1rem
}
body > footer nav svg {
    height: 2rem;
    width: 2rem
}
body > footer nav circle,body > footer nav path {
    fill: var(--grey30)
}
body > footer nav circle.counter,body > footer nav path.counter {
    fill: var(--page)
}
body > footer fieldset {
    border: 1px solid var(--grey45);
    border-radius: 1.2307692308rem;
    height: 2.4615384615rem;
    margin: 0 0 2.3846153846rem -1px;
    padding: 0;
    transition: border-color 250ms ease-in-out;
    width: 4.4615384615rem
}
body > footer fieldset[focus-within] {
    border-color: var(--text)
}
body > footer fieldset:focus-within {
    border-color: var(--text)
}
body > footer fieldset[focus-within] circle,body > footer fieldset[focus-within] path {
    fill: var(--text)
}
body > footer fieldset:focus-within circle,body > footer fieldset:focus-within path {
    fill: var(--text)
}
body > footer fieldset[focus-within]:not(:hover) {
    outline: 2px dashed var(--primary);
    outline-offset: 2px
}
body > footer fieldset:focus-within:not(:hover) {
    outline: 2px dashed var(--primary);
    outline-offset: 2px
}
body > footer fieldset circle,body > footer fieldset path {
    fill: var(--grey45)
}
body > footer fieldset circle {
    transition: fill 250ms ease-in-out,transform 250ms ease-in-out
}
body > footer fieldset label,body > footer fieldset svg {
    display: block;
    height: 100%;
    width: 100%
}
body > footer input {
    clip: rect(1px,1px,1px,1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    display: block;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    width: 1px
}
body > footer input:not(:checked) + label path.light {
    fill: var(--page)
}
body > footer input:checked + label circle {
    transform: translateX(2rem)
}
body > footer input:checked + label path.dark {
    fill: var(--page)
}
body > footer circle,body > footer path {
    transition: fill 250ms ease-in-out
}
body > footer label.focus-visible,body > footer label:focus:not(:hover) {
    outline: 0
}
body > footer label:focus-visible,body > footer label:focus:not(:hover) {
    outline: 0
}
article section.edits,body>footer small {
    font-weight: 300
}
body > footer svg {
    pointer-events: none
}
body > footer ul {
    display: flex;
    flex-wrap: wrap;
    margin-left: -.5rem;
    margin-right: -.5rem
}
body > footer ul li {
    padding: 0 .5rem
}
a {
    color: var(--text);
    font-weight: 500;
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: 0.125em;
    transition: color 250ms ease-in-out,text-decoration-color 250ms ease-in-out,-webkit-text-decoration-color 250ms ease-in-out
}
a:not(:visited) {
    -webkit-text-decoration-color: var(--primary);
    text-decoration-color: var(--primary)
}
a:not(:visited):active,a:not(:visited):focus {
    color: var(--primary)
}
a:visited {
    -webkit-text-decoration-color: var(--primary2);
    text-decoration-color: var(--primary2)
}
a:visited:active,a:visited:focus {
    color: var(--primary2)
}
abbr[title] {
    text-decoration: none;
    cursor: help
}
article,main,section {
    margin-top: 10rem;
    margin-bottom: 10rem
}
article:first-child,article:first-of-type,main:first-child,section:first-child {
    margin-top: 0
}
article:last-child,main:last-child,section:last-child {
    margin-bottom: 0
}
article > footer {
    margin-top: 6rem;
    font-size: 1rem;
    line-height: 2rem
}
article > footer hr {
    border-top-style: double;
    border-top-width: 3px;
    margin-top: calc(4rem - 3px);
    width: 13rem
}
article hr {
    margin: calc(4rem - 1px) auto 4rem;
    border-top: 1px solid var(--text);
    transition: border-color 250ms ease-in-out;
    width: 8rem
}
article hr::before {
    content: none
}
article section.edits p.subhead {
    margin-bottom: 2rem
}
article section.edits ol {
    list-style-type: none;
    margin-left: 0
}
article section.edits ol li::before {
    clip: rect(1px,1px,1px,1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    display: block;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    width: 1px;
    content: "​"
}
article section.edits li > time:first-child {
    display: inline-block;
    margin-right: .9783493954ch
}
article section.edits time {
    font-weight: 400
}
b,strong {
    font-weight: bolder
}
blockquote,dd,dl,fieldset,figcaption,figure,h1,h2,h3,h4,h5,h6,hr,li,ol,p,pre,ul {
    margin: 0
}
blockquote {
    border-left: 3px solid var(--text);
    font-weight: 600;
    margin: 6rem auto;
    max-width: 100%;
    padding: 0 2rem 0 calc(2rem - 3px);
    transition: border-color 250ms ease-in-out;
    transform: translateX(-3px);
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content
}
blockquote:last-child {
    margin-bottom: 0
}
blockquote + blockquote {
    margin-top: -2rem
}
blockquote footer {
    margin-top: 2rem;
    font-weight: 400;
    text-align: right
}
blockquote.verse p {
    max-width: 100%;
    -webkit-hyphens: none;
    hyphens: none
}
blockquote.verse p + p {
    margin-top: 2rem;
    text-indent: 0
}
blockquote.pullquote {
    font-size: 1.6153846154rem;
    line-height: 2rem;
    border: 0;
    font-style: italic;
    margin: 0 auto;
    padding: 2rem
}
blockquote.pullquote p:first-of-type::before {
    content: "“"
}
blockquote.pullquote p:last-of-type::after {
    content: "”"
}
@supports not (hanging-punctuation:first allow-end last) {
    blockquote.pullquote p:first-of-type {
        text-indent: -.6563071298ch
    }
    blockquote.pullquote p:last-of-type:not(:only-of-type) {
        margin-right: -.6563071298ch
    }
}
button,input,select,textarea {
    font: inherit
}
button,input[type=email],input[type=submit],input[type=tel],input[type=text],textarea {
    padding: calc(.5rem - 1px);
    color: #353845;
    background-color: #f5f3f2;
    border: 1px solid #353845;
    transition: background-color 250ms ease-in-out,border-color 250ms ease-in-out,color 250ms ease-in-out
}
button,input[type=submit] {
    padding: calc(.5rem - 1px) calc(1rem - 2px) calc(.5rem - 2px) calc(1rem - 1px);
    border-bottom-width: 2px;
    border-right-width: 2px;
    transition: background-color 250ms ease-in-out,border-color 250ms ease-in-out,border-width 250ms ease-in-out,color 250ms ease-in-out
}
@supports (font-variant-caps:all-small-caps) {
    body > header nav {
        font-family: "2db9adf","914892a",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
        font-variant-caps: all-small-caps;
        letter-spacing: .1222936744ch
    }
    body > header nav .asmc,    body > header nav .c2sc span,    body > header nav .c2sc tspan,    body > header nav .c2sc.all-caps {
        font-size: inherit
    }
    body > footer {
        font-family: "2db9adf","914892a",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
        font-variant-caps: all-small-caps;
        letter-spacing: .1222936744ch
    }
    body > footer .asmc,    body > footer .c2sc span,    body > footer .c2sc tspan,    body > footer .c2sc.all-caps {
        font-size: inherit
    }
    button,    input[type=submit] {
        font-family: "2db9adf","914892a",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
        font-variant-caps: all-small-caps;
        letter-spacing: .1222936744ch
    }
    button .asmc,    button .c2sc span,    button .c2sc tspan,    button .c2sc.all-caps,    input[type=submit] .asmc,    input[type=submit] .c2sc span,    input[type=submit] .c2sc tspan,    input[type=submit] .c2sc.all-caps {
        font-size: inherit
    }
}
button:active,input[type=submit]:active {
    background-color: var(--grey5);
    position: relative;
    z-index: 1;
    border-width: 2px 1px 1px 2px;
    padding: calc(.65rem - 2px) calc(1rem - 1px) calc(.35rem - 1px) calc(1rem - 2px)
}
html.dark-theme button:active,html.dark-theme input[type=submit]:active {
    background-color: #d5d8e8
}
html.light-theme button:active,html.light-theme input[type=submit]:active {
    background-color: #eae8e7
}
code,kbd,samp,var {
    font-family: f172229,Consolas,monospace;
    font-size: 1em;
    font-synthesis: style;
    font-variant-caps: normal;
    font-variant-numeric: tabular-nums lining-nums;
    text-transform: none;
    -webkit-hyphens: none;
    hyphens: none
}
:where(dd,dt,h1,h2,h3,h4,h5,h6,li,p) :where(a,abbr,acronym,b,big,bdo,br,cite,code,dfn,em,i,kbd,q,strong,samp,small,span,sub,sup,tt,var) {
    line-height: inherit
}
div.notice {
    border: 1px solid var(--text);
    font-weight: 500;
    margin: 4rem auto;
    max-width: 53rem;
    padding: calc(2rem - 1px);
    transition: border-color 250ms ease-in-out;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}
div.notice:first-child {
    margin-top: 0
}
div.notice:last-child {
    margin-bottom: 0
}
div.notice + div.notice {
    margin-top: 1rem
}
dl,h1,h2,h3,h4,h5,h6,ol,p,ul {
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 2 3;
    hyphenate-limit-lines: 3;
    hyphenate-limit-last: always
}
dl,ol,ul {
    margin-top: 2rem;
    margin-bottom: 2rem
}
dl+dl,dl+ol,dl+ul,dl:first-child,figure:first-child,ol+dl,ol+ol,ol+ul,ul+dl,ul+ol,ul+ul {
    margin-top: 0
}
dl + blockquote,dl + figure,ol + blockquote,ol + figure,ul + blockquote,ul + figure {
    margin-top: 4rem
}
dl:last-child,figure:last-child {
    margin-bottom: 0
}
dt {
    font-weight: 600
}
@supports (font-variant-caps:all-small-caps) {
    dt {
        font-family: "2db9adf","914892a",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
        font-variant-caps: all-small-caps;
        letter-spacing: .1222936744ch
    }
    dt .asmc,    dt .c2sc span,    dt .c2sc tspan,    dt .c2sc.all-caps {
        font-size: inherit
    }
    main > header p,    main article > header p {
        font-family: "2db9adf","914892a",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
        font-variant-caps: all-small-caps;
        letter-spacing: .1222936744ch
    }
    main > header p .asmc,    main > header p .c2sc span,    main > header p .c2sc tspan,    main > header p .c2sc.all-caps,    main article > header p .asmc,    main article > header p .c2sc span,    main article > header p .c2sc tspan,    main article > header p .c2sc.all-caps {
        font-size: inherit
    }
}
dd:not(:last-child) {
    margin-bottom: 1rem
}
figure {
    margin-bottom: 6rem;
    margin-top: 6rem
}
figure > * {
    margin-left: auto;
    margin-right: auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}
figure > * + * {
    margin-top: 1rem
}
figure svg,figure>a {
    display: block;
    max-width: 100%
}
figure > a:active {
    outline: 4px solid var(--primary)
}
figure.overflow-scroll {
    overflow-x: scroll
}
figure + figure,figure + table {
    margin-top: -4rem
}
figcaption {
    font-size: 1rem;
    line-height: 2rem;
    text-align: center
}
form,tbody {
    background-color: var(--grey5);
    transition: background-color 250ms ease-in-out
}
form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;
    margin-bottom: 2rem;
    padding: 2rem;
    margin-top: 2rem
}
form:first-child {
    margin-top: 0
}
form:last-child {
    margin-bottom: 0
}
form button,form input {
    font-weight: 400
}
form input[type=email],form input[type=tel],form input[type=text],form textarea {
    display: block;
    width: 100%
}
form div.two-col {
    grid-column: 1/3
}
form div.justify-end {
    justify-self: end
}
hr {
    border-width: 0;
    display: block;
    margin: 4rem auto;
    text-align: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}
hr::before {
    content: "• • •";
    font-size: 1.6153846154rem;
    line-height: 2rem;
    letter-spacing: .9783493954ch
}
hr:first-child {
    margin-top: 0
}
hr:last-child {
    margin-bottom: 0
}
hsb-cone,img-diff,rgb-cube {
    display: block
}
hsb-cone,rgb-cube {
    width: 100%;
    --webgl-background-color: #353845
}
h1,h2,h3,h4,h5,h6,li,p {
    hanging-punctuation: first allow-end last
}
h1,h2,h3,h4,h5,h6,p.subhead {
    font-variant-numeric: lining-nums;
    font-weight: 400;
    margin-bottom: 1rem;
    margin-top: 2rem;
    word-wrap: break-word;
    word-wrap: break-word
}
h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child,p.subhead:first-child {
    margin-top: 0
}
h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child,p.subhead:last-child {
    margin-bottom: 0
}
h1 a:not(:hover),h2 a:not(:hover),h3 a:not(:hover),h4 a:not(:hover),h5 a:not(:hover),h6 a:not(:hover),p.subhead a:not(:hover) {
    -webkit-text-decoration-color: transparent;
    text-decoration-color: transparent
}
h1,h2,h3,h4,h5,h6 {
    font-family: "98153e5","Trebuchet MS",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif
}
h1 + figure,h1 + table,h2 + figure,h2 + table,h3 + figure,h3 + table,h4 + figure,h4 + table,h5 + figure,h5 + table,h6 + figure,h6 + table {
    margin-top: 2rem
}
h1 .asmc,h1 .c2sc,h1 .smcp,h2 .asmc,h2 .c2sc,h2 .smcp,h3 .asmc,h3 .c2sc,h3 .smcp,h4 .asmc,h4 .c2sc,h4 .smcp,h5 .asmc,h5 .c2sc,h5 .smcp,h6 .asmc,h6 .c2sc,h6 .smcp {
    font-family: inherit
}
h1 {
    font-size: 4rem;
    line-height: 5rem
}
h1+h2,h1+h3,h1+h4,h1+h5,h1+h6,h2+h3,h2+h4,h2+h5,h2+h6,h3+h4,h3+h5,h3+h6,h4+h5,h4+h6,h5+h6 {
    margin-top: 0
}
h1 small {
    font-size: 3.2307692308rem
}
h2 {
    font-size: 3.2307692308rem;
    line-height: 4rem
}
h2 small {
    font-size: 2.4615384615rem
}
h3 {
    font-size: 2.4615384615rem;
    line-height: 3rem
}
h3 small {
    font-size: 2rem
}
h4 {
    font-size: 2rem;
    line-height: 3rem
}
h4 small {
    font-size: 1.6153846154rem
}
h5 {
    font-size: 1.6153846154rem;
    line-height: 2rem
}
h5 small {
    font-size: 1.2307692308rem
}
h6 {
    font-size: 1.2307692308rem;
    line-height: 2rem
}
h6 small {
    font-size: 1rem
}
iframe,img,input,select,textarea,video {
    height: auto;
    max-width: 100%
}
img,picture,video {
    display: block;
    height: auto;
    max-width: 100%
}
img-diff {
    --img-diff-slider-border: #353845;
    --img-diff-slider-fill: #f5f3f2
}
input[type=email]::-moz-placeholder,input[type=tel]::-moz-placeholder,input[type=text]::-moz-placeholder,textarea::-moz-placeholder {
    font-style: italic;
    font-weight: 300;
    opacity: 1
}
input[type=email]::placeholder,input[type=tel]::placeholder,input[type=text]::placeholder,textarea::placeholder {
    font-style: italic;
    font-weight: 300;
    opacity: 1
}
ins {
    text-decoration: none;
    font-style: italic
}
ins:not(.block)::before {
    content: "["
}
ins:not(.block)::after {
    content: "]"
}
kbd kbd {
    display: inline-block;
    padding: 0 .4891746977ch;
    white-space: nowrap;
    background-color: var(--grey15);
    border-radius: 2px;
    text-indent: 0;
    line-height: calc(2rem - 2px);
    font-style: normal;
    text-transform: none;
    transition: background-color 250ms ease-in-out,color 250ms ease-in-out
}
kbd samp {
    font-style: italic
}
main {
    margin-top: 7rem;
    margin-left: auto
}
main > header,main article > header {
    margin-bottom: 4rem
}
main > header h1,main article > header h1 {
    margin-bottom: 0
}
main article>header p,main>footer,main>header p {
    font-weight: 300
}
main > header + p,main article > header + p {
    margin-top: 2em
}
main > footer > p {
    margin-left: auto;
    margin-right: auto;
    max-width: 53rem
}
main > footer > p.subhead {
    margin-top: 8rem
}
main > footer a {
    font-weight: 400
}
main > footer nav {
    margin: 0 auto;
    max-width: 85.6153846154rem;
    text-align: center
}
main > footer nav a {
    display: block;
    font-weight: 600;
    height: 100%;
    padding: 2rem;
    text-decoration: none;
    width: 100%;
    transition: background-color 250ms ease-in-out,color 250ms ease-in-out
}
main > footer nav a:focus {
    background-color: var(--grey5)
}
main > footer nav i {
    font-style: normal;
    font-weight: 400
}
main > footer nav li {
    border-top: 1px solid var(--text);
    margin-bottom: -1px;
    margin-top: -1px;
    transition: border-color 250ms ease-in-out
}
main > footer nav li:last-child {
    border-bottom: 1px solid var(--text)
}
mark {
    background-color: #edeb57;
    color: var(--text);
    transition: background-color 250ms ease-in-out,color 250ms ease-in-out
}
ol,ul {
    padding: 0;
    margin-left: 2.9350481861ch
}
ol:first-child,ul:first-child {
    margin-top: 0
}
ol:last-child,ul:last-child {
    margin-bottom: 0
}
ol ol,ol ul,ul ol,ul ul {
    margin: 0 0 0 2.9350481861ch
}
nav ol,nav ul,ol.list-unstyled,ul.list-unstyled {
    list-style-type: none;
    margin-left: 0
}
nav ol li::before,nav ul li::before,ol.list-unstyled li::before,ul.list-unstyled li::before {
    clip: rect(1px,1px,1px,1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    display: block;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    width: 1px;
    content: "​"
}
ol {
    list-style-type: decimal-without-full-stop
}
ol li::marker {
    font-weight: 600
}
ol.upper-alpha {
    list-style-type: upper-alpha
}
@supports (list-style-type:upper-alpha-without-full-stop) {
    ol.upper-alpha {
        list-style-type: upper-alpha-without-full-stop
    }
    @supports (font-variant-caps:all-small-caps) {
        ol.upper-alpha li::marker {
            font-family: "2db9adf","914892a",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
            font-variant-caps: all-small-caps;
            letter-spacing: .1222936744ch
        }
    }
}
blockquote.pullquote + p:not(.no-indent),p + p:not(.no-indent) {
    text-indent: 2.9350481861ch
}
p.subhead {
    font-size: 1.6153846154rem;
    line-height: 2rem;
    font-weight: 300
}
p.subhead + p {
    text-indent: 0
}
p.lead,p.separated {
    margin-bottom: 2rem;
    margin-top: 2rem
}
p.lead:not(.no-indent),p.separated:not(.no-indent) {
    text-indent: 0
}
p.lead:first-child,p.separated:first-child {
    margin-top: 0
}
p.lead:last-child,p.separated:last-child {
    margin-bottom: 0
}
p.lead + p.lead,p.lead + p.separated,p.separated + p.lead,p.separated + p.separated {
    margin-top: 1rem
}
p.lead + p:not(.lead):not(.separated),p.separated + p:not(.lead):not(.separated) {
    text-indent: 0
}
p.lead {
    font-size: 1.6153846154rem;
    line-height: 2rem
}
p.lead small {
    font-size: 1.2307692308rem
}
p.leading-line:not(.lead):first-line {
    font-weight: 500
}
pre {
    background-color: var(--text);
    color: var(--page);
    margin-top: 2rem;
    margin-bottom: 2rem;
    max-width: 100%;
    padding: 2rem;
    transition: background-color 250ms ease-in-out,color 250ms ease-in-out;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}
pre:first-child {
    margin-top: 0
}
pre:last-child {
    margin-bottom: 0
}
pre > code {
    display: block;
    margin: -2rem;
    overflow-x: auto;
    padding: 2rem
}
pre > code .block {
    display: inline
}
section section {
    margin-top: 2rem
}
small {
    font-size: 1rem
}
sub:not(.fake),sup:not(.fake) {
    font-size: inherit;
    line-height: inherit;
    position: static;
    top: 0;
    bottom: 0;
    vertical-align: baseline
}
sub.fake,sup.fake {
    font-variant-numeric: proportional-nums lining-nums;
    font-size: .64em;
    font-weight: 500;
    line-height: 0
}
sub:not(.fake) {
    font-feature-settings: "subs"
}
sup:not(.fake) {
    font-feature-settings: "ordn","sups";
    font-size: inherit
}
sup[id^=fn] {
    margin-left: .2445873488ch;
    margin-right: .2445873488ch
}
sup a {
    text-decoration: none
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    font-variant-numeric: tabular-nums lining-nums;
    margin: 6rem auto
}
table:first-child {
    margin-top: 0
}
table:last-child {
    margin-bottom: 0
}
table.max-width {
    width: 100%
}
table .width-5 {
    width: 5%
}
table .width-10 {
    width: 10%
}
table .width-15 {
    width: 15%
}
table .width-20 {
    width: 20%
}
table .width-25 {
    width: 25%
}
table .width-30 {
    width: 30%
}
table .width-35 {
    width: 35%
}
table .width-40 {
    width: 40%
}
table .width-45 {
    width: 45%
}
table .width-50 {
    width: 50%
}
table .width-55 {
    width: 55%
}
table .width-60 {
    width: 60%
}
table .width-65 {
    width: 65%
}
table .width-70 {
    width: 70%
}
table .width-75 {
    width: 75%
}
table .width-80 {
    width: 80%
}
table .width-85 {
    width: 85%
}
table .width-90 {
    width: 90%
}
table .width-95 {
    width: 95%
}
table .width-100 {
    width: 100%
}
table + figure,table + table {
    margin-top: -4rem
}
table.no-stripes tbody tr:nth-child(2n) td,table.no-stripes tbody tr:nth-child(2n) th {
    background-color: transparent
}
tbody td,tbody tr {
    transition: background-color 250ms ease-in-out,border-color 250ms ease-in-out
}
tbody td {
    border-bottom: 1px solid var(--page);
    padding-bottom: calc(1rem - 1px)
}
tbody tr:first-child th:only-child {
    background-color: var(--page)
}
tbody tr:last-child td {
    border-bottom-width: 0;
    padding-bottom: 1rem
}
tbody tr:nth-child(2n) td,tbody tr:nth-child(2n) th {
    background-color: var(--grey10)
}
tbody + tbody tr:first-child > * {
    border-top: 3rem solid var(--page)
}
td,th {
    padding: 1rem
}
th {
    text-align: left;
    transition: background-color 250ms ease-in-out,border-color 250ms ease-in-out,color 250ms ease-in-out
}
thead th {
    padding-bottom: .5rem;
    padding-top: .5rem
}
ul > li > ul {
    list-style-type: square
}
ul > li > ul > li > ul {
    list-style-type: disc
}
@supports (font-variant-caps:all-small-caps) {
    main > footer nav i {
        font-family: "2db9adf","914892a",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
        font-variant-caps: all-small-caps;
        letter-spacing: .1222936744ch
    }
    main > footer nav i .asmc,    main > footer nav i .c2sc span,    main > footer nav i .c2sc tspan,    main > footer nav i .c2sc.all-caps {
        font-size: inherit
    }
    p.subhead {
        font-family: "2db9adf","914892a",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
        font-variant-caps: all-small-caps;
        letter-spacing: .1222936744ch
    }
    p.subhead .asmc,    p.subhead .c2sc span,    p.subhead .c2sc tspan,    p.subhead .c2sc.all-caps {
        font-size: inherit
    }
    p.lead,    p.leading-line:first-line {
        font-family: "2db9adf","914892a",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
        font-variant-caps: all-small-caps;
        letter-spacing: .1222936744ch
    }
    p.lead .asmc,    p.lead .c2sc span,    p.lead .c2sc tspan,    p.lead .c2sc.all-caps,    p.leading-line:first-line .asmc,    p.leading-line:first-line .c2sc span,    p.leading-line:first-line .c2sc tspan,    p.leading-line:first-line .c2sc.all-caps {
        font-size: inherit
    }
    p.lead {
        font-family: "2db9adf","914892a",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
        font-variant-caps: all-small-caps;
        letter-spacing: .1222936744ch
    }
    p.lead .asmc,    p.lead .c2sc span,    p.lead .c2sc tspan,    p.lead .c2sc.all-caps {
        font-size: inherit
    }
    th {
        font-family: "2db9adf","914892a",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
        font-variant-caps: all-small-caps;
        letter-spacing: .1222936744ch
    }
    th .asmc,    th .c2sc span,    th .c2sc tspan,    th .c2sc.all-caps {
        font-size: inherit
    }
    .asmc {
        font-family: "2db9adf","914892a",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
        font-variant-caps: all-small-caps;
        letter-spacing: .1222936744ch
    }
    .asmc .asmc,    .asmc .c2sc span,    .asmc .c2sc tspan,    .asmc .c2sc.all-caps {
        font-size: inherit
    }
    #portfolio main a {
        font-family: "2db9adf","914892a",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
        font-variant-caps: all-small-caps;
        letter-spacing: .1222936744ch
    }
    #portfolio main a .asmc,    #portfolio main a .c2sc span,    #portfolio main a .c2sc tspan,    #portfolio main a .c2sc.all-caps {
        font-size: inherit
    }
}
.block {
    display: block
}
.text-center {
    text-align: center
}
.text-left {
    text-align: left
}
.text-right {
    text-align: right
}
@supports (font-feature-settings:normal) {
    .c2sc {
        font-family: "2db9adf","914892a",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
        font-feature-settings: "c2sc"
    }
    .c2sc span,    .c2sc tspan,    .c2sc.all-caps {
        letter-spacing: .1222936744ch;
        line-height: normal
    }
}
.hide {
    clip: rect(1px,1px,1px,1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    display: block;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    width: 1px
}
.no-asmc {
    font-family: inherit;
    font-size: .9009009em;
    font-variant-caps: normal
}
.nowrap {
    white-space: nowrap
}
#about main figure {
    background-color: #c16640;
    padding-top: 2rem
}
#portfolio main {
    max-width: none
}
#portfolio main a {
    color: var(--page);
    display: block;
    height: 100%;
    text-decoration: none;
    width: 100%
}
#portfolio main a figcaption {
    opacity: .00001;
    background: transparent radial-gradient(var(--text-translucent),var(--text)) center center no-repeat;
    background-size: 10000%;
    transition: background-size 250ms ease-in-out,opacity 250ms ease-in-out
}
#portfolio main a:hover figcaption {
    background-size: 100%;
    opacity: 1
}
#portfolio main ul {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 100%
}
#portfolio main figure {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    overflow: hidden
}
#portfolio main figure,#portfolio main figure figcaption,#portfolio main figure picture {
    height: 100%;
    width: 100%
}
#portfolio main figure > * {
    grid-column: 1;
    grid-row: 1
}
#portfolio main figure figcaption {
    align-items: center;
    display: grid;
    margin: 0;
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 2.4615384615rem;
    line-height: 3rem
}
#portfolio main figure > picture > img {
    margin-left: 0;
    margin-right: 0;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%
}
pre.highlighted {
    background-color: var(--base00);
    color: var(--base05)
}
pre.highlighted,pre.highlighted span {
    transition: background-color 250ms ease-in-out,color 250ms ease-in-out
}
pre.highlighted .comment {
    color: var(--base03);
    font-style: italic
}
pre.highlighted .constant {
    color: var(--base09)
}
pre.highlighted .constant.character.escape {
    color: var(--base0C)
}
pre.highlighted .constant.numeric {
    color: var(--base09)
}
pre.highlighted .constant.other.color {
    color: var(--base0C)
}
pre.highlighted .constant.other.symbol {
    color: var(--base0B)
}
pre.highlighted .entity.name.class,pre.highlighted .entity.name.namespace {
    color: var(--base0A)
}
pre.highlighted .entity.name.function,pre.highlighted .entity.name.section {
    color: var(--base0D)
}
pre.highlighted .entity.name.tag {
    color: var(--base08)
}
pre.highlighted .entity.name.type.class {
    color: var(--base0A)
}
pre.highlighted .entity.other.attribute-name {
    color: var(--base0E)
}
pre.highlighted .entity.other.attribute-name.id {
    color: var(--base0D)
}
pre.highlighted .entity.other.inherited-class {
    color: var(--base0B)
}
pre.highlighted .invalid.illegal {
    color: var(--base00);
    background-color: var(--base08)
}
pre.highlighted .keyword {
    color: var(--base0E)
}
pre.highlighted .keyword.arithmetic {
    color: var(--base05)
}
pre.highlighted .keyword.other.special-method {
    color: var(--base0D)
}
pre.highlighted .keyword.other.unit {
    color: var(--base09)
}
pre.highlighted .markup.bold {
    font-weight: 700;
    color: var(--base0A)
}
pre.highlighted .markup.changed {
    color: var(--base0E)
}
pre.highlighted .markup.deleted {
    color: var(--base08)
}
pre.highlighted .markup.heading {
    color: var(--base0D)
}
pre.highlighted .markup.inserted {
    color: var(--base0B)
}
pre.highlighted .markup.italic {
    font-style: italic;
    color: var(--base0E)
}
pre.highlighted .markup.list {
    color: var(--base08)
}
pre.highlighted .markup.quote {
    color: var(--base09)
}
pre.highlighted .markup.raw.inline {
    color: var(--base0B)
}
pre.highlighted .meta.class {
    color: var(--base07)
}
pre.highlighted .meta.link {
    color: var(--base09)
}
pre.highlighted .meta.require {
    color: var(--base0D)
}
pre.highlighted .meta.selector {
    color: var(--base0E)
}
pre.highlighted .meta.separator {
    color: var(--base05);
    background-color: var(--base02)
}
pre.highlighted .meta .support.type.property-name,pre.highlighted .meta.property-name {
    color: var(--base0A)
}
pre.highlighted .none {
    color: var(--base05)
}
pre.highlighted .storage {
    color: var(--base0E)
}
pre.highlighted .string {
    color: var(--base0B)
}
pre.highlighted .string.other.link {
    color: var(--base08)
}
pre.highlighted .string.regexp {
    color: var(--base0C)
}
pre.highlighted .string .variable {
    color: var(--base0F)
}
pre.highlighted .support.class {
    color: var(--base0A)
}
pre.highlighted .support.function,pre.highlighted .support.type {
    color: var(--base0C)
}
pre.highlighted .support.function.any-method {
    color: var(--base0D)
}
pre.highlighted .variable {
    color: var(--base08)
}
pre.highlighted .variable.interpolation {
    color: var(--base0F)
}
pre.highlighted .variable.parameter.function {
    color: var(--base05)
}
@media (hover:hover) {
    body > header nav a:hover {
        text-decoration: underline
    }
    body > footer a:hover #ko-fi-icon circle {
        fill: #29abe0
    }
    body > footer a:hover #ko-fi-icon path {
        fill: #ff5e5b
    }
    body > footer a:hover #ko-fi-icon path.counter {
        fill: #fff
    }
    body > footer a:hover #mastodon-icon path {
        fill: #2b90d9
    }
    body > footer a:hover #mastodon-icon .counter {
        fill: #fff
    }
    body > footer a:hover #rss-icon path {
        fill: #c16640
    }
    body > footer a:hover #rss-icon .counter {
        fill: #fff
    }
    body > footer a:hover #hellsite-icon path {
        fill: #1da1f2
    }
    body > footer fieldset:hover {
        border-color: var(--text)
    }
    body > footer fieldset:hover circle,    body > footer fieldset:hover path {
        fill: var(--text)
    }
    a:not(:visited):hover {
        color: var(--primary)
    }
    a:visited:hover {
        color: var(--primary2)
    }
    figure > a:hover {
        outline: 4px solid var(--primary)
    }
    main > footer nav a:hover {
        background-color: var(--grey5)
    }
}
@media (min-width:37.5em) {
    main > footer nav a {
        align-items: center;
        display: flex
    }
    main > footer nav ul {
        display: grid;
        grid-template-columns: 1fr 1fr
    }
    main > footer nav li {
        border-bottom: 1px solid var(--text)
    }
    main > footer nav li span:last-child {
        align-self: stretch;
        flex: 1 1 auto
    }
    main > footer nav li.previous {
        border-right: 1px solid var(--text);
        grid-column: 1
    }
    main > footer nav li.previous span:last-child {
        padding-left: 2rem
    }
    main > footer nav li.next {
        grid-column: 2
    }
    main > footer nav li.next span:last-child {
        order: -1;
        padding-right: 2rem
    }
}
@media (min-width:44.6875em) {
    ol,    ul {
        margin-left: 0
    }
}
@media (min-width:45em) {
    h1 {
        font-size: 4.9230769231rem;
        line-height: 6rem
    }
    h1 small {
        font-size: 4rem
    }
    h2 {
        font-size: 4rem;
        line-height: 5rem
    }
    h2 small {
        font-size: 3.2307692308rem
    }
    h3 {
        font-size: 3.2307692308rem;
        line-height: 4rem
    }
    h3 small {
        font-size: 2.4615384615rem
    }
    h4 {
        font-size: 2.4615384615rem;
        line-height: 3rem
    }
    h4 small {
        font-size: 2rem
    }
    h5 {
        font-size: 2rem;
        line-height: 3rem
    }
    h5 small {
        font-size: 1.6153846154rem
    }
    h6 {
        font-size: 1.6153846154rem;
        line-height: 2rem
    }
    h6 small {
        font-size: 1.2307692308rem
    }
}
@media print {
    :root {
        --page: #fff!important;
        --primary: #000!important;
        --text: #000!important;
        --text-translucent: rgba(0, 0, 0, 0.5)!important;
        --grey5: #f4f4f4!important;
        --grey10: #e9e9e9!important;
        --grey15: #e1e1e1!important;
        --grey30: #c6c6c6!important;
        --grey45: #ababab!important;
        --grey60: #8d8d8d!important;
        --grey75: #6d6d6d!important
    }
    a {
        text-decoration: none
    }
    a[href]:not([href^="#"]):not([href^="/"])::after {
        content: " (" attr(href) ") ";
        font-style: italic
    }
    a[href^="#fnr"] {
        display: none
    }
    blockquote,    figure svg,    form,    h1,    h2,    h3,    h4,    h5,    h6,    img,    li,    p,    td,    th,    thead {
        page-break-inside: avoid
    }
    nav {
        display: none!important
    }
}
@media screen and (max-width:33.25em) {
    body > header {
        -webkit-backdrop-filter: blur(0.25rem);
        backdrop-filter: blur(0.25rem);
        background-color: var(--page-overlay);
        display: flex;
        justify-content: space-between;
        left: 0;
        max-width: 100%;
        padding: 1rem 2rem;
        position: fixed;
        right: 0;
        text-align: right;
        top: 0;
        transition: backdrop-filter 250ms ease-in-out,background-color 250ms ease-in-out,-webkit-backdrop-filter 250ms ease-in-out;
        z-index: 2112
    }
    body > header input {
        clip: rect(1px,1px,1px,1px);
        -webkit-clip-path: inset(50%);
        clip-path: inset(50%);
        height: 1px;
        margin: -1px;
        padding: 0;
        position: absolute;
        width: 1px;
        display: inline
    }
    body > header input:focus + label {
        outline: 2px dashed var(--primary);
        outline-offset: 2px
    }
    body > header input:checked + label svg path:first-of-type {
        transform: rotate(45deg) translateY(.4351461538rem) translateX(.4351461538rem)
    }
    body > header input:checked + label svg path:nth-of-type(2) {
        transform: scaleX(0)
    }
    body > header input:checked + label svg path:last-child {
        transform: rotate(-45deg) translateY(-.4351461538rem) translateX(.4351461538rem)
    }
    body > header input:checked ~ ul {
        height: 12rem
    }
    body > header label,    body > header svg {
        display: block
    }
    body > header label {
        cursor: pointer;
        transform: translateY(.75rem)
    }
    body > header nav {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        font-size: 1.3661538462rem
    }
    body > header svg {
        height: 2rem;
        width: 2rem
    }
    body > header svg:active path {
        fill: var(--primary)
    }
    body > header svg path {
        fill: var(--text);
        transform-origin: center center;
        transition: fill 250ms ease-in-out,transform 250ms ease-in-out
    }
    body > header svg path:first-of-type {
        transform-origin: 1rem 0.3846153846rem
    }
    body > header svg path:last-child {
        transform-origin: 1rem 1.6153846154rem
    }
    body > header ul {
        font-size: 1.7930769231rem;
        height: 0;
        margin: 1.5rem 0 1rem;
        overflow: hidden;
        transition: height 250ms ease-in-out
    }
    body > header ul.overflow-visible {
        overflow: visible
    }
}
@media screen and (max-width:33.25em) and (hover:hover) {
    body > header svg:hover path {
        fill: var(--primary)
    }
}
@media screen and (max-width:33.25em) and (prefers-reduced-motion:reduce) {
    body > header input:checked ~ ul {
        overflow: visible
    }
}
@media screen and (min-width:33.3125em) and (max-width:61.8125em),screen and (min-width:61.875em) and (max-height:27.5625em) {
    body > header {
        margin-top: -1rem
    }
    body > header #logo {
        margin-right: 3rem
    }
    body > header,    body > header ul {
        align-items: baseline;
        display: flex;
        flex-wrap: wrap
    }
    body > header ul {
        margin: 0 -1rem
    }
    body > header li {
        padding: 0 1rem
    }
    body > header b {
        position: relative
    }
    body > header b,    body > header b::before {
        display: inline-block
    }
    body > header b::before {
        color: var(--primary);
        content: "•";
        font-weight: bolder;
        padding-right: 0;
        position: absolute;
        text-align: center;
        top: calc(-1rem - .4891746977ch);
        transition: color 250ms ease-in-out;
        width: 100%
    }
    main {
        margin-top: 4rem
    }
}
@media screen and (min-width:37.125em) {
    #portfolio main {
        justify-self: auto
    }
    #portfolio main ul {
        grid-template-columns: repeat(auto-fit,minmax(31.7655677656rem,1fr))
    }
}
@media screen and (min-width:61.875em) and (min-height:27.625em) {
    body {
        display: grid;
        grid-gap: 2rem 4rem;
        grid-template-areas: "header main" "footer main";
        grid-template-columns: 13rem calc(100vw - (100vw - 100%) - 17rem);
        grid-template-rows: auto -webkit-max-content;
        grid-template-rows: auto max-content;
        padding-left: 3rem;
        width: 100%
    }
    body > header {
        grid-area: header;
        position: fixed
    }
    body > header #logo {
        font-size: 4.9230769231rem;
        line-height: 6rem
    }
    body > header ul {
        font-size: 1.7930769231rem
    }
    @supports selector(::marker) {
        body > header ul {
            list-style-type: disc
        }
        body > header ul li {
            margin-left: .4891746977ch;
            text-indent: -.4891746977ch
        }
        body > header ul li:not(.active)::marker {
            color: transparent
        }
        body > header ul li.active::marker {
            color: var(--primary);
            font-weight: 400;
            transition: color 250ms ease-in-out
        }
        body > header ul li::before {
            content: none
        }
    }
    body > footer {
        align-self: self-end;
        bottom: 2rem;
        grid-area: footer;
        position: fixed
    }
    body main {
        grid-area: main;
        justify-self: center;
        margin: 0
    }
}
@media screen and (min-width:89.09375em) and (min-height:27.625em) {
    body {
        grid-gap: 2rem 8rem;
        grid-template-columns: 13rem calc(100vw - (100vw - 100%) - 21rem)
    }
    blockquote.pullquote.float-left,    blockquote.pullquote.float-right {
        width: 29rem
    }
    blockquote.pullquote.float-left {
        float: left;
        margin-left: -8.5rem;
        padding-right: 2rem;
        text-align: right
    }
    blockquote.pullquote.float-right {
        float: right;
        margin-right: -8.5rem;
        padding-left: 2rem
    }
    figure.content-left,    figure.content-right {
        display: grid;
        grid-auto-rows: -webkit-max-content;
        grid-auto-rows: max-content;
        grid-gap: 0 2rem
    }
    figure.content-left > *,    figure.content-left > picture > img,    figure.content-right > *,    figure.content-right > picture > img {
        margin-left: 0;
        margin-right: 0
    }
    figure.content-left > *,    figure.content-right > * {
        grid-area: content
    }
    figure.content-left figcaption,    figure.content-right figcaption {
        grid-area: figcaption
    }
    figure.content-left {
        grid-template-areas: "content figcaption";
        grid-template-columns: 61.5rem 6.5rem
    }
    figure.content-left > :not(figcaption) {
        justify-self: end
    }
    figure.content-left figcaption {
        text-align: left
    }
    figure.content-right {
        grid-template-columns: 6.5rem 61.5rem;
        grid-template-areas: "figcaption content"
    }
    figure.content-right > :not(figcaption) {
        justify-self: start
    }
    figure.content-right figcaption {
        justify-self: end;
        text-align: right
    }
    main > footer,    main article > figure {
        margin-left: -8.5rem;
        margin-right: -8.5rem
    }
}
@media screen and (min-width:101.6875em) and (min-height:27.625em) {
    blockquote.pullquote.float-left,    blockquote.pullquote.float-right {
        width: 36rem
    }
    blockquote.pullquote.float-left {
        margin-left: -15rem
    }
    blockquote.pullquote.float-right {
        margin-right: -15rem
    }
    figure.content-left {
        grid-template-columns: 68rem 13rem
    }
    figure.content-right {
        grid-template-columns: 13rem 68rem
    }
    main > footer,    main article > figure {
        margin-left: -15rem;
        margin-right: -15rem
    }
}
@media screen and (min-width:122.8125em) and (min-height:27.625em) {
    blockquote.pullquote.float-left,    blockquote.pullquote.float-right {
        width: 49rem
    }
    blockquote.pullquote.float-left {
        margin-left: -28rem
    }
    blockquote.pullquote.float-right {
        margin-right: -28rem
    }
    figure.content-left {
        grid-template-columns: 81rem 26rem
    }
    figure.content-right {
        grid-template-columns: 26rem 81rem
    }
    main > footer,    main article > figure {
        margin-left: -28rem;
        margin-right: -28rem
    }
}
@media screen and (prefers-color-scheme:dark) {
    :root {
        --page: #353845;
        --page-overlay: rgba(53, 56, 69, 0.95);
        --primary: #ffa980;
        --primary2: #df8059;
        --text: #f5f3f2;
        --text-translucent: rgba(245, 243, 242, 0.75);
        --grey5: #454856;
        --grey10: #565a68;
        --grey15: #636674;
        --grey30: #838796;
        --grey45: #a1a4b3;
        --grey60: #bbbfcf;
        --grey75: #d5d8e8;
        --base00: #f5f3f2;
        --base01: #b1b0b5;
        --base02: #9d9da3;
        --base03: #7e7f87;
        --base04: #5b5d68;
        --base05: #353845;
        --base06: #353845;
        --base07: #353845;
        --base08: #aa4c44;
        --base09: #ad4b11;
        --base0A: #826526;
        --base0B: #5f7116;
        --base0C: #4f706c;
        --base0D: #237190;
        --base0E: #766283;
        --base0F: #965b33
    }
    button:active,    input[type=submit]:active {
        background-color: var(--grey75)
    }
}