@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=RocknRoll+One&family=Urbanist:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root{
    --color1: #ffffff;
    --color2: #000000;
    --color3: #dfdfdf;
    --color4: #db514d;
    --color5: #2b90d9;
    --color6: #004e66;
    --color7: #e97f02;
    --color8: #3b8686;
    --color9: #6a60a9;
    --color10:#CB3631;
    --color11:#71787e;
    --color12:#343e46; 
    --color13:#bb2929; 
    --color14:#1ed12d;
    --color15:#119200; 
    --color16:#0075ff;
    --color17:rgba(83, 93, 101, 0.514);  
    --color18:rgba(0, 117, 255);
    --color19:rgba(187, 41, 41);

    --fuente1: 'Urbanist', sans-serif;
    --fuente2: 'Raleway', sans-serif;
    --fuente3: 'RocknRoll One', sans-serif;

    --letter-spacing: 0.06875rem;
}
*,
*::after,
*::before{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html{
    font-size: 18px;
    font-family:var(--fuente1);
    font-weight: 200;
}
body{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color3);
}
.container{
    width: 90%;
    max-width: 62.5rem;
    position: relative;
    display: grid;
    place-items: center;
}
.section_form{
    width: 100%;
    height: 100%;
    min-height: 25rem;
    background-color: var(--color1);
    border-radius: .25rem;
    padding: 1.5rem;
    box-shadow: 0px 0px 3px 2px rgba(205, 205, 205, 0.726);
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 2rem;
}
.section_form__header{
    width: 100%;
    height: 100%;
}
.section_form__header__title{
    font-family: var(--fuente3);
    /* margin-bottom: 0.5rem; */
}
.section_form__header__text{
    line-height: 1.25rem;
    font-weight: 200;
    letter-spacing: var(--letter-spacing);
}
.form{
    width: 100%;
    height: 100%;
    display: grid;
    gap: 1rem;
    grid-template-columns:8rem 1fr;
    grid-template-rows: repeat(5, auto);
    align-items: center;
}
.form__label{
    font-weight: bold;
    font-size: .9rem;
    letter-spacing: var(--letter-spacing);
}
.form__input_text, 
.form__input_textarea{
    width: 100%;
    border: none;
    outline: none;
    font-family: inherit;
    letter-spacing: var(--letter-spacing);
    border: 1px solid rgba(205, 205, 205, 0.726);
    padding: .5rem 1.5rem .5rem 1rem;
    font-weight: 400;
    font-size: 1rem;
}
.form__input_text::placeholder, 
.form__input_textarea::placeholder{
    font-family: var(--fuente1);
    font-size: .9rem;
    letter-spacing: var(--letter-spacing);
    font-weight: 300;
    color: rgb(36, 35, 35);
}
.form__input_text-focus:focus, 
.form__input_textarea-focus:focus{
    outline: 2px solid var(--color17);
    border: 1px solid transparent;
}
.form__fieldset{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-flow: row nowrap;
}
.form__fname_field{width: 100%; flex: 0 1 calc(50% - .25rem); position: relative;}
.form__lname_field{width: 100%;flex: 0 1 calc(50% -  .25rem); position: relative;}

.form__email, 
.form__phone, 
.form__message{width: 100%; position: relative;}

.form__icon_success_fname{display: none;}
.form__icon_error_fname{display: none;}
.form__icon_success_lname{display: none;}
.form__icon_error_lname{display: none;}
.form__icon_success_email{display: none;}
.form__icon_error_email{display: none;}
.form__icon_success_phone{display: none;}
.form__icon_error_phone{display: none;}
.form__icon_success_message{display: none;}
.form__icon_error_message{display: none;}

.success{outline: 2px solid var(--color18); border: 1px solid transparent;}
.error{outline: 2px solid var(--color19);border: 1px solid transparent;}

.form__icon{
    width: 1.25rem;
    position: absolute;
    right: .25rem;
    bottom: .55rem;
}

.form__icon_success_message, .form__icon_error_message{bottom: 1rem;}

.form__input_textarea{
    resize: vertical;
    min-height: 6rem;
    max-height: 6rem;
    overflow: scroll;
}
.form__submit{
    grid-column: 2/-1;
    border-radius: .25rem;
    background-color: var(--color6);
    border: none;
    outline: none;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing);
    padding: .5rem 1rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--color1);
    transition: background-color 300ms ease;
    cursor:not-allowed;
}
.form__submit-disabled{
    background-color: var(--color11);
}
.form__submit-hover:hover{
    background-color: #024255;
}
.advise{
    position: absolute;
    background-color: rgb(240, 240, 240);
    width: calc(100% - 2rem);
    max-width: 20rem;
    height: 15rem;
    z-index: 1;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    border-radius: .25rem;
    /* box-shadow: 0px 0px 3px 2px rgba(216, 216, 216, 0.31); */
    display: none;
    animation: adviseEffect 600ms ease-in-out 0s 1 normal none;;
}

@keyframes adviseEffect {
    0%{
        opacity: 0;
        transform: translateY(-40px);
    }
    50%{
        opacity: 1;
        transform: translateY(20px);
    }
    100%{
        transform: translateY(0px);
    }
}

.overlay{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.324);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: none;
}
.advise__spinner::after{
    display: flex;
    content: "";
    border: 1.5rem solid #ccc;
    border-top-color: var(--color6);
    border-bottom-color: var(--color6);
    width: 8rem;
    height: 8rem;
    border-radius: 100%;
    animation: spinner 800ms ease 150ms infinite normal none;
}

.advise__text{
    color: var(--color6);
    font-size: 2rem;
    display: none;
}
.advise__icon{
    width: 8rem;
    display: none;
}

@keyframes spinner {

    from{
        transform: rotate(360deg);
    }
}

@media screen and (max-width:768px){
    html{
        font-size: 14px;
    }
    .form{
        grid-template-rows: repeat(9, auto);
        gap: .5rem;
    }
    .form__label_fname{
        grid-row: 1/2;
        grid-column: 1/-1;
    }
    .form__fieldset{
        grid-row: 2/3;
        grid-column: 1/-1;
    }
    .form__label_email{
        grid-column: 1/-1;
        grid-row: 3/4;
    }
    .form__email{
        grid-column: 1/-1;
        grid-row: 4/5;
    }
    .form__label_phone{
        grid-column: 1/-1;
        grid-row: 5/6;
    }
    .form__phone{
        grid-column: 1/-1;
        grid-row: 6/7;
    }
    .form__label_message{
        grid-column: 1/-1;
        grid-row: 7/8;
    }
    .form__message{
        grid-row: 8/9;
        grid-column: 1/-1;
    }
    .form__submit{
        grid-row: 9/-1;
        grid-column: 1/-1;
    }
}