:root{--base-hue:165;--base-sat:40%;--clr-10:hsl(var(--base-hue),var(--base-sat),10%);--clr-20:hsl(var(--base-hue),var(--base-sat),20%);--clr-30:hsl(var(--base-hue),var(--base-sat),30%);--clr-40:hsl(var(--base-hue),var(--base-sat),40%);--clr-50:hsl(var(--base-hue),var(--base-sat),50%);--clr-60:hsl(var(--base-hue),var(--base-sat),60%);--clr-70:hsl(var(--base-hue),var(--base-sat),70%);--clr-80:hsl(var(--base-hue),var(--base-sat),80%);--clr-85:hsl(var(--base-hue),var(--base-sat),85%);--clr-90:hsl(var(--base-hue),var(--base-sat),90%);--clr-95:hsl(var(--base-hue),var(--base-sat),95%);--primary:hsl(var(--base-hue),var(--base-sat),50%);--primary-75:hsla(var(--base-hue),var(--base-sat),50%,75%);--primary-50:hsla(var(--base-hue),var(--base-sat),50%,50%);--primary-25:hsla(var(--base-hue),var(--base-sat),50%,25%);--primary-15:hsla(var(--base-hue),var(--base-sat),50%,15%);--primary-10:hsla(var(--base-hue),var(--base-sat),50%,10%);--primary-05:hsla(var(--base-hue),var(--base-sat),50%,5%);--accent-hue:345;--accent-sat:75%;--accent:hsl(var(--accent-hue),var(--accent-sat),50%);--accent-75:hsla(var(--accent-hue),var(--accent-sat),50%,75%);--accent-50:hsla(var(--accent-hue),var(--accent-sat),50%,50%);--accent-25:hsla(var(--accent-hue),var(--accent-sat),50%,25%);--accent-15:hsla(var(--accent-hue),var(--accent-sat),50%,15%);--accent-10:hsla(var(--accent-hue),var(--accent-sat),50%,10%)}@font-face{font-family:Bebas Neue;font-style:normal;font-weight:400;src:local(""),url(/fonts/bebas-neue-v2-latin-regular.woff2) format("woff2"),url(/fonts/bebas-neue-v2-latin-regular.woff) format("woff")}html{scroll-snap-type:y mandatory;overscroll-behavior:contain;scroll-behavior:smooth}body{background:var(--clr-95);font-size:2.1rem;color:var(--clr-30);font-family:Bebas Neue,Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif}main{scroll-snap-align:start;scroll-snap-stop:always}h1{padding-inline:1.5rem;max-width:48rem;font-size:1.5rem;line-height:2rem}@media (min-width:768px){h1{font-size:3rem;line-height:1}}h1:before{content:"";position:absolute;top:-4rem;left:50%;transform:translateX(-50%) rotate(-10deg);width:3rem;height:3rem;border:4px solid var(--primary-50);transition:transform .24s ease-in-out}h1:hover:before{transform:translateX(-50%) rotate(-45deg)}h1,h2{font-family:Bebas Neue,Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif;padding-top:.5rem;margin-bottom:2rem;color:var(--primary);position:relative}h2,h3{z-index:1}h2{color:var(--clr-60)}h3{color:var(--clr-70)}p{margin-bottom:1.2rem}a{color:var(--clr-40);-webkit-text-decoration:currentColor double underline;text-decoration:currentColor double underline;text-decoration-color:var(--accent-25);text-decoration-thickness:.15rem;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;transition:all .15s ease-out}a:hover{color:var(--clr-30);-webkit-text-decoration:currentColor double underline;text-decoration:currentColor double underline;text-decoration-color:var(--accent-50);text-decoration-thickness:.15rem}.color-picker{max-width:42rem;display:flex;justify-content:center;gap:.25rem;flex-wrap:wrap}.color-picker a{width:3rem;height:3rem;transition:transform .25s ease-out}.color-picker a:hover{transform:scale(.95) rotate(-5deg)}@media (min-width:640px){.color-picker a{width:4rem;height:4rem}}section{padding:0 1rem;display:flex;justify-content:center;align-items:center;height:100vh;scroll-snap-align:end;scroll-snap-stop:always}section:not(.photo){flex-direction:column;text-align:center}section:first-of-type h2{margin-bottom:0;max-width:32rem;font-size:1.125rem;line-height:1.75rem}@media (min-width:768px){section:first-of-type h2{font-size:1.5rem;line-height:2rem}}section:nth-of-type(odd){background-color:var(--clr-90)}section .landscape,section .portrait{max-height:70vh;max-width:75vw;width:auto;margin:0 auto}section img{-o-object-fit:cover;object-fit:cover;box-shadow:0 17px 10px -10px var(--primary-05);outline:1rem solid hsla(0,0%,100%,.2)}section:nth-of-type(odd) img{box-shadow:0 17px 10px -10px var(--primary-10)}@media (min-width:768px){section img{outline-width:1.5rem;transition:all .25s ease-out}section img:hover{transform:translateY(-2px)}}section.photo{position:relative}section.photo h2,section.photo h3{line-height:1;padding-top:0;margin-left:0!important}section.photo h2{font-size:1.5rem;margin-bottom:0}section.photo h3{font-size:1.75rem;color:var(--clr-80);margin-left:.25rem;margin-top:.5rem}@media (min-width:768px){section.photo div{display:flex}section.photo h2,section.photo h3{writing-mode:vertical-rl;text-orientation:mixed}section.photo h2{font-size:2rem}section.photo h3{font-size:3rem;margin-top:0}}@keyframes fall{0%{transform:translateY(-2rem);opacity:0}to{transform:translateY(0);opacity:1}}section.photo img{animation:fall 1s linear;animation-timeline:scroll(self block)}section.photo h2{animation:fall 1s ease-in-out;animation-delay:1s;animation-timeline:scroll(nearest block)}section.enter h3{animation:fall 1s ease-in-out;animation-fill-mode:backwards;animation-delay:.5s}.download-btn{display:none;position:absolute;top:.5rem;left:.5rem;background:hsla(0,0%,100%,.25);box-shadow:0 1px 2px 0 rgba(0,0,0,.05);opacity:.6}.download-btn:hover,.to-top-wrapper a:hover{opacity:1}@media (min-width:640px){.download-btn{display:block;top:1rem;left:1rem}}.thanks-box{display:flex;position:fixed;bottom:0;left:0;padding-left:.25rem;padding-right:.25rem;width:100%;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:2;background-color:hsla(0,0%,100%,65%);transform:translateY(calc(100% + 2rem));transition:transform 1s cubic-bezier(.76,0,.24,1)}@media (min-width:640px){.thanks-box{bottom:1rem;left:1rem;max-width:32rem}}.thanks-box.active{transform:translateY(0)}.to-top-wrapper{display:flex;position:fixed;right:.5rem;bottom:.5rem}@media (min-width:640px){.to-top-wrapper{bottom:1rem;right:2rem}}.to-top-wrapper a{background:hsla(0,0%,100%,.25);display:inline-block;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);opacity:.6}svg.icon{padding:.5rem;width:2rem;height:2rem}@media (min-width:640px){svg.icon{padding:.75rem;width:2.5rem;height:2.5rem}}.inner{max-width:56rem;margin-inline:auto}