take the slack. */ body { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1 0 auto; } /* Layout: full width content. Pico's .container caps width and centres it, leaving large empty margins on wide screens. Use the full viewport with a 1rem gutter on each side instead. */ .container { max-width: none; padding-inline: var(--pico-spacing); } /* Perf: reserve scrollbar space so content doesn't shift (CWV/CLS). */ html { scrollbar-gutter: stable; scroll-behavior: smooth; } /* Perf: opt into cross document view transitions where supported. */ @view-transition { navigation: auto; } /* A11y: honour reduced motion preferences (required item). */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* Footer social icons. Self hosted brand SVGs are drawn as a CSS mask so the icon colour follows the footer text (and adapts to light/dark); the strict CSP forbids inline styles, so the per icon mask lives here, not in markup. */ .social-links { display: flex; gap: 0.75rem; margin-top: 0.5rem; } .social-links a { display: inline-block; width: 1.25rem; height: 1.25rem; background-color: var(--pico-muted-color); -webkit-mask: var(--social-icon) center / contain no-repeat; mask: var(--social-icon) center / contain no-repeat; transition: background-color 0.15s ease; } .social-links a:hover, .social-links a:focus-visible { background-color: var(--pico-primary); } .social-x { --social-icon: url("/assets/icons/x.svg"); } .social-youtube { --social-icon: url("/assets/icons/youtube.svg"); } .social-github { --social-icon: url("/assets/icons/github.svg"); } /* Center the footer: the copyright line and the row of social icons. */ footer { text-align: center; } footer .social-links { justify-content: center; } /* Home page: center the spinning PZ logo in the space between header and footer. */ .home-main { display: flex; align-items: center; justify-content: center; } .hero-logo { width: min(80vw, 420px); height: auto; }