:root {
    --html-bg: #eff1fb;
    --html-fg: #000000;
    --frame-bg: rgba(255, 255, 255, 0.5);
    --frame-border: rgba(255, 255, 255, 0.8);
    --fx-tint: 0;
    --fx-color: 100%;
    --fx-bright: 100%;
    --vfx-pad: 0.33em;

    --header-main-fg: #476c4f;
    --header-alt-fg: #345caa;
    --header-glow: #ffffff;

    --link-base: #005959;
    --link-accent: #229595;
    --link-hover: #004040;
    --link-active: #002022;
    --link-shadow: #74a8a8;

    --bold-msg-fg: #8a099c;
    --border-img: #777777;
    --border-accent: #adbcc6;

    --typo-form-fg: #000000;
    --typo-form-bg: #ffffff;

    --html-bg-img: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADAAgMAAAAvsoSUAAAACVBMVEXx8fvS4fv///9MzaARAAAB5ElEQVR4AezWoXnFYAiG0XtFR8g+jICA/VepTnhOaP3/OcQrjuPz531vV/w3yD34uV21B9ft6j3o+xUr4RHkSngEtRIewYroZxALYQS5EEZQC2EEC6JnEAthBLkQRlALYQS9EGYQ74QZ5DthBvVOmEG/E2ZgxBdBkoCgSEDQJiAIEhAkCQiKBARtAoIgAUGSgKBIQNAmIAgSECQJCIoEBG0CggCBQYLAoEBg0CA4CBAYJAgMCgQGDYKDAIFBgsCgQFCAneAEJzjBCU6AneAE2AmuXld6T7XUA6zFBwgTgDABCBOAMAEIEoAwAQgTgDABCBKAMAEIE4AwAQgSgDABCBOAMAEIEoAwAQgTgCABM0EIEoQgQQgTMBGMAMEIEIwwARPBCBCMAMEIEzARjADBCBCMMAETwQgQjADBCBMwEYwgwQgTjDDht9IytmEYhoHgI6VHyZQchSVxU6aQAre87w/wWdRTFZVP2gFPxgHf4ABCKQVCKwXCKAUCSoFAGQUCbRQIjFEgGAkOUEKBICSeC4xQIAgJ/kDtFQ7Qe4UDzF6BsJfgBWqtcIFeK1xg1gqEtQQe8J8kpf1v1QenR0MPnx9vfYH0FfUl4GvGF5mvSl/Gvu4jgl9Zfin6tRsV/NNBP04qLj8i80MD+G6eGgAAAABJRU5ErkJggg==);
    --list-marker: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAKCAYAAACXDi8zAAAAIklEQVR4AWMgD+j45ykD8XEoVoZLQAX+Q/FxghKYRtEJAADJtBlRhefIagAAAABJRU5ErkJggg==);
}

@media (prefers-color-scheme: dark) {
    :root {
        --html-bg: #303030;
        --html-fg: #ffffff;
        --frame-bg: rgba(92, 92, 92, 0.3);
        --frame-border: rgba(92, 92, 92, 0.5);

        --header-main-fg: #77cc8a;
        --header-alt-fg: #7da7fb;
        --header-glow: #000000;

        --link-base: #22eaea;
        --link-accent: #7be1e1;
        --link-hover: #aeecec;
        --link-active: #eeffff;
        --link-shadow: #50dddd;

        --bold-msg-fg: #dc6cec;
        --border-img: #777777;
        --border-accent: #adbcc6;

        --typo-form-fg: #ffffff;
        --typo-form-bg: #242424;

        --html-bg-img: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADAAgMAAAAvsoSUAAAACVBMVEUkLC8lMzUfISFqy7uzAAAB5ElEQVR4AezWoXnFYAiG0XtFR8g+jICA/VepTnhOaP3/OcQrjuPz531vV/w3yD34uV21B9ft6j3o+xUr4RHkSngEtRIewYroZxALYQS5EEZQC2EEC6JnEAthBLkQRlALYQS9EGYQ74QZ5DthBvVOmEG/E2ZgxBdBkoCgSEDQJiAIEhAkCQiKBARtAoIgAUGSgKBIQNAmIAgSECQJCIoEBG0CggCBQYLAoEBg0CA4CBAYJAgMCgQGDYKDAIFBgsCgQFCAneAEJzjBCU6AneAE2AmuXld6T7XUA6zFBwgTgDABCBOAMAEIEoAwAQgTgDABCBKAMAEIE4AwAQgSgDABCBOAMAEIEoAwAQgTgCABM0EIEoQgQQgTMBGMAMEIEIwwARPBCBCMAMEIEzARjADBCBCMMAETwQgQjADBCBMwEYwgwQgTjDDht9IytmEYhoHgI6VHyZQchSVxU6aQAre87w/wWdRTFZVP2gFPxgHf4ABCKQVCKwXCKAUCSoFAGQUCbRQIjFEgGAkOUEKBICSeC4xQIAgJ/kDtFQ7Qe4UDzF6BsJfgBWqtcIFeK1xg1gqEtQQe8J8kpf1v1QenR0MPnx9vfYH0FfUl4GvGF5mvSl/Gvu4jgl9Zfin6tRsV/NNBP04qLj8i80MD+G6eGgAAAABJRU5ErkJggg==);
        --list-marker: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAKCAYAAACXDi8zAAAAIklEQVR4AWMgD6StXKgMxMehWBkuARX4D8XHCUpgGkUnAAAadCXBQJqJiAAAAABJRU5ErkJggg==);
    }
}

