#menu {
    z-index: 20;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: var(--padding);
    padding: calc(var(--padding) * 1) var(--padding) var(--padding);
    width: calc(100% - calc(2 * var(--padding)));
    background: 
        linear-gradient(
            to bottom,
            transparent,
            /* rgba(255,255,255,.5), */
            var(--bg)
        )
    ;

    >* {
        border-radius: 999px;
        border: 0;
        height: 42px;
        cursor: pointer;
        transition: 
            transform var(--transition_time)
        ;
        box-shadow: rgba(0,0,0,.1) 0px 0px 10px 1px;
    }
    
    .contact {
        font-family: 'Nunito';
        width: 100%;
        max-width: 250px;
        background:
            linear-gradient(
                -60deg,
                var(--color500) 00%,
                var(--color500) 40%,
                var(--color700) 50%,
                var(--color500) 70%,
                var(--color500) 100%
            ) var(--color700)
        ;
        background-size: 1000% 1000%;
        /* font-weight: bold; */
        color: #fff;
        animation: menu_contact 2s infinite linear;
        font-size: 17px;
        transition: 
            transform var(--transition_time),
            max-width var(--transition_time),
            background var(--transition_time)
        ;
    }
    .contact:hover {
        background:var(--color700);
    }
    .contact:active {
        transform: scale(.95);
        background:var(--color600) ;
    }

    .burger {
        min-width: 42px;
        height: 42px;
        backdrop-filter: blur(5px);
        background: #fff;
        border: solid 1px rgba(0,0,0,.2);
        display: flex;
        align-items: center;
        justify-content: center;
        svg {
            height: 20px;
            width: 20px;
        }
    }
    .burger:hover {
        background: #ddd;
    }
    .burger:active {
        transform: scale(.9);
    }
}
#burger.hidden {
    opacity: 0;
}
#burger {
    transition: opacity var(--transition_time);
    position: fixed;
    top: 0;
    left: 0;
    height: calc(
        100% - calc(2 * var(--padding)) - calc(42px + var(--padding))
    );
    width: calc(100% - calc(2 * var(--padding)));
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(2px);
    padding: var(--padding);
    padding-bottom: calc(42px + 10px + var(--padding));
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: end;
    gap: var(--padding);
    a.hidden {
        transform: translateY(5px);
        opacity: 0;
    }
    a {
        font-family: 'Nunito';
        text-decoration: none;
        color: #000;
        padding: 10px 10px;
        padding-left: 20px;
        background: #fff;
        border: solid 1px rgba(0,0,0,.2);
        border-radius: 999px;
        font-size: 17px;
        font-weight: bold;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        gap: 7px;
        box-shadow: rgba(0,0,0,.15) 0px 0px 20px 10px;
        transition: transform var(--transition_time), opacity var(--transition_time);
        svg {
            fill: #000 !important;
            height: 22px;
            width: 22px;
        }
    }
    a:hover {
        z-index: 21;
        background: #ddd;
    }
    a:active {
        transform: scale(.95);
    }
}


@keyframes menu_contact {
    from {
        background-position: 100% 100%;
    }
    to {
        background-position: 0% 0%;
    }
}

@media (max-width: 500px) {
    #menu > .contact {
        max-width: 100%;
    }
}