/* -------------------------------------------------------------------------- */
/*                                  container                                 */
/* -------------------------------------------------------------------------- */
#contact-container {
  display: flex;
  justify-content: center;

  padding-left: 20px;
  padding-right: 20px;
  padding-top: 140px;
  padding-bottom: 120px;
}

#contact-container-inner {
  width: 100%;
  max-width: 800px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;

  font-weight: 400;
  line-height: 24px;
}

/* -------------------------------------------------------------------------- */
/*                                   contact                                  */
/* -------------------------------------------------------------------------- */
#contact-rows-container {
  display: flex;
  flex-direction: column;
  gap: 10px;

  width: 100%;
}

#contact-rows-container span {
  vertical-align: top;
}

#contact-rows-container textarea {
  display: inline-block; /* allow width to shrink/grow */
  overflow: hidden; /* hide the scrollbars */
  width: 100%;
  max-width: 100%;
  resize: none;

  line-height: 24px;
}

.contact-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1em;
}

.contact-row-inner {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.contact-row-inner input {
  flex-grow: 1;
  font-size: 14px;
}

.contact-prompt {
  color: #a0a0a0;
}

/* when any child input (or other focusable) is focused… */
.contact-row:focus-within,
.contact-row:focus-within .contact-prompt {
  color: #3bd1af;
}

/* -------------------------------- skeleton -------------------------------- */
#contact-row-skeleton {
  display: none;
}

/* --------------------------------- message -------------------------------- */
#message-input {
  font-size: 14px;
}

/* --------------------------------- button --------------------------------- */
#submitButton {
  text-decoration: underline;
  font-size: 16px;
  color: #3bd1af;
}

#submitButton:disabled {
  color: rgba(255, 255, 255, 0.6);
}

#submitButton::before {
  display: inline-block;
  margin-right: 1em;
  /* transform: translateY(-2px); */

  font-size: 14px;
}