* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: monospace;
  font-weight: normal;
}

:root {
  font-size: calc(1rem + 0.1vw);
  --primary-dark: rgb(209, 136, 0);
  --primary: rgb(255, 166, 0);
  --primary-light: rgb(255, 182, 46);
  --darkgrey: rgb(35, 35, 35);
  --grey: rgb(150, 150, 150);
  --lightgrey: rgb(230, 230, 230);
  --border-color: var(--darkgrey);
  --border-weight: 2px;
  --transition-length: .3s;
}

/* typography */

h1,
h2 {
  text-align: center;
}

a {
  color: inherit;
  transition: var(--transition-length);
}

a:hover {
  color: var(--primary-dark);
}

/* sections */

body {
  height: 100vh;
  background-color: var(--darkgrey);
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  background-color: var(--lightgrey);
  border-bottom: var(--border-weight) solid var(--border-color);
  padding: 1.5em;

  a {
    color: var(--primary);
    font-weight: bold;
    text-decoration: none;
  }
}

main {
  display: flex;
  justify-content: center;
  min-height: 100%;
  margin-top: 7.5em;

  div {
    width: 100ch;
    padding: 5em 2em 10em 2em;
    background-color: white;
    text-align: center;
  }
}

footer {
  position: fixed;
  bottom: 0;
  text-align: center;
  background-color: var(--lightgrey);
  width: 100vw;
  height: 3em;
  padding-top: .65em;
  border-top: var(--border-weight) solid var(--border-color);
}