@font-face { font-family: 'OverTheRainbow'; font-weight: normal; font-style: normal; src: url(/assets/overtherainbow.ttf) format('truetype'); font-display: fallback; }
@font-face { font-family: 'Inconsolata'; font-weight: normal; font-style: normal; src: url(/assets/inconsolata.ttf) format('truetype'); font-display: fallback; }

body {
  --g-bg: #e5dacc;
  --g-text: black;
  --g-fig: #d4c1aa;
  --g-caption: #ccb499;
  --g-foot: #ccb499;
  --g-foot-link: #444;
  --g-code-var: #9c2022;
  --g-code-keyword: #2649c0;
  --g-code-comment: #427828;
}
body.dark {
  --g-bg: #221a11;
  --g-text: white;
  --g-fig: #433522;
  --g-caption: #54422b;
  --g-foot: #54422b;
  --g-foot-link: #ccc;
  --g-code-var: #e4797b;
  --g-code-keyword: #8a9fe8;
  --g-code-comment: #addc96;
}
@media print {
  body {
    --g-bg: #e5dacc;
    --g-text: black;
    --g-fig: #d4c1aa;
    --g-caption: #ccb499;
    --g-foot: #ccb499;
    --g-foot-link: #444;
    --g-code-var: #9c2022;
    --g-code-keyword: #2649c0;
    --g-code-comment: #427828;
  }
}

body { margin: 0; padding: 0; font: 18pt sans-serif; background: var(--g-bg); color: var(--g-text); }
header { margin: 0; padding: 0; background: var(--g-bg) url(/assets/headback-smoothed.webp) no-repeat top left; background-size: contain; max-height: 350px; min-width: 900px; max-width: 1450px; aspect-ratio: 145/35; position: relative; width: 100%; }
a#logo { display: block; position: absolute; top: 5px; left: 20px; width: 450px; height: 154px; background: url(/assets/headlogo.webp) no-repeat top left; background-size: contain; text-indent: -9999px; overflow: hidden; z-index: 3; }
h1 { display: flex; align-items: center; font: clamp(24px, 3.5vw, 60px)/1.4 OverTheRainbow, sans-serif; padding: 25px 0 0 80px; margin: 0 70px 0 100px; max-width: 1000px; transform: rotate(-3deg); text-indent: 410px; height: 210px; overflow: hidden; text-align: center; }
form#mode { background: url(/assets/modetag.png) no-repeat top left; background-size: contain; width: 135px; height: 305px; position: absolute; top: 12px; left: 80px; z-index: 2; display: block; color: black; }
form#mode fieldset { border: 0; margin: 0; padding: 0; text-align: center; width: 115px; margin-top: 160px; }
form#mode legend { display: none; }
form#mode ul { list-style: none inside; margin: 0; padding: 0; }
form#mode li { margin: 0 0 35px; padding: 0; font: 36px/1.0 OverTheRainbow, sans-serif; position: relative; }
form#mode li svg { width: 195px; height: 50px; pointer-events: none; position: absolute; top: calc(50% - 15px); left: -30px; }
form#mode li svg g { stroke-dasharray:1800; stroke-dashoffset:1800; transition:.8s all; }
form#mode li input:checked ~ svg g { stroke-dashoffset:0; }
form#mode input { display: none; }
form#mode input:not(:checked) ~ label { cursor: pointer; }
nav { position: absolute; top: 62%; right: 16%; width: 206px; height: 64px; }
nav ul { margin: 0; padding: 0; list-style: none inside; }
nav li { display: inline-block; width: 64px; height: 64px; background: url(/assets/headlinks.png) no-repeat top left; background-size: 192px 128px; }
nav li:hover { background-position-y: bottom; }
nav li#nav-mastodon { background-position-x: 0px; }
nav li#nav-github { background-position-x: -64px; }
nav li#nav-rss { background-position-x: -128px; }
nav a { text-indent: -9999px; overflow: hidden; text-decoration: none; display: block; width: 100%; height: 100%; }

main { max-width: 1360px; padding: 0 20px 20px; line-height: 1.3em; }
main #parent::before { content: "\21e6 \a0"; }
main dl.articles-grid dd { margin-bottom: 1em; }
main time { font-size: 0.8em; font-style: italic; }
main h2 { font: 1.4em OverTheRainbow, sans-serif; text-decoration: underline; }
main a { color: var(--g-text); }
main figure { display: flex; flex-direction: column; align-items: center; background: var(--g-fig); padding: 16px 0 0; }
main figure.compact table { font-size: 0.7em; }
main figure.left-aligned { align-items: flex-start; padding-left: 1em; }
main figure img, main figure video { max-width: 95%; }
main figcaption { font-style: italic; text-align: center; margin-top: 0.5em; background: var(--g-caption); margin-top: 16px; width: 100%; padding: 16px; }
main table { border-collapse: collapse; margin: 0 16px; }
main th, main td { border: 1px solid black; padding: 0.5em; }
main th { font-family: OverTheRainbow, sans-serif; background: var(--g-caption); }
main samp { font: 16pt Inconsolata, monospace; background: var(--g-fig); display: block; }
main code, main samp pre, main samp kbd { font: 16pt Inconsolata, monospace; }
main samp h3 { font-family: sans-serif; background: var(--g-caption); margin-bottom: 0; padding: 1em; }
main samp pre { margin: 0; padding: 1em; overflow: auto; }
main samp kbd { color: var(--g-code-keyword); }
main samp var { color: var(--g-code-var); }
main samp s { color: var(--g-code-comment); text-decoration: none; }
main blockquote { border-left: 8px solid var(--g-caption); margin-left: 0; padding-left: 1em; }
main dt { text-decoration: underline; }
main dd { margin-bottom: 1em; }

