.register,
.login,
.create-user-account {
    background-color: var(--items-color);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2em;

    padding: 3rem 2.5rem;

    border-radius: 20px;

    width: fit-content;
    max-width: 500px;

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.register {
    margin-top: 2em;
}

.register-title,
.login-title,
.create-user-account-title {
    width: 100%;
    display: flex;
    flex-flow: column;
    gap: 1em;
}

.icons-card {
    max-height: inherit;
    object-fit: contain;
    width: 10em;
}

.register-form,
.login-form,
.create-user-account-form {
    display: flex;
    flex-flow: column;
    width: 100%;
    align-items: left;
    text-align: left;
}

.register-form label,
.login-form label,
.create-user-account-form label {
    font-family: var(--main-font);
    font-size: var(--main-size);
    font-weight: var(--main-weight);
    width: 100%;
}

.register-form input,
.login-form input,
.create-user-account-form input {
    border: none;
    border-radius: 40px;
    margin: .5em 0;
    padding: 1em;
    font-size: 1rem;
    width: 100%;
    min-width: 300px;

    background-color: var(--main-color);
    color: var(--text-color);

    transition: all .3s ease;
}

.register-form input:hover,
.login-form input:hover,
.create-user-account-form input:hover {
    border-radius: 10px;
}

.register-button,
.login-button,
.create-user-button {
    background-color: var(--text-color);
    color: var(--items-color);
    cursor: pointer;

    padding: .5em 2em;
    margin-top: 2em;

    border-radius: 40px;
    font-weight: 600;

    width: fit-content;

    transition: all .3s ease;
}

.register-button:hover,
.login-button:hover,
.create-user-button:hover {
    border-radius: 10px;
}




.password-wrapper {
    position: relative;
}