/* Hide hamburger by default */
#hamburger {
    display: none;
}

/* Show on small screens and left-align */
@media screen and (max-width: 1024px) {
    nav ul {
        display: none;
        flex-direction: column;
        padding: 0;
        margin: 0;
    }

    #hamburger {
        display: block;
        font-size: 28px;
        cursor: pointer;
        padding: 10px;
        text-align: left;
    }

    nav.show ul {
        display: flex;
    }
}

#mobile-menu-button {
    display: none;
    font-size: 28px;
    cursor: pointer;
    padding: 10px;
    color: white;
    background-color: #2b2b2b;
}

@media (max-width: 768px) {
    #mobile-menu-button {
        display: block;
    }

    #main-nav ul {
        display: none;
        flex-direction: column;
        background-color: #2b2b2b;
        padding: 0;
        margin: 0;
    }

    #main-nav ul.show {
        display: flex;
    }

    #main-nav ul li {
        display: block;
        text-align: center;
        margin: 10px 0;
    }
}