@import '../../global.css';

main#contact {
  background-color: var(--light-blue);
}

main#contact h1 {
  font-size: 3.6rem;
  color: var(--blue-bg);
  margin-bottom: 2.4rem;
}

main#contact form {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

main#contact form div {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

main#contact :is(label, button) {
  font-size: 2rem;
  color: var(--blue-bg);
}

main#contact label {
  font-size: 2rem;
}

main#contact button {
  width: 20rem;
  border-radius: 0.6rem;
  padding: 1.6rem;
  border: none;
  background-color: var(--button-dark-bg);
  color: var(--light-blue);
  cursor: pointer;
  margin-inline: auto;
}

main#contact :is(button:focus, button:hover) {
  background-color: var(--blue-bg);
  transition: 0.3s;
}

main#contact :is(input, textarea) {
  background-color: var(--light-blue);
  color: var(--blue-bg);
  padding: 0.8rem;
  font-size: 1.6rem;
  border: 2px solid var(--blue-bg);
  border-radius: 0.4rem;
}