:root{--primary:#fde;--secondary:#11a}body{font-family:Red Hat Mono,sans-serif;margin:0;padding:0}body,main{perspective:64rem}header{position:relative;top:0;transform-origin:50% 0;width:100%;will-change:transform;z-index:-1}h1{background-color:var(--primary);color:var(--secondary);font-family:Red Hat Mono,sans-serif;font-size:12vw;font-weight:300;line-height:50vh;margin:0;text-align:center;text-transform:uppercase}h1,h1 span{display:block}h1 span{letter-spacing:.25rem;transition:font-weight .1s}h1 span:nth-child(2){background-color:var(--secondary);color:var(--primary);transform:rotate(180deg);transform-origin:50% 50%}h2,h3{font-weight:700;margin-bottom:1rem}h2{font-size:2rem;letter-spacing:.25rem;text-transform:uppercase}h2,h3{opacity:.25}h3{font-size:1.5rem}a{color:inherit;display:inline-block;margin-top:2px;position:relative;text-decoration:inherit}a:after{bottom:0;box-shadow:0 .1rem 0 0 var(--secondary);content:"";height:.1rem;left:-.1rem;position:absolute;transition:box-shadow .2s,height .2s;width:calc(100% + .2rem)}a:hover:after{box-shadow:0 0 0 .1rem var(--secondary);height:100%}.clock{font-size:3vw;opacity:.2}.clock,.weather{color:var(--secondary);font-family:monospace;font-weight:700;padding:1rem;position:absolute;right:0;top:0}.weather{display:flex;font-size:1rem;gap:1.5rem;opacity:.5}.weather .winddirection{background-image:linear-gradient(180deg,transparent,currentColor 75%);height:1em;transform-origin:50% 50%;width:.25em}article.content{background-color:var(--primary);color:var(--secondary);font-size:1.5em;font-weight:200;scroll-snap-type:mandatory;scroll-snap-type:y mandatory}article.content section{border-top:.5rem solid var(--secondary);padding:1em 1em 1em 4em;position:relative;scroll-snap-align:end}article.content section h2{font-size:1.5rem;left:2em;line-height:0;position:absolute;top:1.5em;transform:rotate(90deg);transform-origin:0 0}.refs .flex{display:flex}.refs .flex div{flex:1 1 auto}.refs ul{list-style:none;padding:0}.refs li{padding:.2rem 0}#maincanvas{display:block;height:100vh;left:0;pointer-events:none;position:fixed;top:0;width:100%;z-index:1000}@media (min-width:40rem){article.content section{padding:2em 2em 2em 6em}article.content section h2{font-size:2rem;left:2em;top:2em}.refs ul{padding-left:1rem}}@keyframes fontWeight{0%,to{font-weight:300}33%{font-weight:700}66%{font-weight:500}}