:root{--primary-color: #519d90}*{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}body{background:#fff;color:#333;margin:0;font:1rem/1.4 system-ui,sans-serif;padding:1rem;transition:background .2s ease;display:flex;justify-content:center;align-items:center}.moon{background:#000;color:#c4d1d7}h2{font-size:1.3rem;letter-spacing:1px;margin:0;font-weight:400;line-height:1;color:var(--primary-color)}.dark-mode-toggle{display:none;position:fixed;top:20px;right:20px;z-index:1000;cursor:pointer;width:48px;height:28px;padding:1px;border:1px solid transparent;border-radius:100px;transition:all .2s ease}.moon .dark-mode-toggle{display:block;background:#222;border:1px solid #000}.sun .dark-mode-toggle{display:block;background:#c8efff;border-color:#91d1ff}.sun-moon{width:24px;height:24px;border-radius:50%;position:relative;scale:.8;transition:all .2s ease-in-out}.sun .sun-moon{translate:20px;box-shadow:0 0 4px #ffd000;background:radial-gradient(circle 12px at 12px 12px,#fd4,#fbe778 90%,#fbdd3594)}.cloud{position:absolute;top:14px;left:10px;width:21px;height:7px;background:#f8fcff;border-radius:100px;opacity:0;transition:opacity .2s ease-out}.sun .cloud{opacity:.5}.cloud:after,.cloud:before{content:"";position:absolute;background:#f8fcff;border-radius:100px}.cloud:after{width:6px;height:6px;top:-3px;left:3px}.cloud:before{width:11px;height:11px;top:-5.4px;right:3px}.moon .sun-moon{overflow:hidden;background:radial-gradient(circle 32px at 23px 7px,#f1e8dc,#f1e8dc 50%,#c4bab3 50%);box-shadow:0 0 1px #000,0 0 3px #ffffffd9,0 0 5px #ffffff8c}.moon .sun-moon:before{content:"";position:absolute;top:16px;left:8px;width:4px;height:4px;background:#c4bab3;border:.3px solid #f1e8dc;border-radius:50%}.moon .sun-moon:after{content:"";position:absolute;top:11px;left:3px;width:2px;height:2px;background:#c4bab3;border:.3px solid #f1e8dc;border-radius:50%}.moon .sun-moon .craters-1{position:absolute;top:4px;left:12px;width:5px;height:5px;background:#c4bab3;border-radius:50%}.moon .sun-moon .craters-1:before,.moon .sun-moon .craters-1:after{content:"";position:absolute;background:#c4bab3;border-radius:50%}.moon .sun-moon .craters-1:before{top:7px;left:6px;width:4px;height:4px}.moon .sun-moon .craters-1:after{top:9px;left:0;width:1px;height:1px}.moon .sun-moon .craters-2{position:absolute;top:4px;left:5px;width:3px;height:3px;background:#c4bab3;border:.3px solid #f1e8dc;border-radius:50%}.moon .sun-moon .craters-2:before{content:"";position:absolute;top:14px;left:14px;width:2px;height:2px;background:#c4bab3;border-radius:50%}.page{position:relative;z-index:10;width:100%;max-width:650px;margin:0 auto;background:#ffffff4d;padding:1rem 25px;box-shadow:0 0 15px #0006;border-radius:5px;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.logo{margin:0 0 2rem;font-size:clamp(1rem,12vw,4rem);line-height:1;font-weight:400;text-shadow:1px 1px 0 #d9e4ec,2px 2px 0 #c4d2e1;letter-spacing:3px;color:var(--primary-color);display:block;padding:0}.menu{background:#ffffff4d;border:1px solid rgba(229,229,229,.8);border-width:1px 0 1px;margin:0 -25px 20px;padding:0 20px;display:flex;justify-content:center;align-items:center;height:42px}.menu a{margin:0 1rem}.menu img{transition:transform .1s ease-in-out;width:20px;display:block;filter:invert(51%) sepia(54%) saturate(321%) hue-rotate(120deg) brightness(97%) contrast(87%)}.menu a:hover img{filter:invert(50%);transform:scale(1.1)}.desc{display:block;margin-top:10px;font-size:.9rem}.canvas{position:fixed;inset:0;width:100%;height:100%}.sun .evt-canvas{opacity:.7}.moon{--primary-color: #00afff}.moon body{background:#000;color:#c4d1d7}.moon h2{color:#ccc}.moon .page{background:#0003;box-shadow:0 0 15px #007eff66}.moon .logo{text-shadow:1px 1px 0 #003962,2px 2px 0 #00518a}.moon .menu{background:#002a474d;border-color:#003d68cc}.moon .menu img{filter:invert(55%) sepia(51%) saturate(3843%) hue-rotate(168deg) brightness(100%) contrast(108%)}