.forms-container {
  display: flex;
  flex-direction: column;
  gap: 3em;
}

.form {
  font-size: large;

  padding: 1em;
  margin: 0 1em;

  border: 2px solid var(--main-text-color);
  border-radius: 10px;

  background-color: var(--main-highlight-color);

  > * {
    margin-bottom: 1em;
  }

  :last-child {
    margin-bottom: auto;
  }
}

.form-heading {
  font-size: x-large;
  font-weight: normal;
  text-align: center;

  color: var(--main-text-color);
  font-family: var(--font-family-emph)

  margin: 0 0 0.75em 0;
}

.form-item {
  display: flex;
  flex-direction: column-reverse; /* screen reader accessibility */
  align-items: center;

  gap: 0.5em;

  &:has(> .form-input[type="checkbox"]) {
    flex-direction: row-reverse; /* screen reader accessibility */
    justify-content: center;
  }

  &:has(> .form-input[type="radio"]) {
    flex-direction: row-reverse; /* screen reader accessibility */
    justify-content: center;
  }
}

.form-label {
  color: var(--main-text-color);

  font-size: smaller;
  text-align: center;
}

.form-input {
  height: 1.5em;
  
  font-size: inherit;
}

.form-input[type="checkbox"] {
  width: 1.5em;
}

.form-input[type="radio"] {
  width: 1.5em;
}

.form-fieldset {
  border: 2px solid var(--main-text-color);
  border-radius: 10px;

  > * {
    margin-bottom: 1em;
  }

  :last-child {
    margin-bottom: auto;
  }
}

.form-textarea {
  height: 5em;

  font-family: inherit;
  font-size: inherit;
}

.form-submit {
  height: 2em;

  background-color: var(--main-highlight-color);
  color: var(--main-text-color);

  border: 2px solid var(--main-text-color);
  border-radius: 0.5em;

  font-size: inherit;
}