:root {
  --spacer: 2em;
}

.hidden {
  display: none;
}

* {
  color: var(--color-fg);
}

html {
  background: var(--color-bg);
}

body {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: var(--spacer);
  max-width: 800px;
  min-height: calc(100svh - 2 * var(--spacer));
  color: var(--fg);
  font-size: 18px;
  line-height: 1.6;
  font-family:
    Open Sans,
    Arial;
}

main {
  flex: 1;
}

h1,
h2,
h3,
h4 {
  line-height: 1.2;
}

p svg,
h1 svg,
h2 svg,
h3 svg,
h4 svg {
  vertical-align: center;
  width: 1em;
}

a {
  color: var(--color-4);
}

a:visited {
  color: var(--color-5);
}

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  float: bottom;
  margin-top: var(--spacer);
}