header{border-bottom:1px solid #222;margin-bottom:1rem}footer{border-top:1px solid #222;margin-top:1rem}:root{--dark-color: #301315ff;--medium-color: #711d25ff;--light-color: #774a4cff;--light-neutral: #c3c1baff;--dark-neutral: #625a51ff;--shadow-size: 1rem}*{box-sizing:border-box}body{color:#222;background-color:#fff;width:100vw;min-height:100vh;height:100%;margin:0;font-family:sans-serif;line-height:1.5}header{top:0;position:sticky;z-index:1;display:flex;margin-bottom:0;background-color:var(--dark-color);height:3rem}header>h1{display:none}header>nav{width:100vw}header>nav>ul{width:100%;height:100%;margin:0;list-style-type:none;display:flex;flex-direction:row;justify-content:space-around;align-items:stretch}header>nav>ul>li{width:100%;display:flex;align-items:stretch}header>nav>ul>li:hover{background-color:var(--medium-color)}header>nav>ul>li>a{color:#fff;line-height:3rem;width:100%;height:100%;text-align:center}header>nav>ul>li>a.active{text-decoration-line:underline}footer{background-color:var(--dark-color);position:relative;bottom:0;margin-top:0;width:100vw;height:3rem;display:flex;flex-direction:row;justify-content:space-around}footer>p{margin:auto;color:#fff}a{color:var(--medium-color);text-decoration:none}main{padding-left:2em;padding-right:2em;padding-top:2rem;padding-bottom:2rem;min-height:calc(100vh - 6rem);display:flex;flex-direction:column;gap:2em;align-items:stretch}main>section{position:relative;padding:1em;margin-bottom:var(--shadow-size);margin-right:var(--shadow-size);max-width:600px;background:var(--light-neutral);filter:drop-shadow(var(--shadow-size) var(--shadow-size) 0px var(--light-color));width:100%;align-self:center}section>h2{margin-top:0!important}section>h1{margin-top:0!important}section code{display:block;white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere;width:100%}.popup-overlay{position:fixed;inset:0;display:none;place-items:center;background:#000000b3;z-index:1000;padding:1.5rem}.popup-overlay.is-open{display:grid}.popup{width:100%;max-width:560px;background-color:var(--light-neutral);overflow:hidden}.popup__header{display:flex;align-items:center;justify-content:space-between;background-color:var(--dark-color);color:#fff;padding:.85rem 1rem}.popup__header h2{margin:0;font-size:1.1rem}.popup__header>button{appearance:none;border:none;background:transparent;color:#fff;width:1.6rem;height:1.6rem;padding:0;font-size:1.6rem;line-height:1;cursor:pointer;transition:transform .1s ease}.popup__header>button:hover{transform:rotate(135deg)}.popup__body{padding:1rem;color:#222}.popup__body h3{margin:0 0 .5rem}