html {
  background-color: #d8d8d8;
}
body {
  background: linear-gradient(175deg, #f0f0f0 20%, #d0d0d0 80%);
  color: #222;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 16px;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  font-size: 32px;
  font-weight: 600;
  width: 300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
header img {
  max-height: 300px;
}
header span {
  font-family: "Ribeye", serif;
  text-align: center;
}

main {
  flex: 1;
}

footer {
  background-color: #d8d8d8;
  font-weight: 600;
  padding: 50px 20px;
}

@media (prefers-color-scheme: dark) {
  html {
    background-color: #121212;
  }
  body {
    background: linear-gradient(175deg, #202020 20%, #101010 80%);
    color: #fff;
  }
  footer {
    background-color: #121212;
  }
}