:root {
    --main-color: #000000;
    --text-color: #DFDFDF;
    --date-color: #7F7F7F;
    --background-color: #171717;
    --background-sub-color: #000000;
    --header-background-color: #3F3F5F;
    --header-button-hover-color: #3F3F9F;
}
@media (prefers-color-scheme: light) {
    :root {
        --text-color: #000000;
        --date-color: #7F7F7F;
        --background-color: #FFFFFF;
        --background-sub-color: #FFFFFF;
        --header-background-color: #DFDFFF;
        --header-button-hover-color: #BFBFFF;
    }
    
    a.no-link {
        color: #Bf0000;
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #DFDFDF;
        --date-color: #7F7F7F;
        --background-color: #171717;
        --background-sub-color: #000000;
        --header-background-color: #3F3F5F;
        --header-button-hover-color: #3F3F9F;
    }
    
    a {
        color: #7FBFFF;
    }
    
    a:visited {
        color: #BF9FFF;
    }
    
    a.no-link {
        color: #ff7f7f;
    }
    
    header a:visited {
        color: inherit;
    }
}

html {
    font-family: Lato, sans-serif;
    font-weight: 400;
    background-color: var(--background-color);
    color: var(--text-color);
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: calc(100% - 16px);
    margin: 8px;
}

header {
    font-family: RobotoMono, NotoSans;
    height: 50px;
    background: var(--header-background-color);
    padding: 5px;
    position: relative;
    margin-bottom: 5px;
    z-index: 200;
}

header a {
    color: inherit;
    text-decoration: inherit;
}

.header-logo {
    width: 48px;
    height: 48px;
    float: left;
    margin: 1px 1px;
}

.header-logo > img {
    transition: transform 604800s;
}

.header-text {
    float: left;
    height: 100%;
    margin: 1px 7px;
    line-height: 22px;
    text-align: center;
    font-size: large;
}

.header-button {
    font-weight: 500;
    padding: 1px 10px;
    font-size: 16px;
    line-height: 48px;
    height: 48px;
    float: left;
    display: block;
    cursor: pointer;
    transition: background-color 200ms, border-bottom-width 200ms;
}

.header-button.disabled {
    color: gray
}

.header-button:hover {
    background: rgba(127,127,127,0.5);
    border-bottom: 5px solid var(--header-button-hover-color);
}

.header-button.disabled:hover {
    background: rgba(127,127,127,0.5);
    border-bottom: 5px solid silver;
}

section {
    flex: 1;
}

page {
    white-space: break-spaces;
    display: block;
    max-width: 87.5%;
    margin-inline: auto;

    h1, h2, h3, h4, h5, h6 {
        white-space: nowrap;
        margin: 0;
    }

    p {
        margin: 0;
    }

    a[href] {
        text-decoration-line: none;
    }

    a:hover {
        text-decoration-line: underline;
    }

    *[title] {
        text-decoration-style: dotted;
        text-decoration-line: underline;
        cursor: help;
    }

    a[href][title] {
        text-decoration-style: unset;
        cursor: pointer;
    }

    cite {
        font-style: inherit;
    }

    .text-serif {
        font-family: FreeSerif, serif;
    }

    .text-sans-serif {
        font-family: Lato, sans-serif;
    }

    .text-monospace {
        font-family: RobotoMono, monospace;
    }

    div.hatnote {
        padding-left: 1.6em;
        margin-bottom: 0.5em;
        font-style: italic;
    }
}