:root {
  /* Required by the Zero Knowledge Consulting Group Design Department:
   * - The color "steelblue" must be used.
   * - A square (or at least a rectangle) with a steelblue border must be present an clearly visible.
   * - Other colors must be somehow calculated from steelblue.
   * - Simple CSS is preferred.
   */
  --main-bg-color: #f2f2f2;
  --accent-color: steelblue;
  --contrast-color: hsl(120, 44%, 49%);
  /* like steelblue, but green */

  --main-text-color: color-mix(in srgb, var(--accent-color) 60%, black 40%);
  --secondary-text-color: color-mix(in srgb, var(--contrast-color) 60%, black 40%);
  --link-color: steelblue;
  --error-color: hsl(0, 44%, 49%);
  --default-font: sans-serif;
}

body {
  background-color: var(--main-bg-color);
  font-family: var(--default-font);
  color: var(--main-text-color);
}

.container {
  max-width: 32em;
  margin-left: auto;
  margin-right: auto;
  padding-top: 3em;
  padding-bottom: 8em;
  padding-left: 4em;
  padding-right: 4em;
  border: 2px solid var(--accent-color);
}

h1 {
  color: var(--accent-color);
}

p.error {
  color: var(--error-color);
}

b {
  color: var(--secondary-text-color);
}

.error b {
  color: var(--error-color);
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code {
  font-size: 1.2em;
}

@media only screen and (max-width: 600px) {
  .container {
    padding-left: 1em;
    padding-right: 1em;
  }
}