:root {
  --input-border: #878787;
  --secondary-color: #0D47A1;
}

input, textarea {
  padding: 1em;

  border: 1px solid var(--input-border);
  border-radius: 10px;

  font-family: 'Roboto Condensed', sans-serif;
}

input:not([type="checkbox"]), textarea {
  width: calc(100% - 2em);
}

button {
  padding: 1em;
  width: 100%;

  -webkit-appearance: none;
  color: white;
  background-color: var(--secondary-color);
  border: 1px solid var(--secondary-color);
  border-radius: 10px;
}

button:hover {
  cursor: pointer;
  background-color: white;
  color: var(--secondary-color);
}

.name {
  display: flex;
}

.name input:nth-child(1) {
  margin: 0 1% 0 0;
}

.name input:nth-child(2) {
  margin: 0 0 0 1%;
}

.success {
  color: rgb(11, 168, 11);
}

.error {
  color: rgb(214, 11, 11);
}

@media screen and (min-width: 1024px) {
  #formulaire {
    padding: 5% 30% !important;
  }
}