article{margin:0 auto;max-width:800px;padding:40vh 15vw;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: #1a1917;--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:1s;animation-name:sunrise}body.animation-ready.dark{animation-duration:1.7s;animation-name:sunset}body.dark,a.dark{--light: var(--night);--dark: var(--day);--shadow: #030307;--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:.5}#glow-bounce{content:"";position:absolute;background:linear-gradient(355deg,var(--bounce-light) 0%,transparent 30%,transparent 100%);transition:background 1s var(--timing-fn);opacity:.5;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:.07;background-blend-mode:darken;transform-origin:top right;transform-style:preserve-3d;transform:matrix3d(.75,-.0625,0,.0008,0,1,0,0,0,0,1,0,0,0,0,1)}.dark .perspective{opacity:.3;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(/leaves.png);filter:url(#wind);animation:billow 8s ease-in-out infinite}#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)}.dark #blinds>.shutters{gap:20px}#blinds>.vertical{top:0;position:absolute;height:100%;width:100%;display:flex;justify-content:space-around}.vertical>.bar{width:5;height:100%}.shutter{width:100%;height:40px;transition:height 1s var(--timing-fn)}.dark .shutter{height:80px}@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(400px) rotateX(0) rotateY(0) scale(1)}}