/* --------------------------------------- */
/* ---------------- MOBILE --------------- */
/* --------------------------------------- */

#section-contact-form {
  width: 75vw;
}

.form-multi-row {
  display: flex;
    justify-content: space-between;
}

.form-multi-row input {
  width: 100%;
}

.form-multi-row input:first-child {
  margin-right: 7.5px;
}

.form-multi-row input:last-child {
  margin-left: 7.5px;
}

#section-contact-form input {
  height: 30px;
}

#section-contact-form input,
#section-contact-form textarea,
#submit-form-button .section-button {
  font-family: "Lexa", "Courier New", Courier, monospace;
  font-size: 12px;
}

#section-contact-form input,
#section-contact-form textarea {
  margin-top: 15px;

  border: none;
  border-radius: 5px;

  color: var(--background-color);
  font-weight: bold;
  background-color: var(--footer-color);

  text-indent: 10px;
}

#section-contact-form input::placeholder,
#section-contact-form textarea::placeholder {
  font-weight: normal;
  color: var(--background-color);
  opacity: 1;
}

#section-contact-form textarea {
  height: 80px;
  padding: 10px 10px 10px 0px;
  margin-bottom: 15px;
  resize: none;
}

#section-contact-form > :not(.form-multi-row):not(.section-button) {
  width: 100%;
}

#submit-form-button {
  display: flex;
  justify-content: center;
  align-items: center;
}

.err {
  visibility: hidden;
  font-size: 4vw;
  color: red;
}

.err[data-active="true"] {
  visibility: visible;
}

/* --------------------------------------- */
/* --------------- DESKTOP --------------- */
/* --------------------------------------- */

@media screen and (orientation: landscape) {
  #section-contact-form {
    width: 75vw;
  }

  #section-contact-form input,
  #section-contact-form textarea,
  #submit-form-button .section-button {
    font-size: 16px;
  }

  #section-contact-form input,
  #section-contact-form textarea {
    border-radius: 10px;
  }

  #section-contact-form input {
    height: 50px;
  }

  #section-contact-form textarea {
    height: 200px;
  }

  .err {
    display: block;
    height: fit-content;

    font-size: 2vh;
  }
}