body {
  /* Colour definitions. */
  --color-red: red;
  --color-green: green;
  --color-white: white;
  --color-black: black;
  --color-orange: orange;
  --color-yellow: yellow;
  --color-blue: blue;

  /* User settings. */
  --color-primary: var(--color-white);
  --color-secondary: var(--color-white);
  --color-accent: var(--color-orange);
  --color-accent-complementary: var(--color-blue);

  --color-gradient-primary-start: rgba(12, 68, 87, 1);
  --color-gradient-primary-end: rgba(14, 41, 110, 1);
  --color-gradient-secondary-start: rgba(42, 125, 15, 1);
  --color-gradient-secondary-end: rgba(34, 171, 24, 1);

  --color-header-background: var(--color-secondary);
  --color-header-text: var(--font-color);
  --color-footer-background: var(--color-secondary);
  --color-footer-text: var(--font-color);
  /*#--color-made-by-background: var(--color-white);*/

  --font-family-heading: Georgia;
  --font-family-body: Helvetica;
  --font-color: var(--color-black);

  --line-height: 1.5;

  --hero-text-padding: 2rem;
  --hero-text-margin: 2rem;
  --hero-text-colour: white;
  --hero-text-background-colour: rgba(0, 0, 0, 0.75);

  /* Gradients */
  --background-gradient-primary: linear-gradient(180deg, var(--color-gradient-primary-start) 0%, var(--color-gradient-primary-end) 90%);
  --font-color-gradient-primary: var(--color-white);
  --background-gradient-secondary: linear-gradient(180deg, var(--color-gradient-secondary-start) 0%, var(--color-gradient-secondary-end) 90%);
  --font-color-gradient-secondary: var(--color-white);

  /* Layout overrides. */
  /* See https://codepen.io/kevinpowell/pen/OJYWMpE for more details. */
  /* Full > breakout > popout > content > narrow. */
  --layout-padding-inline: 1rem;
  --layout-content-max-width: 80ch; // The main content width.
  --layout-narrow-size-reduction: 4rem;
  --layout-popout-extra-distance: 4rem;
  --layout-breakout-extra-distance: 8rem;
}