/* Privacy and terms in the game's look: parchment, the Dimbo lettering, sticker cards. */
@font-face { font-family: "Dimbo"; src: url("fonts/dimbo.ttf") format("truetype"); font-display: swap; }

:root {
  --ink: #3b2a1a;
  --ink-soft: #6b5440;
  --green: #2fb57f;
  --green-dark: #1f7f58;
  --paper: #fffaf0;
  --line: #5a4030;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  font: 17px/1.6 -apple-system, "Segoe UI", Roboto, sans-serif;
  /* The parchment at its own size at the top, fading into its colour below: stretched over a
     long page (and iOS Safari stretches "fixed" backgrounds over all of it) it went blurry. */
  background:
    linear-gradient(to bottom, rgba(243, 226, 189, 0) 0, rgba(243, 226, 189, 0) 900px, #f3e2bd 1400px),
    url("img/brand/parchment.jpg") center top / min(100%, 853px) auto no-repeat,
    #f3e2bd;
}

main { max-width: 760px; margin: 0 auto; padding: 18px 16px 64px; }

.hero { text-align: center; padding: 8px 0 4px; }
.hero .logo { width: min(260px, 64%); height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 6px 8px rgba(60, 40, 20, .25)); }
.hero .buddies { width: 92px; height: auto; display: block; margin: -6px auto 0; }

h1, h2 { font-family: "Dimbo", -apple-system, sans-serif; font-weight: normal; letter-spacing: .3px; }

h1 {
  font-size: 40px; line-height: 1.1; text-align: center; margin: 8px 0 4px; color: #fff;
  -webkit-text-stroke: 1.5px var(--line); paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--line);
}

.updated { text-align: center; color: var(--ink-soft); margin: 0 0 20px; font-size: 15px; }

/* The whole text sits on one white sticker card, with every section heading as a green tab. */
.card {
  background: var(--paper);
  border: 3px solid var(--line);
  border-radius: 26px;
  box-shadow: 0 6px 0 var(--line), 0 14px 24px rgba(60, 40, 20, .18);
  padding: 22px 22px 26px;
}

h2 {
  display: inline-block; font-size: 23px; color: #fff; margin: 26px 0 8px;
  padding: 4px 16px 3px; border-radius: 14px;
  background: var(--green); border: 2.5px solid var(--line); box-shadow: 0 3px 0 var(--line);
}
.card > h2:first-child { margin-top: 4px; }

p, ul { margin: 8px 0; }
ul { padding-left: 22px; }
li { margin: 6px 0; }
li::marker { color: var(--green-dark); }
strong { color: #2c1e12; }

a { color: var(--green-dark); font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.intro { font-size: 18px; }
.todo { background: #ffe08a; padding: 0 4px; border-radius: 4px; }

footer { text-align: center; color: var(--ink-soft); font-size: 14px; margin-top: 22px; }

@media (max-width: 480px) {
  body { font-size: 16px; }
  h1 { font-size: 34px; }
  .card { padding: 18px 16px 22px; border-radius: 22px; }
  h2 { font-size: 21px; }
}