/* ================================================================================
   mobile.css
   Contains: All responsive styles for screens 600px and under
================================================================================= */

@media screen and (max-width: 600px) {

    /* Stack header image above title */
    .header-flex {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    /* Remove the right padding that offsets the logo on desktop */
    .header-title {
        padding-right: 0;
    }

    /* Stack the Propose/Comment buttons vertically */
    .control-panel {
        flex-direction: column;
        align-items: center;
    }

    /* Make buttons full width on small screens */
    .btn, .dropdown-btn {
        width: 80%;
        justify-content: center;
    }
    
    /* Make list of published article fill the screen 5-13-26 */
    #latest-essays {
        max-width: 100%;
}
}