/* signup.css */
.signup-container {
    max-width: 50vw; /* Approximately half the screen width */
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .signup-container {
        max-width: 90vw; /* Adjust for smaller screens */
        padding: 1rem;
    }
}

/* Ensure form inputs don't stretch beyond container */
.signup-container form {
    width: 100%;
    max-width: 400px; /* Cap form width for better aesthetics */
}

/* Optional: Add subtle shadow and border for card-like effect */
.signup-container form {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #1F2123;
}

/* Override any global styles that might stretch the form */
form input,
form button {
    width: 100%;
    box-sizing: border-box;
}