#contact-page-header {
  width: 61%;
  margin: auto;
  margin-top: 60px;
}

#contact-page-header h1 {
  font-size: var(--font-h2-default);
}

#contact-page-header span {
  padding: 0;
}

#contact-form-container {
  width: 61%;
  margin: 30px auto 60px auto;
  background-color: rgb(252, 252, 252);
  border: 2px solid rgb(211, 211, 211);
  border-radius: 10px;
  box-shadow: 2px 2px 5px lightgray;
}

#contact-form {
  padding: 50px 100px;
}

.contact-form-label-and-input {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

.contact-form-label-and-input label {
  margin-bottom: 10px;
}

.contact-form-label-and-input input {
  padding: 3px 10px;
}

.contact-form-label-and-input textarea {
  height: 300px;
  resize: none;
  padding: 5px 10px;
}

@media (min-width: 2360px) {
  #contact-page-header,
  #contact-form-container {
    width: 40%;
  }

  #contact-form-container {
    margin-bottom: 150px;
  }
}

@media (min-width: 2800px) {
  #contact-page-header,
  #contact-form-container {
    width: 40%;
  }

  #contact-form-container {
    margin-bottom: 350px;
  }
}

@media (min-width: 3300px) {
  #contact-page-header,
  #contact-form-container {
    width: 40%;
  }

  #contact-form-container {
    margin-bottom: 550px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #contact-page-header {
    width: 80%;
  }

  #contact-form-container {
    width: 80%;
  }

  #contact-form {
    padding: 50px 15px;
  }
}

@media (max-width: 767px) {
  #contact-page-header {
    width: 90%;
  }

  #contact-form-container {
    width: 90%;
  }

  #contact-form {
    padding: 50px 15px;
  }
}