html {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

html[lang|="ja"] {
    font-family: "Noto Sans JP", sans-serif;
}

pre, code {
    font-family: "Noto Sans Mono", monospace;
}

body {
    margin: 0;
    color-scheme: light dark;
    background-color: light-dark(white, #101010);
    color: light-dark(black, white);
    /* https://marble-heroes.com/blog/ubt5v7_0y */
    display: flex;
    min-height: 100vh;
    flex-direction: column;

}

p#translationMsg {
    padding: 1em;
    text-align: center;
}

a {
    color: light-dark(blue, cyan);
    text-decoration: underline;

    &:visited {
        color: light-dark(purple, #ff80ff);
    }
}

header {
    display: flex;
    gap: 1ex;
    background-color: black;
    align-items: flex-end;
    padding: 1em;

    div:nth-child(1) {
        font-size: 200%;
        flex-grow: 2;
    }

    a {
        color: white;

        &:visited {
            color: white;
        }
    }

    button {
        background-color: transparent;
        border: none;
        font-size: inherit;
        font-family: inherit;
        cursor: pointer;
    }
}

/* https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/nav */
nav {
    ol {
        list-style-type: none;
        margin-top: 0;
        padding-left: 1em;

        li {
            display: inline-block;

            a::after {
                display: inline-block;
                content: ">";
                color: light-dark(black, white);
                padding-left: 1ex;
                padding-right: 1ex;
            }
        }
    }
}

.sns-buttons {

    display: flex;
    flex-direction: row-reverse;

    & > div {
        padding: 1ex;
    }
}

main {
    padding: 1em;
}

footer {
    background-color: dimgray;
    color: lightgray;
    border-top: 1px solid light-dark(dimgray, lightgray);
    margin-top: auto;

    p {
        text-align: center;
        margin: 0;
    }
}

table {
    border-collapse: collapse;
    border: 1px solid light-dark(black, white);
    td, th {
        border: 1px solid light-dark(black, white);
        padding: 0.1ex 1ex 0.1ex 1ex;
    }
}

.bold {
    font-weight: 600;
}

.center {
    text-align: center;
}

.right-align {
    text-align: right;
}

.huge {
    font-size: 500%;
}

.invert {
    background-color: light-dark(#101010, white);
    color: light-dark(white, black);
}

td.invert {
    border-color: light-dark(white, black);
}

.underline {
    text-decoration: underline;
}

#langSelectorDialog {

    &[open] {
        display: flex;
    }
    flex-direction: column;
    font-size: 150%;

    h3 {
        margin: 0;
    }

    ul {
        padding: 0;
        text-align: center;

        li {

            &.language-own {
                color: white;
                font-weight: 600;
            }

            &.language-not-available a {
                color: gray;
            }

            &.language-available a {

            }

            &::marker {
                content: none;
            }

        }
    }

}

@keyframes fourZeroFourTitleAnim {
    from {
        transform: translate(0);
        filter: drop-shadow(0 0.5ex 5px light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5)));
    }
    to {
        transform: translate(0, -0.5ex);
        filter: drop-shadow(0 1ex 10px light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5)));
    }
}

#dates {
    p {
        margin: 1ex;
        font-size: small;
        text-align: right;
    }
}

#fourZeroFourTitle {
    animation: 5s ease infinite alternate fourZeroFourTitleAnim;
}

@media (prefers-color-scheme: dark) {
    header {
        border-bottom: 1px solid white;
    }
}