@media (max-width: 599px) {

    body {
        padding-left: 10px;
        padding-right: 10px;
    }

    header {
        margin-bottom: 0;
        padding-bottom: 0;
        box-shadow: none;
    }

    /* Top bar containing the logo & mobile nav toggle button */
    .header-top {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-content: center;
        align-items: center;
        box-sizing: border-box;
        padding: 10px;
        width: 100%;
    }

    .site-logo {
        width: 65% !important;
        height: auto;
    }
    
    .nav-mobile,
    .menu-toggle {
        display: block !important;
    }

    .nav-desktop {
        display: none;
    }

    header nav {
        gap: 5px;
        width: 100%;
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        /* default to closed */
        max-height: 0;
        overflow-y: hidden;
        transition: max-height 0.3s ease-out;
    }

    header nav.open {
        max-height: 1000px;
    }

    ul.menu {
        padding: 12px;
        list-style: none;
    }

    /* general UI */

    .orange-button {
        padding: 15px;
    }

    /* homepage post list */

    .post-list-entry,
    .post-list-entry-highlight {
        flex-direction: column !important;
    }

    .post-list-entry-title {
        font-size: 20px;
    }

}