html {
    --fg: black;
    --bg: white;
    --link: #666;
    --img-filter: none;
    --img-filter-alt: invert();
    --img-filter-link: brightness(40%);
}

html.alt {
    --fg: white;
    --bg: black;
    --link: #aaa;
    --img-filter: invert();
    --img-filter-alt: none;
    --img-filter-link: brightness(66.6%);
}

@media (prefers-color-scheme: dark) {
    html {
        --fg: white;
        --bg: black;
        --link: #aaa;
        --img-filter: invert();
        --img-filter-alt: none;
        --img-filter-link: brightness(66.6%);
    }

    html.alt {
        --fg: black;
        --bg: white;
        --link: #666;
        --img-filter: none;
        --img-filter-alt: invert();
        --img-filter-link: brightness(40%);
    }
}

@keyframes fadein {
    from { opacity: 0 }
    to { opacity: 1 }
}

html, body {
    font-family: sans;
    padding: 0;
    margin: 0;
    color: var(--fg);
    background: var(--bg);
    min-height: 100vh;
    transition: background 0.25s, color 0.25s;
}

body {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
}

body > * {
    box-sizing: border-box;
    width: 100%;
    max-width: 80ch;
    margin: 0 auto;
    animation: fadein .5s;
    flex: 0 0 auto;
}

main {
    padding: 1rem;
    flex: 1 1 100%;
}

a {
    color: var(--link);
    font-weight: bold;
    text-decoration: none;
}
a, button { cursor: pointer }
a:hover, button:hover { color: var(--fg) }

h1 { letter-spacing: 1ch }

p, h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
}

header {
    padding: 1rem;
}

header > a {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    text-decoration: none;
    color: var(--fg);
    margin-top: .5rem;
    margin-bottom: 1.5rem;
}

header > a img {
    height: 3.5rem;
    margin-right: 1.75rem;
    filter: var(--img-filter);
}

@media (max-width: 600px) {
    header > a img { height: 2.5rem; margin-right: .75rem; }
    header > a h1 { font-size: 1.3rem }
}

header nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;

    display: flex;
    flex-flow: row nowrap;
    border-top: 1px solid var(--link);
}

header nav ul li { display: inline-block; }

header nav ul a {
    position: relative;
    display: inline-block;
    padding: 1rem 0;
    margin: 0 .5rem;
    text-decoration: none;
    font-weight: bold;
    color: var(--link);
}

/*@media (max-width: 600px) {
    header nav ul a {
        font-size: .75em;
    }
}*/

@media (max-width: 500px) {
    header nav ul li.link a {
        writing-mode: tb-rl;
        padding: .5rem 0;
        margin: 0 .5rem;
        min-width: 1rem;
        box-sizing: border-box;
    }
}

header nav ul a::after {
    content: "";
    left: 50%; right: 50%; top: -3px;
    border-top: 5px var(--fg) solid;
    position: absolute;
    transition: border-top 0.125s, left 0.125s, right 0.125s;
}

header nav ul a.current { color: var(--fg) }
header nav ul a.current::after {
    left: 0;
    right: 0;
}

.context {
    width: max-content;
    max-width: none;
    position: fixed;
    z-index: 1000;
}

.context .menu {
    display: flex;
    flex-flow: column nowrap;
    border: 1px solid var(--link);
    background: var(--bg);
}

.context .menu button {
    position: relative;
    display: block;
    text-align: right;
    background: var(--bg);
    color: var(--link);
    border: none;
    font-weight: bold;
    font-size: 1rem;
    padding: .25rem .5rem;
    padding-left: 1em;
    margin: .25rem 0;
}

.context .menu button:hover { color: var(--fg); }

.context .menu button.current::after {
    position: absolute;
    content: "";
    top: 0; bottom: 0; right: -3px;
    border-right: 5px var(--fg) solid;
    transition: border-right 0.125s;
}

.spacer { flex: 1 1 0; }

a[action=language] { white-space: nowrap; }
a[action=language]::after, a[action=language]::before {
    position: static;
    display: inline-block;
    height: 1em;
    line-height: 1;
    padding: .125em;
    transition: 0.125s color, 0.125s background, 0.125s border-color;
}
a[action=language]::before {
    content: "A";
    border-radius: .25em 0 0 .25em;
    border: 1px solid currentColor;
    border-right: none;
}
a[action=language]::after {
    content: "文";
    border-radius: 0 .25em .25em 0;
    background: var(--link);
    color: var(--bg);
    border: 1px solid var(--link);
    border-left: none;
}
a[action=language]:hover::after {
    background: var(--fg);
    border-color: var(--fg);
}


a[action=theme] .theme-button {
    border-radius: .25em;
    background: currentColor;
    padding: .125em;
    height: 1em;
    border: 1px solid currentColor;
    transition: 0.125s color, 0.125s background, 0.125s border-color;
}

a[action=theme] img {
    filter: var(--img-filter-alt);
    padding: .125em;
    height: 100%;
    box-sizing: border-box;
}

article time, article cite {
    display: block;
    font-size: 0.8rem;
    color: var(--link);
}

article {
    word-break: break-word;
    margin-bottom: 1rem;
}

article p, article h2 {
    margin-top: .5rem;
    margin-bottom: 1em;
}

article p { font-family: serif }

article {
    padding-left: 1rem;
    border-left: 1px solid var(--link);
    padding-bottom: .25rem;
}

article time, article cite, article h2, article h3 { position: relative }
article time::before, article cite::before, article h2::before, article h3::before {
    content: "";
    position: absolute;
    content: "";
    top: 0; bottom: 0; left: calc(-3px - 1rem);
    border-left: 5px var(--fg) solid;
    transition: border-left 0.125s;
}
article h3::before { top: 25%; bottom: 25%; }

article time::before, article cite::before {
    border-width: 3px;
    left: calc(-2px - 1rem);
    border-color: var(--link);
}

.postlist {
    list-style-type: none;
    margin: 0;
    padding: 0;

    display: flex;
    flex-flow: column nowrap;
    gap: 1rem;
}

.postlist li {
    display: flex;
    flex-flow: row nowrap;
}

.postlist time { flex: 0 0 25% }
.postlist a {
    flex: 0 0 75%;
    font-weight: bold;
    color: var(--link);
}

footer {
    position: relative;
    padding: 1rem;
    right: 0; bottom: 0; left: 0;
}

footer ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
    gap: .75rem;
}

footer img, .contactlist img {
    filter: var(--img-filter-link);
    width: 1.5rem;
    height: 1.5rem;
}

footer img:hover {
    filter: var(--img-filter-alt);
}

.contactlist {
    display: flex;
    flex-flow: column nowrap;
}
.contactlist a {
    display: flex;
    flex-flow: row nowrap;
    max-width: max-content;
    gap: .75em;
    margin-bottom: .75em;
    align-items: center
}
.contactlist a:hover img { filter: var(--img-filter-alt); }

ul.news {
    display: flex;
    flex-flow: row wrap;
    margin: 1em 0 3em 0;
    padding: 0;
    max-width: 100%;
}

ul.news li {
    display: block;
    height: 30ch;
    flex: 1 1 30ch;
    margin: .5em;
}

ul.news figure {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    outline: 1px solid var(--fg);
}

ul.news figure figcaption {
    position: absolute;
    color: white;
    background: #000a;
    z-index: 200;
    bottom: 0;
    padding: .5em 1em;
}

ul.news figure img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

ul.news figure cite {
    display: block;
    position: absolute;
    left: .5em;
    top: .5em;
    padding: 0.25em;
    background: #f13;
    color: white;
    max-width: 20ch;
}