:root {
  --box_foreground: #FFF8EF;
  --box_background: #2E2633;
  --color_foreground: #2E2633;
  --color-background: white;
  --box_link: #A97860;
  --color_link: #AB2346;

  --subheader_foreground: white;
  --subheader-background: #009DB2;

  --header-foreground: white;
  --header-background: #AB2346;

  --line: 1.5rem;
}

* {
  margin: 0px;
  padding: 0px;
  font-family: serif;
  line-height: var(--line);
}

em {
  font-style: normal;
  font-weight: bold;
}

html {
  color: var(--color_foreground);
  padding-bottom: 40px;
  background-color: var(--color-background);
}

body {
  max-width: 50rem;
  margin: 0px auto;
  word-break: break-word;
}

a, a:visited, a:active {
  color: var(--color_link);
}

h1, h2 {
  font-size: 1.4rem;
  padding: 0px;
  margin: 2em;

  text-align: center;
}

h1 {
  font-size: 1.4rem;
}

header {
  display: flex;
  font-style: normal;
  color: var(--header-foreground);
  margin: 1em;
  justify-content: space-around;
}

header a.fn, header a.fn:visited, header a.fn:active {
  color: var(--header-foreground);
  background-color: var(--header-background);
}

header a.fn {
  display: block;
  font-family: 'Varela Round';
  font-size: 2.5rem;
  font-weight: normal;
  height: calc(3 * var(--line));
  line-height: calc(3 * var(--line));
  text-align: center;
  text-decoration: none;
  width: calc(1.75rem * 11);
}

main { text-align: center; }

.download-button {
  margin-top: 1em;
}