body {
  background-color: #000;
  color: #fff;
}

.home {
  display: grid;
  min-height: 100vh;
  place-items: center;
}

.contact {
  width: min(100% - 2rem, 40rem);
  margin: 0 auto;
  padding: 2rem 0 4rem;
}

.contact__back {
  color: #fff;
  text-decoration: none;
}

.contact__title {
  margin: 3rem 0 2rem;
  font-size: clamp(2rem, 6vw, 3rem);
}

.contact__form {
  display: grid;
  gap: 1.5rem;
}

.contact__field {
  display: grid;
  gap: 0.5rem;
}

.contact__required,
.contact__optional {
  margin-left: 0.5rem;
  font-size: 0.8em;
}

.contact__required {
  color: #ff8a8a;
}

.contact__optional {
  color: #aaa;
}

.contact__field input,
.contact__field textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #777;
  border-radius: 0.25rem;
  background-color: #111;
  color: #fff;
}

.contact__field input:focus,
.contact__field textarea:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.contact__submit {
  justify-self: start;
  min-width: 10rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid #fff;
  border-radius: 0.25rem;
  background-color: #fff;
  color: #000;
}

.contact__submit:hover {
  background-color: transparent;
  color: #fff;
}