:root {
  --orange: #f6be41;
  --light-green: #80f8d8;
  --green: #09a57b;
  --dark-green: #044231;
  --blue: #167cb7;
  --beige: #f3e9e1;
  --white: #fdfbfa;
  --light-white: #fefdfd;
  --black: #241e1a;
  --bg: var(--white);
  --fg: var(--black);

  --first-shadow-color: 20deg 11% 62%;
  --first-shadow-elevation-low: 0.3px 0.5px 0.7px
      hsl(var(--first-shadow-color) / 0.34),
    0.4px 0.8px 1px -1.2px hsl(var(--first-shadow-color) / 0.34),
    1px 2px 2.5px -2.5px hsl(var(--first-shadow-color) / 0.34);

  --second-shadow-color: 28deg 12% 59%;
  --second-shadow-elevation-low: 0.3px 0.5px 0.7px
      hsl(var(--second-shadow-color) / 0.34),
    0.4px 0.8px 1px -1.2px hsl(var(--second-shadow-color) / 0.34),
    1px 2px 2.5px -2.5px hsl(var(--second-shadow-color) / 0.34);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-size: 1.2rem;
  font-weight: 200;
  line-height: 1.75;
}

body {
  color: var(--fg);
  background-color: var(--bg);
  font-family: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052,
    serif;
  font-weight: 200;
  font-size: 21px;
}

main {
  margin: auto;
}

section {
  position: relative;
  padding: 3rem 0.5rem;
}

section h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3rem;
}

section h3 {
  margin-bottom: 1.5rem;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.5rem;
}

section:first-of-type h1 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3rem;
}

section:first-of-type h2 {
  margin-bottom: 3rem;
  font-size: 1.5rem;
}

section .container {
  margin: auto;
  max-width: 70ch;
}

section .container:not(:last-of-type) {
  position: relative;
}

a {
  color: var(--blue);
}

p {
  margin-bottom: 1rem;
}

strong {
  font-weight: bold;
}

h1,
h2,
h3 {
  margin: 0;
  margin-bottom: 0.5rem;
  font-weight: 800;
  line-height: 1.3;
}

figure {
  margin: 0 auto;
  margin-bottom: 4.5rem;
}

footer {
  background-color: var(--fg);
  color: var(--bg);
  margin: auto;
}

li.checked::before {
  content: "🟢";
  position: absolute;
  margin-left: -1.5em;
}

li.unchecked::before {
  content: "⚪️";
  position: absolute;
  margin-left: -1.5em;
}

li p {
  font-size: 0.9em;
}