*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

html {
  min-width: 20rem;
  background-color: var(--body-background);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: var(--space-3) var(--space-2);
  background-color: var(--body-background);
  background-image: none;
  color: var(--color-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

@media (min-width: 64rem) and (min-height: 40.625rem) {
  body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    padding-block: clamp(3.25rem, 7dvh, 4.5rem) clamp(1rem, 2.5dvh, 1.5rem);
    padding-inline: clamp(1rem, 2vw, 2rem);
  }
}

@media (min-width: 64rem) and (max-height: 40.5625rem) {
  body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    padding-block: 2.5rem 0.5rem;
    padding-inline: 1rem;
  }
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}