#login-form{
    position: fixed;
    height: fit-content;
    padding: 5%;
    width: 50%;
    max-width: 500px;
    z-index: 2;
    border: 1px solid rgb(212, 212, 212);
    border-radius: 10px;
    margin: 10%;
    background-color: rgb(235, 234, 234);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#login-background{
    width: 100vw;
    object-fit: cover;
    height: 90vh
}

/* Mobile Responsive Styles for Login */
@media (max-width: 768px) {
    #login-form {
        width: 85%;
        max-width: none;
        margin: 0;
        padding: 8%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    #login-background {
        height: 100vh;
    }
}

@media (max-width: 480px) {
    #login-form {
        width: 92%;
        padding: 6%;
        border-radius: 8px;
    }

    #login-form input,
    #login-form button {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 12px;
    }

    #login-form button {
        min-height: 48px;
    }
}