:root{color-scheme:light dark;--primary-color: #155263;--secondary-color: #0e3b47;--terciary-color: var(--button-secondary);--main-bg: #fcdb89;--dark-header-bg: #368c99;--button-primary: #124752;--button-secondary: #2c7783;--button-text: #facc57;--button-hover: #c99c08;--transition-duration: .2s;--title-shadow-spread: 3px}[data-theme=dark]{--primary-color: #facc57;--secondary-color: #b98e00;--terciary-color: #503d01;--main-bg: #072027;--dark-header-bg: var(--primary-color);--button-primary: #297961;--button-secondary: #175966;--title-shadow-spread: 3px}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--primary-color: #facc57;--secondary-color: #b98e00;--terciary-color: #503d01;--main-bg: #072027;--dark-header-bg: var(--primary-color);--button-primary: #297961;--button-secondary: #175966;--title-shadow-spread: 3px}}.cube-container{--width: 40px;--height: 40px;--translate-distance: 20px;--translate-duration: 6s;--border-color: var(--primary-color);--border-type: solid;--border-width: 1px;display:flex;justify-content:center;align-items:center}.scene{width:var(--width);height:var(--height);perspective:1000px}.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;animation:rotateCube var(--translate-duration) infinite linear}.face{position:absolute;width:var(--width);height:var(--height);border:var(--border-width) var(--border-type) var(--border-color);background-color:transparent}.front{transform:translateZ(var(--translate-distance))}.back{transform:rotateY(180deg) translateZ(var(--translate-distance))}.left{transform:rotateY(-90deg) translateZ(var(--translate-distance))}.right{transform:rotateY(90deg) translateZ(var(--translate-distance))}.top{transform:rotateX(90deg) translateZ(var(--translate-distance))}.bottom{transform:rotateX(-90deg) translateZ(var(--translate-distance))}@keyframes rotateCube{0%{transform:rotateX(0) rotateY(0) rotate(0)}to{transform:rotateX(360deg) rotateY(360deg) rotate(360deg)}}.text-center{text-align:center}.theme-toggle{cursor:pointer;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:none;border:none;position:absolute;top:1rem;right:1rem;z-index:100}.theme-toggle svg{width:30px;height:30px;fill:var(--primary-color);transition:fill var(--transition-duration) ease}#lightbulb-on{display:none}html[data-theme=dark] #lightbulb-on{display:block}html[data-theme=dark] #lightbulb-off{display:none}body{font-family:Space Mono,monospace;margin:0;padding:0;background-color:var(--main-bg);display:flex;justify-content:center;align-items:center;height:100vh;height:100dvh;text-align:center}main{max-width:1200px;margin-inline:1rem;display:grid;gap:2.6rem}h1{font-weight:700;font-size:3rem;color:var(--secondary-color);margin-block:0;text-shadow:var(--terciary-color) var(--title-shadow-spread) var(--title-shadow-spread);text-wrap:balance}@media(min-width:600px){h1{font-size:4.8rem}}h2{font-size:1.8rem;text-wrap:balance}a{color:var(--secondary-color);font-weight:700;transition:text-decoration-color var(--transition-duration) ease}a:hover,a:focus-visible{text-decoration-color:transparent}strong{color:var(--secondary-color);font-weight:700}abbr{color:var(--secondary-color);text-decoration:underline dotted var(--primary-color);cursor:help;font-weight:700}nav ul{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:center;align-items:center;list-style:none;padding:0;margin:0}nav li{display:inline-block}nav .btn{--bebel-color: var(--button-secondary);--bebel-size: 1px;--bebel-type: solid;display:flex;gap:.4rem;align-items:center;justify-content:center;position:relative;text-decoration:none;color:var(--button-text);font-size:1.2rem;font-weight:700;transition:all var(--transition-duration);background:linear-gradient(to bottom,var(--button-secondary),var(--button-primary));border:none;border-radius:4px;corner-shape:notch;cursor:pointer;font-family:inherit;box-shadow:0 2px 4px #0003;outline:2px solid transparent;outline-offset:1px;text-shadow:1px 1px 3px rgba(0,0,0,.4);padding:.6rem 1.2rem}nav .btn span{position:absolute;inset:2px;border:var(--bebel-color) var(--bebel-size) var(--bebel-type);border-radius:inherit;corner-shape:inherit}nav .btn svg{width:30px;height:30px;fill:var(--button-text)}@media screen and (max-width:600px){nav .btn{font-size:1rem}nav .btn svg{width:25px;height:25px}}nav .btn:hover,nav .btn:focus-visible{background:linear-gradient(to bottom,var(--button-primary),var(--button-secondary));box-shadow:0 4px 8px #0000004d;outline:2px solid var(--button-hover)}dialog{background-color:var(--main-bg);color:var(--primary-color);border-radius:4px;corner-shape:notch;border:none;padding:1.5rem;box-shadow:0 4px 8px #0003;width:80%;max-width:550px}dialog::backdrop{background:#0006;filter:blur(4px)}dialog h2{margin:0 0 .6rem;color:var(--secondary-color)}.dialog-body{text-align:left;font-size:1rem;line-height:1.5;margin-bottom:1.5rem}dialog button.close{background-color:var(--button-secondary);color:var(--button-text);outline:2px solid transparent;border:none;border-radius:2px;corner-shape:notch;padding:.4rem 1rem;transition:all var(--transition-duration)}dialog button.close:hover,dialog button.close:focus-visible{background-color:var(--button-primary);outline:2px solid var(--button-hover);box-shadow:0 4px 8px #0000004d}
