:root {
    --clr-primary2: #fca51a;
    /* --clr-secondary: #bae8e8;
    --clr-text: #272343;
    --clr-border: #e3f6f5;
    --clr-back: #fffffe;
    --clr-back-offset: #f2f4f6; */
    --clr-primary2-high: #fcbe5c;
    /* --clr-text-offset: #2d334a; */
    /* --clr-wrong: #ff5470; */
    --clr-background: #f7f7f9;
  }


* {
/*  margin: 0;*/
/*  padding: 0;*/
  box-sizing: border-box;
  color: var(--clr-text);
}


.form_fields {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    column-gap: 1rem;
}

h1 {
    margin:0;
    font-family: "Work Sans", sans;
    text-align: center;
    text-transform: capitalize;
    font-weight: 300;
    font-size: 4rem;
    letter-spacing: 0.1rem;
    color: var(--clr-text);
}

.form-under {
    margin-top: 0;
    font-size: 1.1rem;
    color: var(--clr-text-offset);
}

.field {
    /* position:relative; */
    border-bottom: 2px dashed var(--clr-primary);
    margin: 2em 0 1em; /*left-right 0*/
    letter-spacing: 0.1rem;
    max-width:40rem;
}

.field:last-child {
    margin-bottom: 0;
}

.content_message {
    max-width: 800px;
    border: 1px grey solid;
    border-radius: 4px;
    margin: 4rem auto 1rem;
}

label {
    color: var(--clr-text);
    font-size: 1.1rem;
    display: block;
    position: absolute;
    transform: translateY(-2rem);
    transform-origin: 0%;
    transition: transform 400ms;
}

#message {
    display: block;
    height: 8em;
}

input, textarea {
    /* font-family: ; */
    border: none;
    border-color: transparent;
    outline: none;
    /* overflow: hidden;  */
    margin: 0;
    width: 100%;
    padding: 0.3em .3em;
    background: none;
    color: rgb(31, 31, 31);
    font-size: 1.2rem;
    font-weight: 300;
    transition: border 500ms;
}

textarea {
    max-width: 800px;
    font-size: 1rem;
}


/* input:valid {
    color: var(--clr-correct);
  } */
input:invalid {
    color: var(--clr-wrong);
  }

  input:required {
    box-shadow: none;
}
/* textarea:required{
    box-shadow: none;
    border: none;
} */

  /* Border animation */
  .field::after {
    content: "";
    position: relative;
    display: block;
    height: 5px;
    width: 100%;
    background:var(--clr-secondary);
    transform: scaleX(0);
    transform-origin: 0%;
    /* opacity: 0; */
    transition: all 500ms ease;
    top: 2px;
  }
  .field:focus-within {
    border-color: transparent;
  }
  .field:focus-within::after {
    transform: scaleX(1);
    /* opacity: 1; */
  }


/* Label animation */

.field:focus-within label,
input:not(:placeholder-shown) + label {
    transform: scale(0.9) translateY(-4rem);
    opacity: 1;
    color: var(--clr-text-offset);
    font-weight: bolder;
    }

#contact-submit {
    margin:1em auto ;
    padding: 0.75em 1.5em;
    /* display: inline-block; */
    text-align: center;
    font-weight: 600;
    border: none !important;
    border-radius: 4px;
    color:var(--clr-back);
    background-color: var(--clr-primary2);
    font-size: 1.2rem;
    box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, 
    rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
}

#contact-submit:hover {
    transition: cubic-bezier(.54,.16,.43,.81) 0.5s;
    background-color:  var(--clr-primary2-high);
    /* filter: brightness(1.1); */
    /* filter: drop-shadow(2); */
}
/* #contact-submit:active {
    transition: ease-in-out 0.2s;
    background-color: var(--clr-primary-high);
} */

  
#success_message {
    /* display: none; */
    padding: 1em;
    margin-bottom: 0.75rem;
    color: var(--clr-text);
    border-left: 5px solid var(--clr-primary);
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
            border-radius: 2px;
    /* transition: ease-in-out 0.3s; */
  }
  
#error_message {
    /* display: none; */
    padding: 1em;
    margin-bottom: 0.75rem;
    color: var(--clr-text);
    border-left: 5px solid var(--clr-secondary);
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
            border-radius: 2px;
    /* transition: ease-in-out 0.3s; */
  }

/* .container {
    margin: auto;
    max-width: 400px;
} */


.icon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* flex-wrap: wrap; */
    /* margin-top: 1em; */
    margin-bottom: 2em;
}

.big-icon {
    /* margin-right: .5em; */
    max-width: 6em;
}
 @media (min-width:800px) {
    .form_fields {
        grid-template-columns: repeat(2,1fr) 0.7fr;
        column-gap: 2em;
    }

    .field {
        margin-bottom: 0em;
    }

    h1 {
        margin: 0;
        font-size: 4rem;
    }

    textarea {
        /* max-width: 800px; */
        font-size: 1.2rem;
    }

    .icon-wrapper {
        display: flex;
        flex-direction: row;
    }

    .big-icon {
        margin-right: 1em;
    }

}