.click {
    color: black;
    text-decoration: none;
    border: outset var(--light-blue) 0.18rem;
    background-color: var(--light-blue);
    white-space: nowrap; /* Prevent the button from going multi-line */
}

.click::first-letter { text-decoration: underline; }

.click:active {
    border: inset var(--dark-blue) 0.18rem;
    background-color: var(--dark-blue);
}

.site-header {
    display: flex;
    flex-flow: column;
    gap: 1em;
}

.site-title {
  text-align: center;
  border: outset var(--light-warm-gray) 0.18rem;
  background-color: var(--light-warm-gray);
  padding: 0.5em 0;
  margin-bottom: 0.15em;
  overflow-wrap: anywhere;
}

.site-nav {
  display: flex;
  flex-flow: row wrap;
  gap: 0.25em;
  border: outset var(--light-warm-gray) 0.18rem;
  padding: 0.5em 0.25em;
  background-color: var(--light-warm-gray);
}

.site-nav > .click {
    flex: 1;
    padding: 0 0.5em 0 0.5em;
}

.site-footer {
  text-align: center;
  border: outset var(--light-warm-gray) 0.18rem;
  background-color: var(--light-warm-gray);
  padding: 0;
  margin: 1.25em 0;
}

.page-title {
  text-align: center;
  border: inset var(--dark-warm-gray) 0.18rem;
  padding: 0.5em 0;
  margin: 0.85em 0;
  background-color: var(--dark-warm-gray);
}

.page-body {
  background-color: var(--light-warm-gray);
  border: outset var(--light-warm-gray) 0.18rem;
  padding: 0.5em 1em;
}

.form-preview {
    background-color: var(--dark-warm-gray);
    border: inset var(--dark-warm-gray) 0.18rem;
    padding: 0.25em 0.5em;
    overflow-wrap: anywhere;
}

.form-body {
  background-color: var(--light-warm-gray);
  border: outset var(--light-warm-gray) 0.18rem;
  padding: 0.5em 1em;
  display: flex;
  flex-flow: column;
  gap: 1em;
}

.form-field {
    display: flex;
    flex-flow: column;
    gap: 0.25em;
}

.form-field > input { border: inset var(--dark-warm-gray) 0.18rem; }

.form-field > textarea {
    border: inset var(--dark-warm-gray) 0.18rem;
    overflow: scroll;
    resize: vertical;
}

.form-checkbox {
    display: flex;
    flex-flow: row;
    gap: 1em;
    align-items: center;
}

.form-checkbox > input { outline: inset var(--dark-warm-gray); }

.form-button {
    border: outset var(--light-blue) 0.18rem;
    background-color: var(--light-blue);
    padding: 0.5em 1.5em;
    text-align: left;
    color: black;
    width: 33%;
}

.form-button::first-letter { text-decoration: underline; }

.form-button:active {
    border: inset var(--dark-blue) 0.18rem;
    background-color: var(--dark-blue);
}

.field-with-error {
    border: dashed var(--highlight-red);
    padding: 0.5em 0.25em;
}

.stash-with-info {
    border: dashed var(--highlight-green) 0.5rem;
    background-clip: padding-box;
    padding: 1em;
    background-color: var(--transparent);
}

.stash-with-error {
    border: dashed var(--highlight-red) 0.5rem;
    background-clip: padding-box;
    padding: 1em;
    background-color: var(--transparent);
}