:root {
  color-scheme: light dark;

  --green-0: #FEFAE0;
  --green-1: #606C38;
  --green-2: #283618;
  --green-3: #151C0D;

  --orange-1: #E4AA77;
  --orange-2: #D77F33;
  
  --background: var(--green-0);
  --card-background: var(--green-1);
  --card-shadow: var(--green-2);
  --card-border: var(--green-3);
  --text: var(--green-0);
  --link: var(--orange-1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: var(--green-3);
    --card-background: var(--green-1);
    --card-shadow: var(--green-2);
    --card-border: var(--green-3);
    --text: var(--green-0);
    --link: var(--orange-1);
  }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
  background-color: var(--background);
  color: var(--text);

  font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
  font-weight: normal;
}

h1 {
  font-size: 1.1rem;
}

body {
  display: flex;
  justify-content: center;
}

main {
  margin: 96px 0px;
  background-color: var(--card-background);
  width: calc(100% - 16px);
  max-width: 50ch;
  padding: 8px 16px;
  border-radius: 0px 4px 16px 8px;
  border: 1px solid var(--card-border);
  box-shadow: 4px 6px 0px 0px var(--card-shadow);
}


@media screen and (max-width: 400px) {
  main {
    margin: 8px 8px;
  }
}

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