/* contact.css */
section#contact {
  grid-template-rows: auto auto auto;
  margin-bottom: 3vh;
}

#contact .row-1 {
  margin-bottom: 3vh;
}

#contact .row-1 h2 {
  font-size: 5vh;
}

#contact-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr) auto 1fr;
  gap: 1rem;
  max-width: 750px;
  min-width: none;
  margin: 0 auto;
}

.form-group {
  display: flex;
  flex-direction: column;
}

#form-group-name {
  grid-area: 1 / 1 / 2 / 2;
}

#form-group-email {
  grid-area: 1 / 2 / 2 / 3;
}

#form-group-message {
  grid-area: 2 / 1 / 3 / 3;
}

.form-group label {
  font-size: 3vh;
  margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
  background-color: #000;
  color: #c2d9ff;
  border: 1px solid #c2d9ff;
  font-size: 2vh;
  min-width: none;
  padding: 1rem;
}

#recaptcha-branding {
  grid-area: 3 / 1 / 4 / 3;
}

#submit-form {
  background-color: #000;
  color: #c2d9ff;
  border: 2px solid #c2d9ff;
  font-size: 3vh;
  cursor: pointer;
  grid-area: 4 / 1 / 5 / 3;
  transition:
    background-color 0.3s,
    color 0.3s;
}

#submit-form:hover {
  background-color: #c2d9ff;
  color: #000;
}

#submit-form:disabled {
  background-color: #6e6e6e;
}

@media screen and (max-width: 540px) {
  #contact-form {
    grid-template-rows: repeat(3, 1fr) auto 1fr;
  }

  #form-group-name {
    grid-area: 1 / 1 / 2 / 3;
  }

  #form-group-email {
    grid-area: 2 / 1 / 3 / 3;
  }

  #form-group-message {
    grid-area: 3 / 1 / 4 / 3;
  }

  #recaptcha-branding {
    grid-area: 4 / 1 / 5 / 3;
  }

  #submit-form {
    grid-area: 5 / 1 / 6 / 3;
  }
}