:root {
  --background-color: hsl(0, 0%, 0%);
  --label-color: hsl(0, 0%, 100%);
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Default to dark mode, unless the user really wants light mode */
@media (prefers-color-scheme: light) {
  :root {
    --background-color: hsl(0, 0%, 100%);
    --label-color: hsl(0, 0%, 0%);
    transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
  }
}

body {
  font-family: var(--font-family-sans-serif);
  color: var(--label-color);
  background: var(--background-color);
  text-rendering: optimizelegibility;
  -webkit-text-size-adjust: none;
  margin: 0;
}

.hero {
  padding: 1rem;
  min-height: 100%;
}

.hero .content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70vmin;
  flex-wrap: wrap;
}

.hero img {
  height: 100%;
  margin: 5px;
}

.hero h1 {
  margin: 10px;
  text-align: center;
  font-size: 4rem;
}