html,
body {
  height: 100%;
}
body {
  font-family: Verdana;
  text-align: center;

  display: flex;
  flex-direction: column;
}

body > div {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}

h1 {
  color: hsl(278, 100%, 10%);
  font-size: 10vw;
}

h2 {
  color: hsl(278, 100%, 33%);
  font-size: 10vw;
}

button {
  /* TODO some CSS trick to get height: 100% of width?; */
  background-color: hsl(278, 100%, 90%);
  border: 4px solid hsl(278, 100%, 50%);
  font-size: 5em;
  font-family: inherit;
}