article{margin:0 auto;max-width:800px;padding:40vh 0;color:var(--dark);isolation:isolate}article a{color:var(--dark)}body{--day: #fffdfa;--evening: #fccc83;--dusk: #db7a2a;--night: #0f131c;--dawn: #16132b;--morning: #9fb3bf;--light: var(--day);--dark: var(--night);--shadow: #151412;--bounce-light: #f5d7a6;--timing-fn: cubic-bezier(.455, .19, 0, .985);margin:0;padding:0;height:100%;width:100%;background-color:var(--light);animation-duration:0s;animation-fill-mode:forwards;animation-timing-function:linear}body.animation-ready{animation-play-state:running;animation-duration:1.7s;animation-name:sunrise}body.animation-ready.night{animation-duration:1.7s;animation-name:sunset}body.night{--light: var(--night);--dark: var(--day);--shadow: #020205;--bounce-light: #1b293f}@keyframes sunrise{0%{background-color:var(--night)}10%{background-color:var(--dawn)}35%{background-color:var(--morning)}to{background-color:var(--day)}}@keyframes sunset{0%{background-color:var(--day)}30%{background-color:var(--evening)}60%{background-color:var(--dusk)}90%{background-color:var(--dawn)}to{background-color:var(--night)}}#dappled-light{pointer-events:none;position:fixed;height:100vh;width:100vw}#progressive-blur{position:absolute;height:100%;width:100%}#progressive-blur>div{position:absolute;height:100%;width:100%;top:0;right:0;bottom:0;left:0;-webkit-backdrop-filter:blur(var(--blur-amount));backdrop-filter:blur(var(--blur-amount));-webkit-mask-image:linear-gradient(252deg,transparent,transparent var(--stop1),black var(--stop2),black);mask-image:linear-gradient(252deg,transparent,transparent var(--stop1),black var(--stop2),black)}#progressive-blur>div:nth-child(1){--blur-amount: 6px;--stop1: 0%;--stop2: 0%}#progressive-blur>div:nth-child(2){--blur-amount: 12px;--stop1: 40%;--stop2: 80%}#progressive-blur>div:nth-child(3){--blur-amount: 48px;--stop1: 40%;--stop2: 70%}#progressive-blur>div:nth-child(4){--blur-amount: 96px;--stop1: 70%;--stop2: 80%}#glow{position:absolute;background:linear-gradient(309deg,var(--bounce-light),var(--bounce-light) 20%,transparent);transition:background 1s var(--timing-fn);height:100%;width:100%;opacity:.65}#glow-bounce{content:"";position:absolute;background:linear-gradient(355deg,var(--bounce-light) 0%,transparent 30%,transparent 100%);transition:background 1s var(--timing-fn);opacity:.65;height:100%;width:100%;bottom:0}.perspective{position:absolute;transition:transform 1.7s var(--timing-fn),opacity 4s ease;top:-30vh;right:0;width:80vw;height:130vh;opacity:.12;background-blend-mode:darken;transform-origin:top right;transform-style:preserve-3d;transform:matrix3d(.8333,.0833,0,.0003,0,1,0,0,0,0,1,0,0,0,0,1)}.night .perspective{opacity:.4;transform:matrix3d(.8333,.0833,0,.0003,0,1,0,0,0,0,1,0,0,0,0,1)}#leaves{position:absolute;background-size:cover;background-repeat:no-repeat;bottom:-20px;right:-700px;width:1600px;height:1400px;background-image:url(/assets/leaves-Bt9LQ_9p.png);filter:url(#wind);animation:billow 8s ease-in-out infinite;margin-left:80px}#blinds{position:relative;width:100%}#blinds .shutter,#blinds .bar{background-color:var(--shadow)}#blinds>.shutters{display:flex;flex-direction:column;align-items:end;gap:60px;transition:gap 1s var(--timing-fn)}.night #blinds>.shutters{gap:40px}.shutter{width:100%;height:40px;transition:height 1s var(--timing-fn)}.night .shutter{height:40px}#blinds>.vertical{top:0;position:absolute;height:100%;width:100%;display:flex;justify-content:space-around}.vertical-shutter{position:absolute;right:48%;height:100%;width:20px;background-color:var(--shadow);transition:width 1s var(--timing-fn)}.night .vertical-shutter{width:20px}.vertical>.bar{width:5;height:100%}@keyframes billow{0%{transform:perspective(400px) rotateX(0) rotateY(0) scale(1)}25%{transform:perspective(400px) rotateX(1deg) rotateY(2deg) scale(1.02)}50%{transform:perspective(400px) rotateX(-4deg) rotateY(-2deg) scale(.97)}75%{transform:perspective(400px) rotateX(1deg) rotateY(-1deg) scale(1.04)}to{transform:perspective(4000px) rotateX(0) rotateY(0) scale(1)}}.grain{filter:brightness(120%) sepia(50%);height:100%;left:0;position:fixed;top:0;width:100%;z-index:10}.grain:before{animation:noise 1s steps(2) infinite;background-image:url(https://upload.wikimedia.org/wikipedia/commons/5/5c/Image_gaussian_noise_example.png);content:"";height:calc(100% + 20rem);left:-10rem;opacity:.08;pointer-events:none;position:fixed;top:-10rem;width:calc(100% + 20rem)}@keyframes noise{0%{transform:translate3d(0,2rem,0)}10%{transform:translate3d(-1rem,-2rem,0)}20%{transform:translate3d(-4rem,1rem,0)}30%{transform:translate3d(4.5rem,-4.5rem,0)}40%{transform:translate3d(-1rem,3.5rem,0)}50%{transform:translate3d(-4.5rem,-2rem,0)}60%{transform:translate3d(1rem,3rem,0)}70%{transform:translate3d(3.5rem,-4rem,0)}80%{transform:translate3d(-4.5rem,.5rem,0)}90%{transform:translate3d(3rem,-2.5rem,0)}to{transform:translate3d(-3.5rem,0,0)}}.sunset #blinds>.shutters{gap:50px}.sunset .shutter{height:30px}.sunset .vertical-shutter{width:12px}.sunset .perspective{opacity:.2}