@media screen and (max-width: 700px) {
    #toggleMenuWrapper {
        margin-top: 20px !important;
    }
    /**
     * menu (slider)
     */
    .menu-on #nav {
        animation: slide 0.3s ease-out;
        background: var(--color-bg);
        box-sizing: border-box;
        display: block;
        left: 0;
        padding-left: 10px;
        top: 4.2em;
        transform: translateY(0);
        z-index: 4;
        width: 100%;
    }

    /**
     * nav selected item
     */
    #nav li:hover a:after,
    #nav li.selected a:after {
        width: 0;
    }

    /**
     * for the footer to get this styling we'd need to move ".menu-on" higher up
     */
    .menu-on #main,
    .menu-on #footer {
        filter: blur(2px);
    }
    #nav {
        backface-visibility: hidden;
        transform: translateY(-100%);
        will-change: transform;
    }
    @keyframes slide {
        0% {
            filter: blur(5px);
            transform: translateY(-100%);
        }
        100% {
            transform: translateY(0);
        }
    }
}
