*:not(dialog) {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto 1fr auto;
  font-family: 'Open Sans', sans-serif;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

p,
h1,
h2 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

h1,
h2 {
  text-wrap: balance;
}

header {
  max-width: 80%;
  padding: auto 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;

  svg {
    max-height: 3rem;
  }

  h1 {
    font-size: 3rem;
  }
}

main {
  margin-top: 2em;
  text-align: center;

  h2 {
    font-size: 3rem;
    margin-block-end: 4em;
  }

  p {
    font-size: 2.5rem;
  }
}

footer {
  margin-block-end: 1em;
  text-align: center;
  font-size: 1.8rem;
}