@media (max-width: 768px) {

    /*
     * This ensures the page never scrolls horizontally,
     * which is a good practice for mobile design.
     */
    body {
        overflow-x: hidden;
    }

    /*
     * These rules turn the body into a flexible container
     * that always takes up at least the full height of the screen.
     * This is the key to fixing the vertical layout.
     */
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    /*
     * We adjust the login/signup form container for mobile screens.
     */
    .container, .form-container {
        width: 90%; /* Make the form wider on mobile */
        padding: 25px;
        margin: 30px auto; /* Keep some vertical space, but center horizontally */
    }

    .container h2 {
        font-size: 22px;
    }

    /*
     * This is the final piece of the fix. In a flex column,
     * margin-top: auto on an element pushes it to the very
     * bottom of its container, taking up all available empty space.
     * This forces the footer to the bottom of the screen.
     */
    .footer {
        margin-top: auto;
    }
}