/* login.css */

/* General Styles */
body {
    background-color: #f4f4f4;
}

.login-container {
    max-width: 400px;
    width: 100%;
    padding: 20px; /* Ensure there is enough padding on mobile */
}

/* Responsive adjustments for mobile */
@media (max-width: 576px) {
    .login-container {
        padding: 10px; /* Reduce padding on small screens */
        margin: 20px; /* Add some margin around the form */
    }

    .btn {
        font-size: 1rem; /* Adjust button size for mobile */
    }

    .form-control, .btn {
        height: auto; /* Ensure input fields and buttons are not too tall on small screens */
    }

    h2 {
        font-size: 1.5rem; /* Reduce heading size on smaller screens */
    }

    .alert {
        font-size: 0.875rem; /* Make flash messages more compact */
    }
}