@font-face { font-family: Farhang; src: url(fonts/farhang.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
:root { --y: #f1a81b; --g: #13704f; --c: #fffaf0; }
* { box-sizing: border-box; margin: 0; }
body {
  font-family: Farhang, sans-serif;
  color: var(--g);
  background: var(--g) url(img/bg.svg) 0 0 / 180px;
  animation: drift 20s linear infinite;
  min-height: 100vh;
}
@keyframes drift { to { background-position: 180px 180px; } }

header { text-align: center; padding: 24px 16px 0; position: relative; overflow: clip; }
.logo { width: 150px; background: var(--y); border-radius: 24px; padding: 14px; }
.char { position: absolute; width: 110px; bottom: 10px; left: max(4px, calc(50% - 180px)); transform-origin: 50% 100%; animation: tick .6s steps(1) infinite; }
header p { font: 800 22px 'Baloo Bhai 2'; color: var(--y); padding: 8px 0 16px; }
@keyframes tick {
  0% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg) translateY(-6px); }
}


main { max-width: 560px; margin: auto; padding: 0 16px; }
section { background: var(--c); border-radius: 24px; padding: 34px 18px 8px; margin-top: 44px; position: relative; box-shadow: 7px 7px 0 var(--y); rotate: -.6deg; }
section:nth-child(even) { rotate: .6deg; box-shadow: -7px 7px 0 var(--y); }
h2 { position: absolute; top: -22px; right: 18px; font: 26px/1.2 'Luckiest Guy'; letter-spacing: 1px; background: var(--y); padding: 8px 18px 2px; border-radius: 14px; border: 3px solid var(--c); rotate: -4deg; }
.item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 2px dashed #13704f33; }
.item:first-of-type { border: 0; }
h3 { font-size: 17px; }
.item p { font-size: 13px; opacity: .7; }
.item b { margin-inline-start: auto; white-space: nowrap; color: var(--y); font-size: 17px; }
.item small { font-size: 11px; font-weight: 400; }
footer { text-align: center; color: var(--c); padding: 16px 16px 32px; font: 600 14px/2 Farhang; }
footer a { color: var(--y); text-decoration: none; }