/* OVERALL NAVIGATION */
/**********************************************/


nav #menu-toggle-button {
    position: fixed;
    z-index: 990;
    top: 1rem; right: 2rem;
    bottom: unset; left: unset;

    display: block;
    background-color: rgb(13, 33, 42);
    width: var(--nav-button-width);
    height: calc(var(--nav-button-width) * 0.61);
    border-radius: 0.5rem;
    cursor: pointer;
    box-shadow: 0px 4px 5px -2px #00413955;
    border-bottom: 3px solid #1d1d1d;
    outline: 1px solid #ddd;

    &:hover {
        background-color: rgb(44, 44, 44);
    }

    &:active {
        background-color: rgb(24, 1, 16);
    }
}

#menu-modal-group {

    display: none;
    position: fixed;
    top: 0; right: 0;
    width: 100%;
    height: 100%;
    background-color: #062220fe;
    mix-blend-mode: normal;
    z-index: 890;
}

.menu-module {

    width: 100%;
    height: 1fr;
    flex: auto 1 1;
    border: 1px solid red;
    color: aliceblue;
    font-size: 2em;
}


/* SPECIFIC STATES */

/* navigation when modal menu is CLOSED */
#site-navigation.modal-closed {

    & #menu-modal-group {

        display: none;
    }
}

/* navigation when modal menu is OPEN */
#site-navigation.modal-open {

    & #menu-modal-group {

        display: flex;
        flex-flow: column nowrap;
    }

    & #menu-toggle-button
}



/* MEDIA QUERIES */

@media screen and (max-width:600px){
    
    nav #menu-toggle-button {
        top: unset; right: 1rem;
        bottom: 1rem; left: unset;
    }
}