/* error window */

.window.error {
    margin-top: 10rem !important;
    text-align: center !important;
    max-width: 30rem !important;

    h1 {
        font-size: 10rem;
        margin-top: unset !important;
        margin-bottom: unset !important;
    }
}

footer {
    text-align: center !important;
    max-width: 15rem;
}

@media screen and (max-width: 480px) {
    .window:not(#footer) {
        summary {    
            div:first-child {
                padding: .3rem .4rem .3rem .4rem;
            }

            div:nth-child(3) {
                display: none !important;
            }

            div:nth-child(4) {
                margin-left: auto !important;
            }
        }

        animation: unset !important;
    
        section, article {
            padding: .5rem;
        }
    
        border-top: var(--accent) solid .15rem;
        border-bottom: var(--accent) solid .15rem;
        border-left: unset !important;
        border-right: unset !important;
        border-radius: unset !important;
    
        margin-bottom: .8em;
    }

    /* window when its the first one on the page */
    .window.error {
        margin-top: 5rem !important;
    }
}

@media screen and (max-width: 1083px) {
    .navbar {
        min-height: 1.8em !important;
        max-height: 1.8em !important;
        flex-wrap: wrap;

        .nav-base {
            padding: .27em .2em !important;
        }
        .nav-left {
            height: 1.9rem;
            left: -.4rem;
        }
        .nav-left::before {
            margin-left: -10rem !important;
        }
        .nav-baselink {
            display: none !important;
        }
        .nav-baselink-mobile {
            display: block !important;
            position: absolute;
            max-width: 40em;
            width: max-content;
            z-index: 9999;
            padding: unset !important;

            a {
                display: inline-flex;
                align-items: center;
                color: var(--foreground);
                padding: .6em .7em;
                text-decoration: none;
            }

            a:hover {
                color: var(--accent);
                text-decoration: underline;
            }

            ul {
                background-color: var(--background);
                border-bottom-right-radius: 1rem;
                border-right: var(--accent) solid .15rem;
                border-bottom: var(--accent) solid .15rem;
                max-width: 10em;
                width: auto;
                margin-top: unset !important;

                li {
                    list-style-type: none;
                    margin-left: -2em;
                    padding-bottom: unset !important;
                    span {
                        padding-right: .4em;
                    }
                }
            }
        }
        .nav-baselink-mobile::before {
            display: none;
        }
        .nav-baselink-mobile summary {
            display: block !important;
            margin-top: 0px !important;
            background-color: var(--accent);
            text-decoration: unset !important;
            color: var(--background);
            padding: .3em;
            border-bottom-right-radius: 1rem;
            width: 5.7em;

            i:not(:first-child) {
                margin-left: -.5em;
                margin-right: -.9em;
                opacity: .6;
            }
        }
        .nav-links {
            display: none !important;
        }

        .nav-right {
            height: 1.4rem;
        }
        .nav-accessibility {
            right: 7.6rem;
            min-width: 1.6rem;
            span {
                transform: scale(1.3) translateY(-.05rem) translateX(.2rem);
            }
        }
        .nav-systray {
            padding: .27em .5em !important;
        }
    }
}