:root{--font-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--clr-bg: hsl(22, 22%, 92%);--clr-bg-alt: hsl(22, 22%, 84%);--clr-light: white;--clr-dark: #333;--clr-text: var(--clr-dark);--border: 1px solid var(--clr-dark);--page-padding-inline: 2rem;--container-lg-width: min(100%, 64rem);--container-md-width: min(100%, 50rem);--container-sm-width: min(100%, 32rem);--section-content-gap: 2.5rem;--section-padding: 4.5rem var(--page-padding-inline)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:4rem}body{font-family:var(--font-base);background-color:var(--clr-bg);color:var(--clr-text)}h1,h2,h3,h4{text-wrap:balance}p,li{text-wrap:pretty}a{color:var(--clr-text)}.back-link{font-size:1rem;color:var(--clr-text);text-decoration:none;display:inline-block}.back-link:before{content:"← "}.back-link:hover{text-decoration:underline}.page-section{padding:var(--section-padding);display:flex;flex-flow:column nowrap;gap:var(--section-content-gap)}.container-large>*{width:var(--container-lg-width);margin-inline:auto}.container-medium>*{width:var(--container-md-width);margin-inline:auto}.container-small>*{width:var(--container-sm-width);margin-inline:auto;text-align:center}.section-header{font-size:2rem;text-align:center}.card-list{display:flex;flex-flow:row wrap;justify-content:center;gap:var(--section-content-gap)}.card{background-color:var(--clr-light);border:var(--border);border-bottom-width:2px;border-radius:20px;text-decoration:none}.card{transition:transform .12s ease-out}.card:hover,.card:focus-visible{transform:translateY(-2px)}.card:active{transform:translateY(0)}@media(max-width:700px){:root{--page-padding-inline: 1.625rem;--section-padding: 3rem var(--page-padding-inline)}html{scroll-padding-top:3rem}}@media(max-width:400px){h1{font-size:2.375rem;margin-bottom:1rem}}header.app-header.header-dark{--clr-header-bg: var(--clr-dark);--clr-header-text: var(--clr-bg)}header.app-header{--clr-header-bg: var(--clr-bg);--clr-header-text: var(--clr-text);position:sticky;top:0;z-index:20;padding-block:1rem;padding-inline:0;background-color:var(--clr-header-bg);border-bottom:var(--border)}header.app-header a{color:var(--clr-header-text);text-decoration:none}.header-container{max-width:64rem;padding-inline:var(--page-padding-inline);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}.header-nav{display:flex;align-items:center;gap:1.5rem;font-size:1rem;font-family:var(--font-base);font-weight:500}.header-nav a{padding-block:.25rem}.header-nav a:hover{text-decoration:underline;text-underline-offset:3px}.header-menu-toggle{display:none;align-items:center;justify-content:center;padding:.25rem;border:0;background:transparent;color:var(--clr-header-text);cursor:pointer;font-size:1.5rem}.header-menu-toggle i{line-height:1}@media(max-width:700px){.header-menu-toggle{display:inline-flex}.header-nav{display:none}.header-nav.is-open{display:flex;flex-flow:column nowrap;align-items:stretch;gap:1.25rem;position:absolute;top:100%;left:0;right:0;z-index:10;padding-block:1rem;padding-left:2rem;border-bottom:1px solid #888;background-color:var(--clr-header-bg)}}@media(prefers-reduced-motion:reduce){header{animation:none!important;transition:none!important}}@keyframes header-float-in{0%{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}.header-logo{width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--clr-header-text);border-radius:6px;font-family:Comic Sans MS,Comic Sans,Chalkboard SE,Comic Neue,cursive;font-size:1.1rem;font-weight:700;line-height:1.4}footer{padding-block:2.5rem 2.75rem;border-top:none;background-color:var(--clr-dark);color:var(--clr-bg);display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;gap:2rem}footer .link-container{display:flex;flex-flow:row wrap;align-items:center;justify-content:center;column-gap:1.75rem}footer .link{color:var(--clr-bg);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}footer .link:hover,footer .link:focus-visible{color:var(--clr-light)}
