/* =============== Registration Form =============== */
.registration_container {
    margin-top: 5rem;
    min-height: auto
}

.registration_sections {
    align-items: center;
    display: flex;
    justify-content: space-evenly;

}
.registration_title {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.border_design {
    align-items: center;
    aspect-ratio: 1;
    background: #000000;
    border: 2px solid black;
    border-radius: 10px;
    display: flex;
    margin: 0 auto;
    padding: 0 auto;
    opacity: .5;
    width: 5rem;
}

.fa-clipboard-check, .fa-key {
    font-size: 2.5rem;
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--color-primary-font);
    margin: 0 auto;
}

.registration_title h2 {
    font-size: 2rem;
}


.registration_moitie {
    display: flex;
    flex-direction: column;

}

.registration_moitie form {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 1rem;
    min-height: 60vh;
    min-width: 30vw;
}

.reg_user_name,
.reg_user_email,
.reg_user_password,
.reg_user_password,
.reg_country_name,
.reg_first_name {
    background: transparent;
    color: var(--color-primary-font);
    font-family: 'Gruppo', serif;
    font-size: clamp(1.25rem, 1.5vw, 1.5rem);
    height: 2.5rem;
    margin-left: .5rem;
    position: relative;
    width: clamp(15rem, 50vw, 28rem);

}


.reg_user_name:focus,
.reg_user_email:focus,
.reg_user_password:focus,
.reg_country_name:focus,
.reg_first_name:focus,
.user_email_login:focus,
.user_password_login:focus {
    outline: none;
}


.reg_user_name::placeholder,
.reg_user_email::placeholder,
.reg_user_password::placeholder,
.reg_country_name::placeholder,
.reg_first_name::placeholder,
.user_email_login::placeholder,
.user_password_login::placeholder{
    color: var(--color-primary-font);
    opacity: 1;
}

.horizontal_line_register {
    border-bottom: 2px solid black;
    width: 85%;
}


.fa-user, .fa-envelope, .fa-lock, .fa-globe, .fa-id-card {
    color: rgba(255, 255, 255, .4);
    position: relative;
}


.vertical_divide {
    border-right: 2px solid black;
    height: 35rem;
}

.meditation{
    height: 20vw;
    opacity: .3;
}

.registration_moitie form label {
    margin: 1rem 0 -1rem 0;
}

.login_options_register {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-top: 1rem;
    width: 95%;
}


.forgot_pass a, .reg_old_account a {
    color: var(--color-primary-font);
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    transition: var(--transition);
}

.login_options_register .forgot_pass i, .login_options_register{
    margin-right: .5rem;
}



.forgot_pass a:hover, .reg_old_account a:hover {
    color: var(--primary-hover);
}


img.meditation {
    animation: levitate 4s infinite alternate;
    -webkit-animation: levitate 4s infinite alternate;
}


@keyframes levitate {
    0% {transform: translateY(0);
    }
    100% {transform: translateY(-40px);
    }
}

@webkit-keyframes levitate {
    0% {transform: translateY(0);
    }
    100% {transform: translateY(-40px);
    }
}


/* =============== Registration Form =============== */

/* =============== Login Form =============== */


.login_container {
    margin-top: 5rem;
}

.login_alert{
    color: red;
    font-size: clamp(1.25rem, 6vw, 2rem);
    text-align: center;
}

.login_section{
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 55vh;
}

