@layer reset {
  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    color-scheme: light dark;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    hanging-punctuation: first allow-end last;

    /* Ensure Google Translate applies the correct direction */
    .translated-rtl {
      direction: rtl;
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }

  ul,
  ol,
  dl {
    list-style-position: inside;

    ul,
    ol,
    dl {
      padding-inline-start: 1lh;
    }
  }

  :where(div, article, header, footer) {
    display: flex;
    flex-direction: column;
  }
}

body {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  display: flex;
  height: 100dvh;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}

header {
  text-align: center;

  h1 {
    margin-bottom: 0.25rem;
  }

  p {
    opacity: 0.6;
  }
}