:root {
  --background-normal: #111;
  --foreground-lowlight: #666;
  --foreground-normal: #aaa;
  --foreground-highlight: #fff;
  --link-normal: #00aaff;
  --link-hover: #aaff00;
  --font-heading-family: "Noto Serif", serif;
  --font-normal-family: "Noto Sans", sans-serif;
  --font-normal-line-height: 1.25;
  --font-normal-size: 1em;
  --font-normal: var(--font-normal-size)/var(--font-normal-line-height) var(--font-normal-family);
  --page-padding: 20px;
  --line-padding: 20px;
}

* {
  padding: 0;
  margin: 0;
}

html, body {
  font: var(--font-normal);
  color: var(--foreground-normal);
  background-color: var(--background-normal);
}

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

a         { color: var(--link-normal); text-decoration: none; }
a:visited { color: var(--link-normal); text-decoration: none; }
a:hover   { color: var(--link-hover); text-decoration: none; }
a:active  { color: var(--foreground-highlight); text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading-family);
  font-weight: normal;
  color: var(--foreground-highlight);
  margin: var(--line-padding) 0;
}

h1 { font-size: 3em; }
h2 { font-size: 2em; }
h3 { font-size: 1.75em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.25em; }
h6 { font-size: 1em; }

header {
  height: 200px;
  display: grid;
}

header > canvas,
header > h1 {
  grid-column: 1;
  grid-row: 1;
}

header > h1 {
  position: relative;
  display: flex;
  align-items: flex-end;
  margin: 0;
  padding: var(--page-padding);
}

div#links {
  display: flex;
  flex-direction: column;
  padding: var(--page-padding);
}

p { margin: var(--page-padding) }

footer {
  margin: var(--page-padding);
  font-family: var(--font-normal-family);
  font-size: 0.8em;
  color: var(--foreground-lowlight);
  text-align: center;
}

.rounded {
  border-radius: 3px;
}

.larger {
  font-size: 125%;
}

img.inverted {
  filter: invert(100%);
}

.icon {
  height: 1em;
}