:root {
  --color-background: #fcfcfb;
  --color-text: #000000;
  --color-text-muted: #b9b9b9;
  --color-selection: #e0e0e0;
  --font-family-primary: "Iowan Old Style", "Palatino Linotype", "URW Palladio L",
    "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-weight-normal: 400;
  --line-height-base: 1.33;
  --base-font-size: 32px;
  --fluid-font-size: min(var(--base-font-size), 5.75vw);
  --vertical-padding: 3em;
}

* {
  box-sizing: border-box;
}

html,
body,
p {
  margin: 0;
  padding: 0;
}

html {
  background: var(--color-background);
}

body {
  min-height: 100vh;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family-primary);
  font-size: var(--fluid-font-size);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--color-selection);
}

.page {
  padding: var(--vertical-padding) 1rem;
  text-align: center;
}

.copy {
  display: inline-block;
}

.copy p {
  margin: 0 auto 1em;
  max-width: 98vw;
}

.copy p:last-child {
  margin-bottom: 0;
}

.copy span {
  display: block;
  white-space: nowrap;
  color: var(--color-text-muted);
  transition: color 320ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: color;
}

.copy .indent {
  padding-left: 0.2em;
}

@media (max-width: 720px) {
  :root {
    --fluid-font-size: min(24px, 7vw);
    --vertical-padding: max(14vh, 4.5rem);
  }

  body {
    line-height: 2.21;
  }

  .page {
    padding-inline: 0.75rem;
  }

  .copy {
    width: 100%;
  }

  .copy p {
    margin-bottom: 1em;
    max-width: 94vw;
  }
}