@font-face {
  font-family: "Bodoni Moda";
  src: url("https://cc.me/fonts/bodonimoda/BodoniModa%5Bopsz,wght%5D.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  color: CanvasText;
  background-color: Canvas;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.6;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: 64px 24px;
  display: grid;
  place-items: center;
}

.page {
  width: 100%;
  max-width: 40em;
  display: flex;
  flex-direction: column;
  gap: 3em;
}

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

h1, h2, p { margin: 0; }

h1 {
  margin-top: 0.3em;
  padding-left: 0.25em;
  font-family: "Bodoni Moda", Didot, "Times New Roman", serif;
  font-weight: 400;
  font-kerning: normal;
  font-size: 2.8em;
  line-height: 1.2;
  letter-spacing: 0.25em;
}

.subtitle { margin-top: 0.65em; }
.introduction { font-size: 1.25em; }
p + p { margin-top: 1em; }
section { margin-top: 1.75em; }
h2 { font-size: 1em; font-weight: bold; }
h2 + p { margin-top: 0.35em; }
a { color: inherit; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
footer { font-size: 0.9375em; }

@media (max-width: 440px) {
  body { padding: 40px 22px; }
  .page { gap: 2.5em; }
  h1 { font-size: 2.4em; }
}