:root {
  --ratio: 1.3;
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));

  --content-padding: 1.5rem;

  --line-height: 1.5;
  --text-color: #ccc;
  --text-color-light: #5d686f;

  --mono-font: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Ubuntu Mono",
    "Roboto Mono", Menlo, Monaco, Consolas, monospace;
  --sans-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Ubuntu", "Roboto", "Noto Sans", "Droid Sans", sans-serif;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

/* Layout */

html {
  height: 100%;
}

body {
  min-height: 100%;
}

.container {
  margin: 0 auto;
  max-width: 80ch;
  height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

header,
main,
footer {
  padding: var(--content-padding);
}

header {
  flex: 1;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

main {
  flex: 2;
}

footer {
}

/* Generic style */

body {
  background: #222;
  color: var(--text-color);
  font-family: var(--mono-font);
  font-size: 20px;
  font-weight: 400;
  line-height: var(--line-height);
  margin: 0;
}

h1 {
  font-size: var(--s4);
}
h2 {
  font-size: var(--s3);
}
h3 {
  font-size: var(--s1);
}

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