@font-face { font-family: Acme; src: url("/assets/fonts/acme.ttf"); }
@font-face { font-family: Inter; src: url("/assets/fonts/inter.ttf"); }
@font-face { font-family: Inter; src: url("/assets/fonts/inter-bold.ttf"); font-weight: bold; }
@font-face { font-family: PTSerif; src: url("/assets/fonts/ptserif.ttf"); }
@font-face { font-family: PTSerif; src: url("/assets/fonts/ptserif-bold.ttf"); font-weight: bold; }

html { margin: 1rem; background: Snow; color: Black; font: normal 16px/1 Inter; }
body { max-width: 46rem; margin: 0 auto; }
body h1 { margin: 2rem 0; font: bold 2rem/1.2 PTSerif; }
body p { line-height: 1.4; }
body a { color: Blue; }
body a[target=_blank]:after { content: "⇗"; display: inline-block; margin-left: 0.1rem; position: relative; top: -0.1rem; }
nav { margin: 0 0 1rem; text-align: center; }
nav a { font: 1.75rem/1 Acme; color: Black; text-decoration: none; }
nav a img { width: 2rem; }
nav a span { position: relative; top: -0.45rem; }
footer { margin: 6rem 0 2rem; }
footer address { font: normal 0.85rem/1.3 Inter; }

form { margin: 2rem 0; padding: 1rem; background: White; border: solid 1rem Linen; }
form h1 { margin: 0; font-size: 1.5rem; }
form p { margin: 0; }
form h1 + p { margin: 0.5rem 0 1rem; }
form label { cursor: pointer; }
form input:not([type=checkbox]) { display: block; width: 100%; box-sizing: border-box; padding: 0.35rem; border: solid 2px Silver; font: inherit; font-size: 1.1rem; }
form button { display: inline-block; padding: 0.5rem 1rem; background: Gold; border: solid 1px Gold; color: Black; font: inherit; font-weight: bold; cursor: pointer; }
form div { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }

main#index h1 { margin-bottom: 0; text-align: center; font: bold 3rem/1.2 PTSerif; }
main#index h1 + p { margin: 1rem 0; text-align: center; font: normal 1.65rem/1.2 PTSerif; }
main#index form { margin-bottom: 3rem; background: DarkGreen; border: none; border-radius: 0.35rem; }
main#index form div { margin: 0; }
main#index form input { border-color: transparent; }
main#index h2 { margin: 1rem 0; font: normal 2rem/1.2 PTSerif; }
main#index blockquote { margin: 3rem 0 1rem; padding-left: 1rem; border-left: solid 1rem Linen; }
main#index blockquote p { margin: 0; font: italic 1.75rem/1.1 PTSerif; }
main#index blockquote + p { margin: 0.5rem 0 4rem; font-style: italic; }
main#index blockquote + p:before { content: "- "; }
main#index p.divider { margin: 2rem 0; text-align: center; font-size: 1.25rem; }

@media screen and (width <= 32rem) {
  nav a { font-size: 1.5rem; }
  nav a img { width: 1.75rem; }
  form div { display: block; }
  form input:not([type=checkbox]) { margin-bottom: 0.5rem; }
  main#index h1 { margin-top: 1rem; font-size: 2rem; }
  main#index h1 + p { font-size: 1.5rem; }
  main#index form { columns: 1; }
  main#index h2 { margin: 1rem 0; font-size: 1.5rem; }
  main#index blockquote p { font-size: 1.5rem; }
}