#menu-toggle {
    display: none;
}

@media (max-width:768px){

    #menu-toggle {
        display: inline-block;
        justify-self: center;
        padding: 2px 0;
        margin: 5px 5px;
        border: 1px solid #888888; /* #666666; */
        width: 90%;
        text-align: center;
        font-size: 15px;
        font-weight: bold;
        text-transform: uppercase;
        color: #993333;
        background-color: white;
    }

    #sidebar {
        /* display: none; */
        position: relative;
        width: 90%;
        float: none;
        padding: 0;
        margin: 0 auto;

        .mobile-window {
            position: absolute;
            top: 100%;
            left: 0;

            width: 100%;

            overflow: hidden;
            z-index: 1000;

            pointer-events: none;

            &.open {
                pointer-events: auto;
            }
        }

    
        .links {

            
            margin: 0;
            padding: 0 20px;
            background-color: #ffefd9;
            border-left: 1px solid black;
            border-right: 1px solid black;
            border-bottom: 1px solid black;

            float: none;

            display: grid;
            grid-template-columns: 1fr;
            justify-items: stretch;

            /* Start with the entire menu above the window */
            transform: translateY(-100%);

            transition: transform 0.4s ease;
            

            &.open {
                transform: translateY(0);
            }

            li {
                padding: 0;

                a {
                    background-color: white;
                    width: 100%;
                    font-size: 15px;
                    line-height: unset;
                }
            }
        }
    }
    
    #container {
        width: 95%;
    }

    #main {
        width: auto;
    }

}