:root {
    --primaryColor: #00a8f3;
    --secondaryColor: #0073a6;
    --textColor: black;
    --backColor: white;
}

a:visited, a:link {
    color: blue;
}

a:hover {
    color: orangered;
}

a:active {
    color: black;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primaryColor: #36393f;
        --secondaryColor: #36393f;
        --textColor: #ffffff;
        --backColor: #171717;
    }

    a:visited, a:link {
        color: #94DDFF;
    }

    a:hover {
        color: orangered;
    }

    a:active {
        color: white;
    }
}

:root {
    --borderColor: var(--primaryColor);
    --bgColor: var(--secondaryColor)
}

body {
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bgColor);
}

/*nav.main.nav-home {border-bottom-color: var(--borderColor);}*/

.divs {
    margin: 1em auto auto;
    color: var(--textColor);
    background-color: var(--backColor);
    box-sizing: border-box;
    padding: 0.7em;
    width: 88%;

    > h1:first-child, > h2:first-child, > h3:first-child, > h4:first-child, > h5:first-child, > h6:first-child {
        margin-top: 0;
    }
}

button, input, textarea, html, select, option {
    font-family: monospace;
}

nav.headernav {
    color: #424242;
    background-color: currentColor;
    box-sizing: content-box;
    height: calc(4.4em + 4px);

    > div {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        flex-direction: row;
        height: 100%;
        position: relative;
        margin: auto;
        width: 88%;
        box-sizing: border-box;
        overflow: auto hidden;

        > antnav-option {
            border-width: 4px;
            border-style: solid;
            padding: 0.2em;
            width: 4em;
            height: 4em;
            border-bottom: none;

            > a > img {
                width: 4em;
                height: 4em;
            }
        }
    }

    /*noinspection CssInvalidFunction*/
    --base-color: attr(data-base-color type(<color>));
    border-bottom: 4px solid var(--base-color, #00a8f3);
}

/*noinspection CssInvalidPropertyValue, CssInvalidFunction*/
@supports not (x: attr(x type(*))) {
    nav.headernav {
        border-bottom: 4px solid #00a8f3;
    }
}

.breadcrumbs-list {
    background-color: var(--backColor);
    border-bottom: 4px solid var(--primaryColor);

    > div {
        width: 88%;
        margin: auto;
    }

    ol {
        width: fit-content;
        margin: 0;
        height: 2.5em;
        max-width: 88%;
        overflow-x: auto;
        column-gap: 1ch;
        min-width: 0;
        padding: 2px;

        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        list-style: none;
        font-size: 0.9rem;
        justify-content: flex-end;

        > li {
            display: flex;
            align-items: center;
            text-wrap: nowrap;
            color: #555;

            /* Link styles belong under 'li', not '::after' */

            a {
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }

            /* Separator pseudo-element */

            &:not(:last-child)::after {
                content: ">";
                margin: 0 0 0 0.5rem;
                color: #888;
            }

            /* Active page style */

            &[aria-current="page"] {
                color: #222;
                font-weight: 600;
            }
        }
    }
}

.special-event-ventilation {
    aspect-ratio: 1200 / 800;
    max-height: 75vh;
    max-width: 80vw;
    display: block;
    margin: auto;
    height: auto;
    width: auto;
}


/*noinspection CssInvalidFunction*/
:root {
    --primaryColor: attr(data-p type(<color>));
    --secondaryColor: attr(data-s type(<color>));
}

/*noinspection CssInvalidPropertyValue, CssInvalidFunction*/
@supports not (x: attr(x type(*))) {
    :root {
        --primaryColor: #00a8f3;
        --secondaryColor: #0073a6;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --bgColor: #000000;
        --secondaryColor: #000000;
    }
}

.bottom-divs {
    height: 100vh;

    & > :first-child {
        & > :first-child {
            height: 7vh;
            border-bottom: 4px solid var(--primaryColor);

            & + div {
                height: 93vh;
                background-color: #36393f;
                background-image: linear-gradient(#2b2d32 5%, #36393f 12%, #36393f 100%);

                & > :first-child {
                    padding: 5vh;
                }
            }
        }
    }
}

/*noinspection CssInvalidFunction,CssInvalidPropertyValue*/
antnav-option {
    border-color: attr(data-o type(<color>));
    background-color: attr(data-b type(<color>));
}

.sans-serif, .sans-serif * {
    font-family: sans-serif;
}