#contact-container {
  display: none;
}

#contact-form {
  z-index: 0;
  padding: 1em;
  display: grid;
  grid-template-columns: 1fr 3fr 0.3fr 1fr;
  align-items: center;
  align-content: start;
  gap: 1em;
  font-size: 140%;
}


#contact-form label:nth-of-type(1), #contact-form input:nth-of-type(1) {
  display: none;
}

#contact-form label {
  justify-self: right;
  grid-column: 1;
}

#contact-form label:after {
  content: " *";
  font-weight: bold;
  color: #f44;
}

#contact-form input {
  grid-column: 2 / -2;
  padding: .4em;
  font-size: inherit;
}

#contact-form label[for='verification'] {
  grid-column: 1 / -3;
  justify-self: right;
}

@media only screen and (max-width: 310px) {
  #contact-form label[for='verification'] {
    justify-self: left;
  }
}

#contact-form input[name='verification'] {
  grid-column: 3;
  min-width: 2.2em;
}

#contact-form textarea {
  grid-column: 2 / -2;
  min-height: 6.4em;
  font-size: inherit;
}

@media only screen and (max-width: 540px) {
  #contact-form {
    font-size: 100%;
  }

  #contact-form input, #contact-form label, #contact-form textarea {
    grid-column: 1 / -1;
    justify-self: unset;
  }

  #contact-form input {
    font-size: 80%;
  }

  #contact-form label {
    margin-bottom: -0.8em;
  }
}

@media only screen and (min-width: 540.1px) and (max-width: 840px) {
  #contact-form {
    font-size: 120%;
  }

  #contact-form input, #contact-form label, #contact-form textarea {
    grid-column: 1 / -1;
    justify-self: unset;
  }

  #contact-form input {
    font-size: 90%;
  }

  #contact-form label {
    margin-bottom: -0.8em;
  }

}

#contact-form span.rpamania {
  white-space: nowrap;
}

#contact-form span.alphabet-hint {
  font-weight: bold;
  color: #a978ff;
}

#contact-form input[type='submit'] {
  grid-column: 1 / -1;
  height: 3em;
  margin-top: 1em;
  padding: 0 6vw;
  font: inherit;
  color: #110;
  font-weight: bold;
  background-color: #ffd;
  white-space: pre-wrap;
  justify-self: center;
}

#contact-form input[type='submit']:disabled {
  background-color: #444;
}

#contact-form input, #contact-form textarea {
  border-radius: .4em;
}

#contact-form [id^="error-"] {
  color: red;
  grid-column: 2 / -2;
  margin: -1em 0 0 0.2em;
  display: none;
}

#error-verification {
  justify-self: right;
}

#email-sent {
  display: none;
  grid-column: 1 / -1;
  justify-self: center;
  color: #4f4;
  font-weight: bold;
}