:root {
    --main-color: #000000;
    --font-serif: RobotoSlab, serif;
    --font-sans-serif: Roboto, sans-serif;
    --font-monospace: RobotoMono, monospace;
}

@media (prefers-color-scheme: light) {
    :root {
        --text-color: #000000;
        --date-color: #7F7F7F;
        --background-color: #FFFFFF;
        --background-sub-color: #FFFFFF;
        --header-background-color: #78A0FF;
        --header-button-hover-color: #BFBFFF;
        --link-color: #003FBF;
        --visited-link-color: #7F00BF;
        --error-text-color: #BF0000;
        --layer-color: rgba(127,127,127,0.5);
    }
}

@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;
        --link-color: #7FBFFF;
        --visited-link-color: #BF9FFF;
        --error-text-color: #FF7F7F;
    }
}

header {
    .header-logo {
        margin: 1px 4px;
        background-image: url(./logo.png);
        width: 144px;
        height: 48px;
        background-size: 144px;
        background-position: 0 -16px;
    }
    .header-logo img {
        display: none;
    }

    .header-text {
        display: none;
    }
}

article {
    h1 {
        font-family: var(--font-serif);
    }
    blockquote {
        outline: 1px solid var(--text-color);
        padding: 8px;
        margin: 12px 16px;
    }
    li {
        padding: 0.125em 0;
    }
}

@media (prefers-color-scheme: light) {
    header input#article_search::placeholder {
        color: inherit;
        opacity: 0.375;
    }
}

footer {
    a {
        color: var(--link-color);
    }
    
    a:visited {
        color: var(--visited-link-color);
    }

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

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

.fskey {
    inline-size: 24px;
    object-fit: scale-down;
    height: 18px;
}

details > summary {
    cursor: pointer;
}