:root
{
    --top-nav-height: calc(3 * var(--post-font-size));
}

#TopNav
{
    display: none;
    background-color: var(--left-tool-nav-background-colour);
    color: var(--left-tool-nav-text-colour);
    border-bottom: 1px solid ;
}

@media only screen and (max-width: 768px)
{
    #TopNav
    {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        height: var(--top-nav-height);
        scroll-behavior: none;
    }

    #TopNav button
    {
        background: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        min-width: 20dvw;
        height: 100%;
        box-sizing: border-box;
        font-size: var(--left-tool-nav-logo-size);
    }

    #TopNav a
    {
        display: flex;
        flex-direction: row;
        justify-content: center;
        text-decoration: none;
        height: 100%;
        margin: 0px;
        line-height: 100%;
    }

    #TopNav button, #TopNav a
    {
        padding: 3px;
        padding-left: 5vw;
        padding-right: 5vw;
        border: none;
        color: var(--left-tool-nav-text-accent-colour);
    }

    #TopNav svg, #TopNav svg path
    {
        height: var(--post-font-size);
        fill: var(--left-tool-nav-text-accent-colour);
        color: var(--left-tool-nav-text-accent-colour);
    }

    .HomepageLink
    {
        background-color: inherit;
    }

    #LeftNav
    {
        height: calc(100dvh - var(--top-nav-height));
        max-height: calc(100dvh - var(--top-nav-height));
        overflow-y: hidden;
    }

    #LeftToolNav
    {
        min-height: inherit;
        height: inherit;
        max-height: inherit;
    }
    
    #PostNav
    {
        display: none;
    }
}