form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px;
    padding: 2rem;
    border-radius: 8px;

    input {
        padding: 0.5rem;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        font-size: 1rem;
        transition: all 0.3s ease;

        &:required {
            border-right: 5px solid var(--border-color-required);

            &:user-valid {
                border-color: var(--border-color-correct);
                background-color: var(--input-background-correct);
            }

            &:user-invalid {
                border-color: var(--border-color-wrong);
                background-color: var(--input-background-wrong);
            }
        }
    }
}