.mobile-nav-container{
    display:none;
}

@media (max-width:900px){

    .mobile-nav-container{
        display:flex;
        flex-direction: column;
        align-items: flex-end;
        height:100dvh;
        width:100vw;
        position:sticky;
        z-index:5;
        top:0;
        margin-bottom:-100vh;
        overflow:hidden;

        pointer-events: none;
    }

    .mobile-nav-toggle{
        pointer-events: auto;
        background-color: transparent;
        border-color: transparent;
    }

    .mobile-nav-toggle img{
        width:50px;
        height: 50px;
        filter: drop-shadow(0 0 2px black);
    }

    .mobile-nav-bg{
        position:absolute;
        z-index: -1;
        height:100vh;
        width:100vw;
        
        right:-100vw;
        background-image: linear-gradient(to left, black, black, transparent);

        transition-property: right;
        transition-duration: 0.5s;
    }

    .mobile-nav-entry-list{
        position:absolute;
        list-style: none;
        font-size:2em;
        display:grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, 1fr);
        justify-items: left;
        padding:0;
        right:-50vw;
        height:100%;

        transition-property: right;
        transition-duration: 0.5s;
    }

    .mobile-nav-entry{
        pointer-events: auto;
    }

    .mobile-nav-entry-label{
    display: flex;
    font:inherit;
    color:inherit;
    align-items: center;
    justify-content: center;
    transition: padding-top 0.5s;
    z-index: inherit;
    } 

    .mobile-nav-entry-label p{
    margin:0;
    transition: padding-top 0.5s, padding-bottom 0.5s;
    }

}