.login_section form {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.user_email_login,
.user_password_login {
    background: transparent;
    color: var(--color-primary-font);
    font-family: 'Gruppo', serif;
    font-size: 1.5rem;
    height: 2.5rem;
    margin-left: .5rem;
    width: clamp(15rem, 50vw, 28rem);;

}

.horizontal_line {
    border-bottom: 2px solid black;
    width: 90%;
}


.login_page_options {
    display: flex;
    justify-content: space-around;
    width: 95%;
}

.forgot_pass_login a, .reg_old_account_login a {
    color: var(--color-primary-font);
    font-size: 1.15rem;
    transition: var(--transition);
}

.login_page_options .forgot_pass_login i,
.login_page_options .reg_old_account_login i {
    margin-right: 0.5rem;
}

/* =============== Login Form =============== */

/* =============== Password Rest Form =============== */

.pass_reset_form_container, .pass_status_container{
    min-height: 90vh;

}

.pass_reset_form_section form, .pass_status_section{
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    height: 80vh;
    justify-content: center;
}

.pass_reset_form_section form h2, .pass_status_section h2 {
    color: var(--primary-hover);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
     text-align: center;
}

.pass_reset_form_section form p, .pass_status_section p {
    font-size: clamp(1.25rem, 4vw, 2.25rem);
    text-align: center;
}


.fa-user-plus-password {
    margin-right: .5rem;
}

.reg_old_account a {
    font-size: 1.15rem;
}


.reset_confirm_container {
    min-height: 90vh;

}
.reset_confirm_section form {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 80vh;
    justify-content: center;

}

.reset_confirm_section form h1{
    color: var(--primary-hover);
    font-size: 2.5rem;
}

.reset_confirm_section form p {
    font-size: 1.5rem;

}

.reset_confirm_section form label{
    margin: 0;

}

.reset_confirm_section ul li {
    font-size: 1.25rem;
    margin-bottom: .5rem;
}

.reset_confirm_section p a {
    background-color: black;
    border-radius: 10px;
    box-shadow: var(--secondary-shadow);
    color: var(--color-primary-font);
    font-weight: 100;
    opacity: .5;
    padding: .35rem 1.5rem;

}

/* =============== Password Rest Form =============== */




/* =============== Edit Details Form =============== */

.details_section {
    display: flex;
    justify-content: space-around;
}

.change_details_section form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.update_success {
    color: var(--color-primary-font);
    font-size: 1.5rem;
}

.change_details_section form p a {
    color: var(--color-primary-font);
}

.change_details_section form h3, .delete_section form h3{
    font-size: 2rem;
}

.change_details_section form p, .delete_section form p{
    font-size: 1.5rem;
}



.change_details_section form label{
    color: var(--primary-hover);
    font-size: 1.25rem;
    margin: 1rem 0 -1rem 0;
}

.email_edit,
.first_name_edit,
.user_name_edit {
    background: transparent;
    color: var(--color-primary-font);
    font-family: 'Gruppo', serif;
    font-size: 1.5rem;
     margin-left: .5rem;
    position: relative;
    width: 22rem;
    height: 3rem;
}

.email_edit:focus,
.first_name_edit:focus,
.user_name_edit:focus,
.update_country_name:focus {
    outline: none;
}



.update_country_name {
    background: transparent;
    color: var(--color-primary-font);
    font-family: 'Gruppo', serif;
    font-size: 1.5rem;
    height: 3rem;
    margin-bottom: -.35rem;
    margin-left: .5rem;d
    position: relative;
    width: 22rem;

}
.delete_section {
    align-items: center;
    display: flex;

}
.delete_section form{
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* =============== Edit Details Form =============== */


/* =============== Delete Confirmation =============== */
/*
.delete_confirm_container{
    min-height: 90vh;
}

.delete_confirm_section {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 80vh;
    justify-content: center;
}

.delete_confirm_section h2 {
    color: var(--primary-hover);
    font-size: 2.25rem;
}

.delete_confirm_section p {
    font-size: 1.5rem;
}
*/
/* =============== Delete Confirmation =============== */



/* =============== MEDIA QUERIES (MEDIUM DEVICES) ===============*/
@media screen and (max-width: 1024px){

    /* =============== Registration Form =============== */
    .registration_sections {
        flex-direction: column;
    }

    .vertical_divide, .registration_image_motie {
        display: none;
    }

    .registration_moitie form label {
        width: 60%;
        text-align: center;
    }

    .login_options_register {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;

    }
    /* =============== Registration Form =============== */

    /* =============== Login Form =============== */
    .login_page_options{
        align-items: center;
        flex-direction: column;
        gap: 1.5rem;
    }

    /* =============== Login Form =============== */



}

/* =============== MEDIA QUERIES (SMALL DEVICES) ===============*/
@media screen and (max-width: 600px){

    /* =============== Registration Form =============== */
    .registration_container {
        margin-top: 3rem;
    }

    .vertical_divide, .registration_image_motie {
        display: none;
    }


    .registration_moitie form label {
        margin: 1rem 0 0rem 0;
        width: 85%;
        text-align: center;
    }

    .registration_moitie form button {
        margin-top: 1.25rem;
    }

    .login_options_register {
        align-items: center;
        flex-direction: column;
        gap: 1.5rem;
    }


    /* =============== Registration Form =============== */

    /* =============== Login Form =============== */
    .login_container {
        margin-top: 3rem;
    }

    .login_section{
        margin-top: -1rem
    }

    .login_page_options{
        align-items: center;
        flex-direction: column;
        gap: 1.5rem;
    }

    /* =============== Login Form =============== */
}