/* Privacy and terms in the game's look: night cave, Lilita One headings, Baloo 2 text, cut-corner cards. */
@font-face { font-family: "Lilita One"; src: url("fonts/LilitaOne-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Baloo 2"; src: url("fonts/Baloo2-Variable.ttf") format("truetype"); font-weight: 400 800; font-display: swap; }

:root {
  --night: #0a0e21;
  --night-top: #171436;
  --surface: #1a1f3d;
  --amber: #ffb547;
  --amber-deep: #f57d2e;
  --lavender: #b8a3ff;
  --text: #f5f3ff;
  --text-dim: #b6b3cf;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--text);
  font: 18px/1.6 "Baloo 2", -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    linear-gradient(to bottom, rgba(10, 14, 33, .35) 0, rgba(10, 14, 33, .75) 520px, var(--night) 900px),
    url("img/cave.jpg") center top / min(100%, 900px) auto no-repeat,
    var(--night);
}

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

.hero { text-align: center; padding: 10px 0 0; }
.hero .logo { width: min(420px, 92%); height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 8px 18px rgba(255, 181, 71, .25)); }
.hero .eco { width: 120px; height: auto; display: block; margin: 4px auto 0; }

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

h1 { font-size: 40px; line-height: 1.1; text-align: center; margin: 6px 0 4px; color: var(--amber); text-shadow: 0 0 24px rgba(255, 181, 71, .35); }

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

/* The text sits on one dark card with cut corners, like the tiles in the game. */
.card {
  background: var(--night-top);
  border: 1.5px solid rgba(184, 163, 255, .35);
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
  padding: 24px 24px 28px;
}

/* Section headings as amber wing-tags. */
h2 {
  display: inline-block; font-size: 23px; color: var(--night); margin: 26px 0 8px;
  padding: 4px 16px 6px;
  background: linear-gradient(var(--amber), var(--amber-deep));
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%, 0 10px);
}
.card > h2:first-child { margin-top: 4px; }

p, ul { margin: 8px 0; }
ul { padding-left: 22px; }
li { margin: 6px 0; }
li::marker { color: var(--amber); }
strong { color: #ffffff; font-weight: 700; }

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

.intro { font-size: 19px; }

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

@media (max-width: 480px) {
  body { font-size: 17px; }
  h1 { font-size: 34px; }
  .card { padding: 20px 16px 24px; }
  h2 { font-size: 21px; }
}