html, body {
  box-sizing: border-box;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: var(--background-color);
  color: var(--foreground-color);
  font-family: var(--font-family);
  letter-spacing: -0.025em;
}

.page {
  box-sizing: border-box;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

header, footer {
  flex-grow: 0;
  flex-shrink: 0;
}

main {
  flex-grow: 1;
}

h1 {
  font-weight: var(--font-weight-h1);
  font-size: var(--font-size-h1);
  margin: unset;
}

h2 {
  font-weight: var(--font-weight-h2);
  font-size: var(--font-size-h2);
}

p {
  color: var(--paragraph-color);
}

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

button {
  cursor: pointer;
  border: none;
  padding: var(--button-padding);
  background-color: var(--secondary-color);
  color: var(--background-color);
  font-weight: var(--font-weight-button);
  font-size: var(--font-size-button);
  font-family: var(--font-family);
}

button[disabled] {
  background-color: var(--highlight-color);
  color: darkgrey;
  cursor: not-allowed;
}