@layer elements {
  html {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    accent-color: var(--color-gold);
    font-family: var(--font-family);
  }

  body {
    background: var(--color-sand);
    color: var(--color-bark);
    min-block-size: 100dvh;
  }

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

  p {
    text-wrap: pretty;
  }

  dialog {
    margin: auto;
  }

  :focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
  }
}