html { margin: 0; padding: 0; color: var(--html-fg);
    background: var(--html-bg) var(--html-bg-img) center top fixed;
    filter: brightness(var(--fx-bright)) saturate(var(--fx-color)); }
body { width: 98%; max-width: 626px; margin: 0 auto; padding: 0; position: relative;
    font-size: 16px; font-family: 'Lato', 'Trebuchet MS', sans-serif; }
main { background: var(--frame-bg); padding: 0.2em 0.8em;
     border: 1px solid var(--frame-border); border-radius: 6px; }

.hide { display: none; }
body::before {
    /* magic */ content: ""; display: block; position: fixed;
    top: 0; left: 0; right: 0; width: 100%; height: 100%; z-index: -1;
    /* personality */ background: var(--html-bg) var(--html-bg-img) center top fixed;
    filter: hue-rotate(var(--fx-tint));
}
#vfx-controls { background: #111; color: #eee; font-size: 1rem;
    summary { background: #844517; color: #fff; border: 1px solid #000; padding: var(--vfx-pad); }
    &[open] summary { border-bottom-color: transparent; }
    vfx-grid { display: flex; justify-content: space-between; flex-wrap: wrap;
        padding: var(--vfx-pad);

        label { width: 25%; min-width: 180px; margin: 0 auto;
            text-align: center; text-transform: uppercase; }
        label input { width: 100%; &[range] { cursor: pointer; } }
        /* style it without swinging the #vfx-reset sledgehammer */
        label:has(button) { margin: 1em auto var(--vfx-pad); }
        label button { padding: var(--vfx-pad); width: 100%; border-radius: 8px;
            background: #333; color: #fff; border: 1px solid #444;
            &:hover, &:focus { background: #444; border-color: #555; }
            &:active { background: #111; border-color: #222; transform: translate(0, 2px); }
        }
    }
}

header, h2, h4, h6   { color: var(--header-main-fg); }
          h1, h3, h5 { color: var(--header-alt-fg); }
h1, h2               { margin: 1.2em auto 0.8em; text-shadow: var(--header-glow) 0 1px 2px; }
      h3, h4, h5, h6 { margin: 0.8em auto 0.6em; text-shadow: var(--header-glow) 0 1px 2px; }
hr { width: 80%; margin: auto; height: 0; border: 0; border-top: 1px solid var(--border-accent); }

p, li { line-height: 1.6; }
p.date { font-size: smaller; }

a { text-decoration: none; color: var(--link-base); border-bottom: 1px solid transparent;
    transition: text-shadow 0.33s ease-in-out, color 0.15s ease-out, border 0.15s ease-out; }
a:hover, a:focus { color: var(--link-hover); border-bottom-color: var(--link-accent); }
a:active { color: var(--link-active); border-bottom: 1px solid var(--link-hover); }
a:hover, a:focus, a:active { text-shadow: 1px 2px 5px var(--link-shadow); }
a:has(>img) { text-shadow: none; border-bottom: 0 none; }

footer a#wrap88 { display: inline-block; }
footer a#wrap88 img { display: block; max-width: 100%; }

header { margin: 0; padding: 8px 0 0; font-size: 1.75em; font-weight: bold; }
header a, footer a { color: inherit; }
header ul { display: inline; list-style-type: none; margin: 0; padding: 0; }
header li { display: inline-block; margin-left: 1em; }
header li:first-child { margin-left: 0; }
header li::before { content: '←'; }
header li:first-child::before { content: none; }
footer { margin: 3.25em 0 2.00em; text-align: center; }

dl { margin: 1.40em 0; }
dt { margin: 0.77em 0 0.50em; padding-bottom: 4px; font-weight: bold; }
dd { margin: 0 1.68em 1.68em; }
dt a { font-weight: normal; }

.center-text { text-align: center; }
img { border: 1px solid var(--border-img); margin: 0.15em auto; max-width: 99%; }
img.block { display: block; }
footer img { border: 0; margin: 0; }
img[src*="counter.php"] { height: 32px; }

.strike { text-decoration: line-through; }
blockquote { margin: 1em 2.86em 1em 0.71em; padding: 0 0 0 1.93em; line-height: 1.46;
    max-width: 480px; border-left: 2px solid var(--border-accent); }
.closing-quote { font-style: italic; }

.boldmsg { font-size: 120%; color: var(--bold-msg-fg);
    border: 1px solid; padding: 0.75em; margin: 2em 0; }

ul.news a { font-weight: bold; }
ul { padding-left: 0.93em; list-style-image: var(--list-marker); }
ul.plain { padding-left: 1em; list-style: none; }

#seasonal { display: none; }
/* index.html: 742 = 626 body + (48 #seasonal + 2×5 margin)*2 */
@media screen and (min-width: 742px) and (min-height: 92px) {
    #seasonal { display: block; position: fixed; bottom: 10px; right: 5px;
        width: 48px; text-align: center; }
    #seasonal img { max-width: 100%; border: 0; margin: 0; }
}

/* typo.html */
textarea#typoBox { background-color: var(--typo-form-bg); color: var(--typo-form-fg);
    border: 1px solid var(--border-accent); border-radius: 3px;
    padding: 4px; margin-bottom: 3px; width: 100%; box-sizing: border-box; }
#typoResult { font-weight: bold; }