@keyframes burger-load {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}


#menu__drawer {
    width: 100%;
}

.menu {
    /* background: var(--background); */
    position: fixed;
    bottom: 0;
    height: auto;
    /* width: calc(100% - var(--space) - var(--space)); */
    padding: var(--space);
}

    .menu .a {
        width: max-content;
    }




/*          MOBILE          */

.menu a:hover {
    opacity: 0.5 !important;
}


.current {
    opacity: 0.4 !important;
}

@media only screen and (max-width: 900px) {

    .menu {
        width: 100%;
    }

    #burger .icon {
        height: 24px;
        width: 24px;
        stroke: var(--background);
        transition: var(--ani-m) var(--easing);
    }

    #burger:hover .icon {
        stroke: var(--foreground);
     
    }
    
    #burger .top {
        stroke-dasharray: 22;
        stroke-dashoffset: 8;
    }

    #burger .bottom {
        stroke-dasharray: 22;
        stroke-dashoffset: 10;
    }

    #menu__drawer {
        position: fixed;
        height: 100%;
        top: 0;
        overflow: hidden;
        z-index: 1;
        pointer-events: none;
        
    }

        #menu__drawer .menu {
            position: absolute;
            height: 100%;
            padding: var(--space);
            justify-content: center;
            gap: var(--box-space);
            font-size: var(--f_m);
            transform: translateY(0%);
            background: var(--foreground);
            color: var(--background);
            opacity: 0;
        }

        #menu__drawer a {
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        #menu__drawer .open {
            opacity: 1;
            z-index: 100;
            pointer-events: all;
        }
        
        #menu__drawer .fb {
            flex-direction: column;}

            .menu a::before {
                margin-right: var(--space);
            }

            .menu a:nth-child(1) {
                transform: translateY(280%);

            }
        
            .menu a:nth-child(2) {
                transform: translateY(280%);

            }
        
            .menu a:nth-child(3) {
                transform: translateY(280%);

            }

            .menu a:nth-child(4) {
                transform: translateY(280%);

            }
        
            .menu a:nth-child(5) {
                transform: translateY(280%);
            }

            .open a:nth-child(1) {
                transform: translateY(0px);

            }
        
            .open a:nth-child(2) {
                transform: translateY(0px);

            }
        
            .open a:nth-child(3) {
                transform: translateY(0px);

            }
            
            .open a:nth-child(4) {
                transform: translateY(0px);

            }
        
            .open a:nth-child(5) {
                transform: translateY(0px);

            }
}


/*          DESKTOP ONLY            */


@media only screen and (min-width: 901px) {
    

    #burger {
        display: none;
    }

    #menu__drawer {
        position: fixed;
        margin-top: 0;
        top: 0;
        z-index: 90;
        pointer-events: all;
        overflow: visible;
}
}