:root {
  --ratio: 1.3;
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --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));

  --color1: #5bc0ebff;
  --color2: #fde74cff;
  --color3: #9bc53dff;
  --color4: #e55934ff;
  --color5: #fa7921ff;
  --bg-color: var(--color2);

  --font-family: "Playfair Display", serif;
  --font-color: rgba(0, 0, 0, 0.7);

  --font-1: 1rem;
  --font-2: 1.25rem;
  --font-3: 2rem;
  --font-4: 3rem;
}

* {
  font-family: var(--font-family);
  line-height: 1.2em;
  color: var(--font-color);
  box-sizing: border-box;
  max-width: 60ch;
  margin: 0;
  padding: 0;
}

html,
body,
div,
header,
nav,
main,
footer,
canvas {
  max-width: none;
}

html,
body {
  height: 100%;
}

h1 {
  font-size: var(--font-4);
  line-height: 1em;
}

header {
  padding: 5vw;
  position: relative;
  background-color: var(--bg-color);
  overflow: hidden;
  min-height: 100%;
}
header * {
  z-index: 2;
}
a:hover svg {
  transition: all 0.3s;
  transform: scale(1.2);
  fill: black;
}
.canvas {
  position: absolute;
  display: block;
  z-index: 1;
}

.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * + * {
  margin-top: var(--s1);
}

.social {
  display: flex;
  flex-direction: row;
  list-style: none;
  user-select: none;
}

.social > * {
  margin-right: var(--s-1);
}

.social svg {
  width: var(--s2);
  fill: var(--font-color);
}