#email > #contact {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 4em;

  min-height: 100vh;
}

#email > #contact #wrapper {
  background-color: rgba(255, 255, 255, 0.75);
  color: var(--color-black);

  margin: auto;

  width: 80%;
  min-height: 90vh;

  border-radius: 0.5em;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  border: 0.1em solid var(--color-primary);
}

#email > #contact #wrapper h2 {
  margin-bottom: 2em;
}

#email > #contact #wrapper form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#email > #contact #wrapper form #inputs {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

#email > #contact #wrapper form #inputs .block {
  width: 40%;

  padding: 1em;

  display: flex;
  justify-content: center;
  flex-direction: column-reverse;
}

#email > #contact #wrapper form #inputs .block input {
  width: 100%;

  padding: 1em 0;

  background-color: transparent;

  border: none;
  border-bottom: 0.1em solid var(--color-gray);

  margin-top: 0.5em;

  transition: 0.3s all;
}

#email > #contact #wrapper form #inputs .block input:focus {
  border-bottom: 0.1em solid var(--color-primary);

  background-color: transparent;
}

#email > #contact #wrapper form #inputs .block label {
  color: var(--color-gray);

  transition: 0.3s all;
}

#email > #contact #wrapper form #inputs .block input:focus ~ label {
  color: var(--color-primary);
}

#email > #contact #wrapper form button {
  padding: 0.5em 2em;

  background-color: transparent;

  cursor: pointer;

  border: 0.1em solid;
  border-radius: 0.25em;
}

#email > #contact #wrapper form #inputs .block select {
  margin-top: 1em;

  background-color: transparent;

  padding: 0.8em 0.5em;

  border: none;
  border-bottom: 0.1em solid;
}

#email > #contact #wrapper form #inputs .block select option {
  color: var(--color-black);

  margin: 0.5em 0;
}

#email > #contact #wrapper form a {
  margin-top: 1em;
}

#email > #contact #wrapper form textarea {
  width: 85.5%;

  padding: 1em;
  margin-top: 0.75em;

  border-radius: 0.25em;
  border: 0.1em solid var(--color-black);

  background-color: transparent;
}

#email > #contact #wrapper form textarea:focus {
  border: 0.1em solid var(--color-primary);
}

#email > #contact #wrapper form input[type='file'] {
  display: none;
}

#email > #contact #wrapper form input[type='file'] ~ label {
  cursor: pointer;

  color: rgba(0, 0, 0, 0.6) !important;
  font-size: 95%;

  margin-top: 2.4em;
  padding: 0.5em;

  border-bottom: 0.1em solid var(--color-black);

  display: flex;
  align-items: center;

  position: relative;
}

#email > #contact #wrapper form input[type='file'] ~ label::before {
  content: 'Anexo';

  color: var(--color-black) !important;

  font-weight: 500;

  display: flex;

  position: absolute;

  top: -100%;

  width: 10em;
}

#email > #contact #wrapper form input[type='file']:valid ~ label::after {
  content: '- ok';

  margin-left: 0.5em;

  display: flex;

  width: 4em;
}

@media (max-width: 700px) {
  #email > #contact {
    padding: 4em 2em;
  }

  #email > #contact #wrapper {
    width: 100%;
  }

  #email > #contact #wrapper form #inputs .block {
    width: 100%;
  }
}