.mobile-only { display: none; }

@media screen and (max-width: 750px)
{
    .mobile-only { display: block; }

    nav > a:not(#logo),
    #gr1, #gr2
    {
        display: none;
    }

    nav #logo > img
    {
        content: url("/res/logo_text.png");
        width: 6em;
    }

    body
    {
        padding: 0;
    }

    header
    {
        height: 7em;
    }

    header,
    footer
    {
        margin-left: 0;
        margin-right: 0;
    }

    main
    {
        margin: 1em 0;
        border-radius: 0;
    }

    .mobile_menu_button
    {
        display: block;
        border-radius: 50%;
        position: absolute;
        top: 2.25rem;
        color: #ffffff;
        font-size: 2rem;
        text-shadow: 0 .05em .05em rgba(0, 0, 0, .6);
        padding: 0 .5em;
        cursor: pointer;
        user-select: none;
    }

    .mobile_menu_button:active
    {
        background: rgba(0, 0, 0, .15);
    }

    #mobile_nav_menu_button
    {
        left: 2rem;
    }

    #mobile_social_menu_button
    {
        right: 2rem;
    }

    #mobile_social_menu > a > img
    {
        height: 1.25em;
        vertical-align: text-bottom;
    }

    .mobile_menu
    {
        touch-action: none;
        position: fixed;
        top: 0;
        z-index: 9;
        max-width: 100dvw;
        width: max-content;
        height: 100dvh;
        background: rgba(255, 255, 255, .8);
        backdrop-filter: blur(15px);
        overflow: hidden;
        box-sizing: border-box;
        box-shadow: 1em 0 1em rgba(0, 0, 0, .5);
        border-right: solid 1px #2465f1;
    }

    #mobile_nav_menu
    {
        left: 0;
        box-shadow: 1em 0 1em rgba(0, 0, 0, .5);
        border-right: solid 1px #2465f1;
    }

    #mobile_social_menu
    {
        right: 0;
        box-shadow: -1em 0 1em rgba(0, 0, 0, .5);
        border-left: solid 1px #2465f1;
    }

    #mobile_social_menu > span
    {
        position: absolute;
        bottom: .5rem;
        left: .5rem;
        font-size: .75rem;
        color: #666666;
        text-shadow: none;
    }

    .mobile_menu_header
    {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        padding: 0 1rem;
        background: rgba(255,255,255,.75);
        color: #072780;
        text-shadow: none;
    }

    .mobile_menu_header > span
    {
        padding-right: 1em;
        font-size: 2rem;
        flex-grow: 1;
    }

    .mobile_menu_close_button
    {
        font-size: 1.5rem;
        color: #ff0000;
    }

    .mobile_menu > hr
    {
        margin: 0;
    }

    .mobile_menu > a
    {
        display: block;
        text-decoration: none;
        color: #072780;
        text-shadow: none;
        padding: .5em 4.5em .5em 1em;
        font-size: 1.5rem;
    }

    .mobile_menu > a:hover
    {
        background: rgba(0, 0, 0, .25);
    }

    .mobile_menu > a.active
    {
        border-bottom: solid .1em #072780;
    }

    .mobile_menu > .logo
    {
        height: 3rem;
        position: absolute;
        bottom: 1rem;
        right: 1rem;
    }

    nav > a.current
    {
        font-weight: bold;
    }

    nav > a.current:hover
    {
        background: transparent !important;
    }

    footer .social_links > a
    {
    }
}

@media screen and (max-width: 500px)
{
    #mobile_nav_menu_button { left: .5rem; }
    #mobile_social_menu_button { right: .5rem; }

    .mobile_menu
    {
        width: 100dvw;
    }
}