/*SITE-WIDE STYLING*/
:root {
    color-scheme: light dark;
    --text_color: light-dark(black, white);
    --heading_font: Georgia, serif;
    --text_font: "DejaVu Sans", sans-serif;
}
@view-transition {
    navigation: auto;
}
::view-transition-group(root) {
    animation-duration: 0.3s;
}

* {
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
    padding-bottom: env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0)); /*Chromium-based browsers support max, as in some circumstances they recalculate safe-area-inset-*. Safari and Firefox do not. */
    background-color: light-dark(#f7fafb,rgb(39, 42, 45)); /*Interestingly placing this in body causes dark reader (extension, dynamic mode) to not fully invert the page colors, so placing it here seems to be more full-proof*/
    font-family: var(--text_font);
    text-underline-offset: 10%;
}
main {
    padding-left: env(safe-area-max-inset-left, env(safe-area-inset-left, 0)); /*Used by Safari which will otherwise draw everything behind the notch */
    padding-right: env(safe-area-max-inset-right, env(safe-area-inset-right, 0));
    :not(h) { /*I'm not actually sure why this works, as I don't think h can be used like this, but nontheless it does */
        a, button {
            color: light-dark(rgb(55, 55, 55), rgb(225, 225, 225));
        }

        a:hover, a:focus-within, button:hover { /*focus-within is not used for buttons as this causes them to remain highlighted after being clicked. It shouldn't really affect screen reader usage as the button is outlined clearly by the browser*/
            color: light-dark(black, white);
        }
    }
    a {
        -webkit-tap-highlight-color: transparent;
    }
    p, li {
        line-height: 1.5;
        font-size: 17px;
    }
    p, ul, ol {
        margin-bottom: 1.1em;
    }
    li {
        margin-bottom: 0.3em;
        margin-left: 15px;
    }
    .date {
        margin-top: 0px;
        font-style: italic;
        font-family: var(--heading_font);
    }
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading_font);
}

svg {
    aspect-ratio: 1;
    fill: currentColor /*inherited, eg from <a> or <button>*/
}

/*BLOG-LIKE STYLING*/
.blog {
    main {
        margin-inline: max(6px + 3%, 50% - 375px);
        /*After ~800px display width, content will remain the same width and only margins will expand*/
    }
}

/*NAVBAR STYLING*/
.navbar {
    --navbar_height: 55px;
    --navbar_color: #3f95ff;
    background-color: var(--navbar_color);
    padding-left: env(safe-area-max-inset-left, env(safe-area-inset-left, 0));
    padding-right: env(safe-area-max-inset-right, env(safe-area-inset-right, 0));
    height: var(--navbar_height);
    width: 100%;
    display: flex;

    nav {
        transform-origin: top;
        transition-duration: 0.25s;
        overflow: hidden; /*Don't allow to spill outside box*/
    }
    ul {
        list-style-type: none; /*remove bullet points*/
        overflow: hidden;
        font-size: 19px;
        line-height: var(--navbar_height);
    }
    li:hover, li:focus-within {
        background-color: #55b8ff;
    }
    label {
        user-select: none; /*Prevent menu button text from being selected*/
        -webkit-user-select: none;
        cursor: pointer;
        text-align: left;
        color: white;
        font-size: 36px;
        padding-inline: 10px;
        line-height: var(--navbar_height);
    }
    input {
        display: none;
    }
    img {
        height: var(--navbar_height);
        aspect-ratio: 1;
    }

    /*NAVIGATION MENU (PAGE LINKS) STYLING*/
    #nav_menu_checkbox + label {
        display: none;
    }

    .nav_element {
        float: left;
        border-right: 1px solid #ffffff;
    }
    .nav_element a {
        display: block;
        text-decoration: none;
        color: rgb(255, 255, 255);
        padding-inline: 10px;
    }

    /*LANGUAGE SWITCHER MENU (FLAGS) STYLING*/
    .language_switcher {
        flex-basis: 0px;
        position: absolute;
        top: var(--navbar_height);
        right: 83px;
        transform: scaleY(0.0001); /*Firefox bug with drawing behind other elements when scaling from 0*/
        z-index: 2;
        background-color: var(--navbar_color);
    }
    .language {
        border-top: 1px solid #4f4f66;
        height: var(--navbar_height);
    }
    #language_switcher_checkbox:checked ~ .language_switcher {
        transform: scaleY(1)
    }

    @media screen and (width <= 600px) {
        --navbar_height: 60px;
        --navmenu_height: 65px;
        ul {
            line-height: var(--navmenu_height);
        }
        #nav_menu_checkbox + label {
            display: inline;
            flex-basis: 100%;
        }
        #nav_menu_checkbox:checked ~ .nav_menu {
            transform: scaleY(1)
        }
        .nav_menu {
            position: absolute;
            top: var(--navbar_height);
            transform: scaleY(0.0001); /*Firefox bug with drawing behind other elements when scaling from 0*/
            width: 100%;
            background-color: var(--navbar_color);
            z-index: 1;
        }
        .nav_element:first-child {
            border-top: 1px solid #4f4f66;
        }
        .nav_element {
            float: none;
            text-align: left;
            border-right: 0px;
            border-bottom: 1px solid #4f4f66;
        }
        .nav_element a {
            padding-inline: 20px;
        }
        .language_switcher {
            right: 88px;
        }
    }
}