:root {
  --horizontal-padding: max(2vh, calc(50vw - 20rem));
  color-scheme: light dark;
  --bg: light-dark(white, black);
  --fg: light-dark(black, white);
}

@page {
  size: A4 portrait;
  margin: 10mm;
}

html {
  height: 100%;
  margin: 0px;
}

body {
  font-family: monospace;
  font-size: larger;
  box-sizing: border-box;
  height: 100%;
  margin: 0px;
  padding-left: var(--horizontal-padding);
  padding-right: var(--horizontal-padding);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

h1,
h2,
h3 {
  font-variant: small-caps;
}

a {
  color: inherit;
  font-weight: bold;
}

/* Getting pretty fancy here... */
dt {
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  font-weight: bold;
}

main {
  padding-bottom: 5em;
}

#cta {
  background: var(--fg);
  color: var(--bg);
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

blockquote {
  font-style: italic;
}

form {
  display: flex;
  flex-direction: column;
}

textarea {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

button {
  align-self: flex-start;
  font-family: inherit;
  font-size: larger;
}