footer { margin: 0; padding: 0; background: var(--g-bg) url(/assets/footback-smoothed.webp) no-repeat bottom left; background-position-y: 16px; background-size: contain; max-height: 230px; min-width: 900px; max-width: 1450px; aspect-ratio: 145/23; position: relative; width: 100%; font-size: 0.8em; }
footer div { padding: 40px 80px 0; }
footer dl { display: grid; grid-template-columns: 1fr 1fr 2fr; grid-template-rows: 1fr auto; grid-auto-flow: column; margin: 0; }
footer dt { font: 1.2em OverTheRainbow, sans-serif; text-decoration: underline; }
footer dd { margin: 0; }
footer dd ul { list-style: none inside; margin: 0; padding: 0; }
footer dd li { margin: 0; }
footer dd li a { color: var(--g-foot-link); }

body.dark header { background-blend-mode: hard-light; }
body.dark footer { background-blend-mode: soft-light; }
body.dark nav li { filter: invert(1); }
body.dark figure.invertable img { filter: invert(1); }

@media (max-width: 1250px) {
    a#logo { width: 320px; height: 104px; }
    h1 { height: auto; max-height: 160px; text-indent: 300px; max-width: 900px; margin-left: 20px; }
    form#mode { width: 96px; height: 217px; }
    form#mode fieldset { width: 80px; margin-top: 115px; }
    form#mode li { margin: 0 0 20px; padding: 0; font: 24px/1.0 OverTheRainbow, sans-serif; }
    form#mode li svg { width: 155px; height: 40px; left: -27px; }
    footer dl { grid-template-rows: 0 auto; }
    footer dt { height: 0; overflow: hidden; }
}
@media (max-width: 900px) {
    header { min-width: 600px; }
    a#logo { top: 0; left: 0; width: 225px; height: 77px; }
    h1 { height: auto; padding-top: 20px; max-height: 120px; text-indent: 150px; max-width: 900px; font-size: clamp(18px, 8vw, 32px); margin-left: 20px; }
    form#mode { top: 0; left: 50px; width: 74px; height: 168px; }
    form#mode fieldset { width: 65px; margin-top: 85px; }
    form#mode li { margin: 0 0 15px; padding: 0; font: 20px/1.0 OverTheRainbow, sans-serif; }
    form#mode li svg { width: 120px; height: 35px; }
    nav { width: 158px; height: 48px; top: 62%; right: 15%; }
    nav li { width: 48px; height: 48px; background-size: 144px 96px; }
    nav li#nav-mastodon { background-position-x: 0px; }
    nav li#nav-github { background-position-x: -48px; }
    nav li#nav-rss { background-position-x: -96px; }
    footer { background: none; max-height: auto; aspect-ratio: auto; min-width: 250px; }
    footer div { padding: 20px; border-top: 1px solid black; background: var(--g-foot); }
    footer dl { display: block; }
    footer dt { height: auto; }
}
@media (max-width: 600px) {
    body { font-size: 14pt; }
    header { width: 100%; background: var(--g-bg) url(/assets/headback-mobile-smoothed.webp) no-repeat top left; background-size: contain; min-width: 300px; aspect-ratio: 59/23; }
    h1 { padding-top: 40px; margin-right: 30px; text-indent: 60px; padding-left: 40px; font-size: clamp(18px, 6vw, 32px); margin-left: 20px; }
    a#logo { top: 0; left: 0; width: 150px; height: 53px; }
    form#mode { left: 15px; width: 62px; height: 152px; }
    form#mode fieldset { width: 55px; margin-top: 70px; }
    form#mode li { font-size: 16px; }
    nav { top: 95%; right: 0; }
    main { padding-top: 16px; }
    main samp { font-size: 12pt; }
    main table, main thead, main tbody, main th, main tr, main td { display: block; }
    main th, main td { border: none; border-bottom: 1px solid black; text-align: left; }
    main tr:nth-of-type(2n) td { background: var(--g-caption); }
}

body, header, footer, a { transition: .8s color, .8s background; }

.hide-nav { font-size: 16pt; }
.hide-nav nav, .hide-nav form#mode, .hide-nav a#parent { display: none; }
.hide-nav main { margin-top: -25px; }

@media print {
    body { background: white; color: black; font-size: 16pt; }
    header { background: transparent; max-height: auto; height: auto; aspect-ratio: auto; }
    a#logo { background: transparent; text-indent: 0; display: block; color: black; text-decoration: none; height: auto; position: static; }
    h1 { transform: none; margin: 0 0 1em; padding: 0; position: static; text-align: left; text-indent: 0; }
    form#mode, nav, main #parent, footer dl { display: none; }
    main { padding: 0; }
    main a { color: black; }
    main samp pre { max-width: 100%; white-space: pre-wrap; }
    main samp, main samp h3, main figure, main figcaption { background: transparent; color: black; }
    body.dark main figure.invertable img { filter: invert(0); }
    footer { background: transparent; height: auto; }
    footer div { padding: 0; }
}