@charset "UTF-8";
/* autoprefixed 120922 */

#contactContent {
   grid-area: body;
}

#contactForm {
   width: 100%;
}

.soloFlex {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
}

.formStyle {
   background-color: gainsboro;
   border: 1px double #0a4044;
}

input,
textarea,
button {
   color: #0a4044;
   cursor: pointer;
   outline: none;
   font-size: 1rem;
   /* pad: 0.3rem; */
   padding: 0.5rem;
   margin: 1rem;
   background-color: #f7f9f9;
   transition: all 0.3s ease-in-out;
}

button {
   border-radius: 8px;
   color: #42a7c6;
   border: 2px solid #42a7c6;
}

input {
   border-radius: 0;
   border: 2px solid #4b6e70;
}

textarea {
   border-radius: 0 0 8px 8px;
   border: 2px solid #4b6e70;
}

/* input,
textarea,
button {
   padding: 0.5rem;
   margin: 1rem;
   background-color: #f7f9f9;
   transition: all 0.3s ease-in-out;
} */

.captcha {
   margin: 1rem 1rem 0 1rem;
}

/* button[type="submit"]:focus, {
   border: #dd8345 2px solid;
}

button[type="submit"]:hover {
   background-color: #dd8345;
} */

button:hover {
   color: #dd8345;
   border: 2px solid #dd8345;
}

button[type="submit"]:active {
   color: #f7f9f9;
   background-color: #dd8345;
}

input:focus,
textarea:focus {
   border: #dd8345 2px solid;
}

button:focus {
   color: #dd8345;
   border: #dd8345 2px solid;
}

textarea {
   width: 95%;
}

input {
   width: 47.5%;
}

@media only screen and (max-width: 768px) {
   #contactForm {
      padding: 1rem 0;
   }

   input {
      width: 95%;
   }

   button,
   input,
   textarea {
      padding: 0.25rem;
      margin: 0.5rem;
   }

   .captcha {
      margin: 0.5rem 0.5rem 0 0.5rem;
   }
}