html {
  font: menu;
  font-size: 62.5%;
}

body {
	background: var(--body-bg);
	color: var(--body-color);
  font-size: 2rem;
  text-rendering: optimizeSpeed;
  margin: auto;
  text-align: center;
}

header {
  text-align: center;
}

header img {
  width: 18rem;
  height: 18rem;
}

main {
  margin: auto 2rem;
}

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

p {
  margin: 2rem auto;
}

footer {
  font-style: italic;
  font-size: 1.8rem;
  text-align: center;
}

/* light mode */
:root {
	--body-bg: #EEEEEE;
	--body-color: #000000;
  --text-link: #0069C2;
}

/* dark mode */
@media (prefers-color-scheme: dark) {
	:root {
		--body-bg: #333333;
		--body-color: #FFFFFF;
    --text-link: #8CB4FF;
	}
}

/* screen specific configuration */
@media only screen and (min-width: 1000px) {
  body {
    max-width: 100rem;
    text-align: start;
  }

  header img {
    width: 16rem;
    height: 16rem;
  }

  footer {
    font-size: 1.6rem;
  }
}
@media only screen and (min-width: 1600px) {
  body {
    font-size: 1.6rem;
    max-width: 160rem;
  }

  main {
    margin: auto;
  }

  footer {
    font-size: 1.2rem;
  }
}