:root{--color-darkest: rgb(22, 22, 22);--color-darker: rgb(84, 84, 84);--color-dark: rgb(138, 138, 138);--color-gray: rgb(180, 180, 180);--color-light: rgb(220, 220, 220);--color-lighter: rgb(242, 242, 242);--color-lightest: rgb(250, 250, 250);--color-primary: rgb(21, 116, 188);--color-secondary: rgb(162, 210, 246);--color-active: rgb(162, 210, 246);--radius-s: 4px;--radius-m: 8px;--radius-l: 12px;--radius-xl: 16px}*{box-sizing:border-box}body{font-family:Trebuchet MS,Lucida Sans Unicode,Lucida Grande,Lucida Sans,Arial,sans-serif;margin:0}// https://stackoverflow.com/questions/2310734/how-to-make-html-text-unselectable .unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}main{text-align:center;padding:0;margin:0}h1{color:#335d92;text-transform:uppercase;font-size:4rem;font-weight:100;line-height:1.1;margin:4rem auto;max-width:14rem}p{line-height:1.35}.asButton{background-color:var(--color-secondary);color:#000;padding:8px 12px;border:solid 2px;border-radius:var(--radius-s);white-space:nowrap;font-size:large;text-decoration:none}code{background-color:var(--color-lighter);padding:3px;border-radius:var(--radius-s);border:solid .5px var(--color-dark)}.asButton:visited{color:#000}.asButton:hover{background-color:var(--color-primary);color:#000}@media (min-width: 480px){h1,p{max-width:none}}.menubar__root{display:flex;justify-content:center;align-items:center;background-color:var(--color-secondary);position:sticky;top:0;white-space:pre;flex-wrap:wrap}.menubar__trigger{appearance:none;display:inline-flex;justify-content:center;align-items:center;height:40px;width:auto;outline:none;padding:0 18px;background-color:var(--color-secondary);border:none;color:#27272a;font-size:16px;gap:8px;line-height:0;transition:.25s background-color;text-decoration:none}.menubar__trigger:hover,.menubar__trigger[data-highlighted=true]{background-color:var(--color-primary);color:#fff}.menubar__content{min-width:220px;padding:8px;background-color:#fff;border-radius:6px;border:1px solid hsl(240 6% 90%);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;outline:none;transform-origin:var(--kb-menu-content-transform-origin);animation:contentHide .25s ease-in forwards}.menubar__content[data-expanded]{animation:contentShow .25s ease-out}.menubar__item{font-size:16px;line-height:1;color:#27272a;border-radius:4px;display:flex;align-items:center;height:32px;padding:0 8px 0 24px;position:relative;user-select:none;outline:none;text-decoration:none}.menubar__item[data-highlighted]{outline:none;background-color:var(--color-primary);color:#fff}@keyframes contentShow{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes contentHide{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.96)}}.footer{background-color:var(--color-lighter);padding:20px;text-align:center;color:var(--color-darker)}.footer strong{font-size:larger}.footer strong a{color:var(--color-darker)}.footer p{margin:2px}.footer a{color:var(--color-dark)}