@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

@property --fg {
  syntax: "<color>";
  inherits: false;
  initial-value: #262626;
}

@property --bg1 {
  syntax: "<color>";
  inherits: false;
  initial-value: #fcfcf0;
}

@property --bg2 {
  syntax: "<color>";
  inherits: false;
  initial-value: #ecdca0;
}

body {
  background-color: var(--bg1);
  padding-inline: 2vw;
  margin: 0;
}

main {
  font-family: 'Libre Baskerville', serif;
}

h1 {
  font-family: 'Libre Baskerville', serif;
  font-style: italic;
  font-size: 4rem;
  color:var(--fg);
}

p {
  color: var(--fg);
  font-size: 2rem;
}

button {
  border: none;
  background: none;
  color:var(--fg);
  font-size: 4rem;
  font-family: 'Courier Prime', monospace;
  text-align: left;
}

button:hover {
  text-decoration: underline;
}

button:active {
  transform: translateY(5%);
}