/* The main site's footer, for the static pages that use it (/about). Made by build_guide.py from src/template.html: edit it there. */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
@media (max-width:640px){.container{padding:0 16px}}
footer.ft{font-size:16px;line-height:1.6;color:var(--ink)}
footer.ft .logo-mark{width:28px;height:28px;border-radius:7px}
footer .credit{margin:0 0 14px;font-size:17px;color:var(--ink)}
footer p a{color:inherit}
footer .links{margin-top:6px}
footer .links a{color:var(--muted)}
footer .credit a{color:var(--brand);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}
footer .credit a:hover{opacity:.8}
/* site footer: brand, social and maker; page links; more links; then a Bangladesh landscape along the
   bottom edge (3D hills, sea, and a Cox's Bazar moon-shaped sampan resting on the beach) */
footer.ft{margin-top:40px;padding:34px 0 0;text-align:left;border-top:0;background:#eef4ec}
.ft-scene{display:block;width:100%;height:max(140px,19vw);margin-top:18px}   /* grows with the width, so the top is never cropped */
.ft-waves{animation:ftWave 5s ease-in-out infinite alternate}
.ft-glow{transform-box:fill-box;transform-origin:center;animation:ftGlow 4s ease-in-out infinite alternate}
@keyframes ftGlow{to{transform:scale(1.25);opacity:.45}}
@keyframes ftWave{to{transform:translateX(40px)}}
/* the footer scene comes alive: the boat drifts and rocks, the sailboat glides, birds flap and drift, palm leaves sway */
.ft-scene .ft-boat,.ft-scene .ft-sail,.ft-scene .ft-bird,.ft-scene .ft-bird path{transform-box:fill-box;transform-origin:center}
.ft-boat{animation:ftBoat 14s ease-in-out infinite alternate}
@keyframes ftBoat{0%{transform:translate(-60px,0) rotate(-3deg)}12.5%{transform:translate(-45px,6px) rotate(2.5deg)}25%{transform:translate(-30px,0) rotate(-2.5deg)}37.5%{transform:translate(-15px,6px) rotate(3deg)}50%{transform:translate(0,0) rotate(-3deg)}62.5%{transform:translate(15px,6px) rotate(2.5deg)}75%{transform:translate(30px,0) rotate(-2.5deg)}87.5%{transform:translate(45px,6px) rotate(3deg)}100%{transform:translate(60px,0) rotate(-2deg)}}
.ft-sail{animation:ftSail 20s ease-in-out infinite alternate}
@keyframes ftSail{0%{transform:translate(-150px,0) rotate(-5deg)}25%{transform:translate(-75px,4px) rotate(4deg)}50%{transform:translate(0,0) rotate(-4deg)}75%{transform:translate(75px,4px) rotate(5deg)}100%{transform:translate(150px,0) rotate(-3deg)}}
.ft-bird{animation:ftFly 11s ease-in-out infinite alternate}
.ft-bird path{animation:ftFlap .45s ease-in-out infinite alternate}
.ft-bird:nth-child(2){animation-duration:13s;animation-delay:-4s}.ft-bird:nth-child(2) path{animation-duration:.38s;animation-delay:-.2s}
.ft-bird:nth-child(3){animation-duration:9s;animation-delay:-2s}.ft-bird:nth-child(3) path{animation-duration:.52s;animation-delay:-.3s}
@keyframes ftFly{0%{transform:translate(-70px,10px)}25%{transform:translate(-30px,-12px)}50%{transform:translate(10px,6px)}75%{transform:translate(45px,-14px)}100%{transform:translate(80px,4px)}}
@keyframes ftFlap{to{transform:scaleY(-.6)}}
.ft-leaf{transform-box:view-box;transform-origin:1110px 156px;animation:ftLeaf 2.6s ease-in-out infinite alternate}
.ft-leaf:nth-child(2){animation-duration:3s;animation-delay:-1s}.ft-leaf:nth-child(3){animation-duration:2.3s;animation-delay:-.5s}.ft-leaf:nth-child(4){animation-duration:3.3s;animation-delay:-1.6s}
@keyframes ftLeaf{from{transform:rotate(-9deg)}to{transform:rotate(10deg)}}
@media (prefers-reduced-motion:reduce){.ft-waves,.ft-boat,.ft-sail,.ft-bird,.ft-bird path,.ft-leaf,.ft-glow{animation:none}}
.ft-top{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:32px 56px;padding:10px 0 26px;border-bottom:1px solid rgba(15,107,79,.14)}
.ft .logo{color:var(--ink);text-decoration:none;font-size:17px}
.ft-about{margin:12px 0 16px;font-size:14px;line-height:1.7;max-width:340px}
.ft-social{display:flex;gap:10px}
.ft-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#1877f2;color:#fff;transition:transform .15s,box-shadow .15s}
.ft-social a:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(24,119,242,.35)}
.ft-social a.yt{background:#ff0000}
.ft-social a.yt:hover{box-shadow:0 6px 16px rgba(255,0,0,.3)}
.ft-social a.gp{background:#fff;box-shadow:inset 0 0 0 1px rgba(15,107,79,.18)}   /* the Android app on Google Play */
.ft-social a.gp svg{transform:translateX(1.5px)}
.ft-social a.gp:hover{box-shadow:inset 0 0 0 1px rgba(15,107,79,.18),0 6px 16px rgba(0,0,0,.14)}
.ft-app h3{margin:4px 0 12px;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.gplay{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:10px;background:#000;color:#fff;text-decoration:none;line-height:1.15;transition:transform .15s,box-shadow .15s}
.gplay:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.25)}
.gplay span{display:flex;flex-direction:column;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.gplay small{font-size:10px;letter-spacing:.06em;opacity:.85}
.gplay b{font-size:18px;font-weight:600}
.in-app .ft-app,.in-app .ft-social a.gp{display:none}
.ft-col{justify-self:end}   /* the page links sit against the right edge, in two columns */
.ft-col h3{margin:4px 0 12px;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.ft-col ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,auto);gap:9px 48px}
.ft-col a{color:var(--muted);font-size:14.5px;text-decoration:underline;text-decoration-color:rgba(93,102,96,.4);text-underline-offset:4px}
.ft-col a:hover,footer.ft .ft-bottom a:hover{color:var(--brand)}
.ft-bottom{padding-top:18px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;font-size:13.5px}
footer.ft .ft-bottom a{color:var(--muted);text-decoration:underline;text-decoration-color:rgba(93,102,96,.4);text-underline-offset:4px}
footer.ft .credit{margin:0;font-size:15px}
footer.ft .credit a{color:var(--ink);font-weight:600;border-bottom:0;text-decoration:underline;text-underline-offset:3px}   /* the maker's name goes to the About page */
.ft-meta{display:flex;flex-direction:column;align-items:flex-start;gap:12px}   /* the icons, then "Made by" on its own line */
@media (max-width:640px){
  footer.ft{margin-top:0;padding-top:22px}
  .ft-top{grid-template-columns:1fr;gap:16px;padding:0 0 16px}
  .ft-about{margin:8px 0 12px}
  .ft-social a{width:36px;height:36px}
  .ft-col{justify-self:start}
  .ft-col h3,.ft-app h3{margin:0 0 8px}
  .ft-col ul{display:flex;flex-wrap:wrap;gap:8px 18px}
  .ft-bottom{padding-top:12px;gap:4px 16px;font-size:13px}
  .ft-scene{height:110px;margin-top:6px}
}