:root {
    --shadow: #0d013b19;
    --ifm-global-spacing: 1rem;
    --ifm-spacing-horizontal: var(--ifm-global-spacing);
    --grey: #ccc;
    --main-color: #4f46e5;
    --error-color: #b81111;
    --green: #198754;
    --white-background: #fff;
    --secondary-color: #271dd7;
    --white: #fff;
    --black: #0f0f0f;
  }
#form-contact {
  margin-bottom: 1.5625em;
}
*, *:before, *:after {
  box-sizing: border-box;
}
#form-contact .screen-reader {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
#form-contact label {
  display: block;
  margin: .7em .6em .3125em;
  padding: 0;
}
#form-contact button, #form-contact input, #form-contact label {
  touch-action: manipulation;
}
#form-contact input {
    font: inherit;
  border: 1px solid #b8b8b8;
  display: block;
  line-height: 1.5;
  margin: 0;
  width: 100%;
  padding: .3125em;
}
.input.just-validate-error-field {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23B81111'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23B81111' stroke='none'/%3E%3C/svg%3E");
    border-color: var(--error-color);
  }
  .input.just-validate-error-field,
  .input.just-validate-success-field {
    background-position: right calc(0.375em + 0.1875rem) center;
    background-repeat: no-repeat;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
  }
  .input.just-validate-success-field {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
    border-color: var(--green);
  }
  .input.just-validate-success-field:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 0.25rem #19875440;
  }
  .input.just-validate-error-field:focus {
    border-color: var(--error-color);
    box-shadow: 0 0 0 0.25rem #dc354540;
  }
#form-contact button, [type=submit] {
  -webkit-appearance: none;
}

#form-contact button {
    margin-bottom: 1.1875em;
    background: var(--main-color);
    color: var(--white-background);
    padding: 8px 22px;
    border: 0;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 400;
    font-size: 16px;
    transition: background-color ease 300ms;
  }
  
  #form-contact button:hover {
    background: var(--secondary-color);
  }
  
  #form-contact button[data-variant='success'] {
    background-color: var(--green);
  }
  
  #form-contact button[data-variant='negative'] {
    background-color: var(--error-color);
  }
  
  #form-contact button[data-variant='secondary'] {
    background-color: var(--white);
    color: var(--black);
    border-radius: 20px;
  }
#form-contact button, #form-contact input[type=button], #form-contact input[type=reset], #form-contact input[type=submit] {
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
}
#form-contact textarea {
    padding-left: 3px;
    width: 100%;
    height:100px;
  }
@media(min-width: 38em){
#form-contact input{line-height:1.5625}
#form-contact input {width:60%;}
#form-contact textarea {width:60%;height:150px;}
}
