*,:after,:before{box-sizing:border-box}.slideshow-scoped-root{--color-text:#fdfbf7;--color-text-alt:#fdfbf799;--color-bg:#11100f;--color-link:#fdfbf799;--color-link-hover:#d4af37;--color-info:#fdfbf766;--color-grid:#d4af3726;--color-slide-alt:#d4af37;--color-slide-text-bg:#11100f;--color-revealer:#d4af37}html.slideshow-scoped{background:var(--color-bg)}body.slideshow-scoped{min-height:100vh;color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding-top:2rem;font-family:Inter,sans-serif;overflow:hidden}h1,h2,h3,h4,h5,h6,.codrops-header__title,.slide__title,.slide__category{font-family:Cormorant Garamond,serif;font-weight:400}.js .loader{z-index:10000;background:var(--color-bg);pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0}a{color:var(--color-link);outline:none;text-decoration:none}a:hover,a:focus{color:var(--color-link-hover);outline:none}.hidden{pointer-events:none;width:0;height:0;position:absolute;overflow:hidden}.message{z-index:100;text-align:center;color:var(--color-bg);background:var(--color-text);padding:1em;display:none;position:relative}.icon{fill:currentColor;width:1.5em;height:1.5em;margin:0 auto;display:block}main{width:100%;position:relative}.content{text-align:center}.codrops-header{z-index:100;grid-area:header;padding:0 .5rem;position:relative}.codrops-header__title{color:#d4af37;margin:0 0 .25rem;font-size:2.5em;font-style:italic;line-height:1}.info{max-width:260px;color:var(--color-info);margin:1rem auto;font-family:Cormorant Garamond,serif;font-size:1.2rem;font-style:italic;display:block}.github{text-transform:uppercase;letter-spacing:2px;grid-area:github;justify-self:start;margin:0 .25rem;font-size:.75rem;display:block}.codrops-links{text-align:center;white-space:nowrap;justify-content:center;margin:2rem auto 0 .25rem;font-size:.85rem;display:flex;position:relative}.codrops-icon{padding:.25em;display:inline-block}.slideshow{width:100%;margin-top:1rem;position:relative}.slide{pointer-events:none;width:100%;position:absolute;top:0}.slide--current{position:relative}.js .slide__img-wrap,.js .slide__title,.js .slide__subtitle,.js .slide__quote,.js .slide__side,.js .slide__number,.js .slide__explore{opacity:0;pointer-events:none}.slide--current.slide--visible .slide__img-wrap,.slide--current.slide--visible .slide__title,.slide--current.slide--visible .slide__subtitle,.slide--current.slide--visible .slide__quote,.slide--current.slide--visible .slide__number,.slide--current.slide--visible .slide__explore{opacity:1}.slide--current.slide--visible .slide__explore{pointer-events:auto}.slide__img-wrap{width:100%;height:100svh;position:relative;overflow:hidden}.slide--current{height:100svh}.slide--current .slide__title-wrap{z-index:10;pointer-events:auto;width:90%;position:absolute;bottom:3rem;left:50%;transform:translate(-50%)}.slide--current .slide__number{z-index:10;margin:0;padding:0;position:absolute;bottom:1rem;right:1rem}.slide__side,.slide--current .slide__quote{display:none}.slide--current .slide__explore{margin-top:1rem}@media screen and (width>=53em){.slide__img-wrap{height:100%;position:absolute}.slide--current{height:auto}.slide--current .slide__title-wrap{width:auto;position:static;bottom:auto;left:auto;transform:none}.slide--current .slide__number{margin:.5rem 1rem;padding:0;position:absolute;bottom:0;right:0}.slide__side,.slide--current .slide__quote{display:block}.slide--current .slide__explore{margin:2rem 0 0}}.slide--current .slide__img-wrap{cursor:default}@media screen and (width<=52.99em){.slide--left,.slide--right{display:none!important}}.slide--left,.slide--right{z-index:100}.slide--left .slide__img-wrap,.slide--right .slide__img-wrap{opacity:1;pointer-events:auto;cursor:pointer;width:25vw}.slide--right .slide__img-wrap{margin-left:auto}.slide__img{backface-visibility:hidden;pointer-events:none;background-position:50%;background-size:cover;width:100%;height:100%;position:absolute;top:0;left:0}.slide--current .slide__img:after{content:"";background:#11100f66;width:100%;height:100%;position:absolute;top:0;left:0}.slide__img-reveal{background:var(--color-revealer);pointer-events:none;z-index:10;width:100%;height:100%;position:absolute;top:0;left:0;transform:translateY(100%)}.slide__title-wrap,.slide__number{text-align:center;pointer-events:none;display:block}.slide__number{padding:1rem 0;font-family:Cormorant Garamond,serif;font-size:1.5rem;font-style:italic}.slide__explore{cursor:pointer;background:var(--color-slide-alt);color:#11100f;text-transform:uppercase;letter-spacing:2px;margin:2rem 0 0;padding:.15rem .25rem;font-size:.75rem}.slide__explore:hover{color:#11100f;background:#fff}@media screen and (width>=53em){body.slideshow-scoped{padding:0}.content{text-align:left;justify-content:center;align-items:center;min-height:100vh;margin:0 auto;display:flex;position:relative}.content--fixed{z-index:10000;pointer-events:none;grid-template:"links header github"100%/10% 80% 10%;align-content:space-between;align-items:start;width:100%;max-width:none;height:100vh;min-height:0;padding:1rem 0;display:grid;position:fixed;top:0;left:0}.content--fixed a{pointer-events:auto}.info{max-width:16rem;margin:0}.codrops-links{margin-top:0}.slideshow{grid-column-gap:15%;grid-template:"preview-left current-slide preview-right"100%/10% 50% 10%;height:100vh;margin:0;display:grid;overflow:hidden}.slide{color:var(--color-slide-alt)}.slide:after{content:"+";color:#fdfbf733;margin:.5rem;font-size:1.75rem;position:absolute;bottom:70vh;left:0}.slide--current:after{display:none}.slide--right:after{bottom:80vh;left:auto;right:0}.slide__img-wrap{height:100%;position:absolute}.slide__img{background-position:50% 0}.slide--visible .slide__img-wrap,.slide--visible .slide__title,.slide--current.slide--visible .slide__side,.slide--current.slide--visible .slide__quote{opacity:1}.slide--visible .slide__img-wrap{pointer-events:auto}.slide--current,.slide--left,.slide--right{pointer-events:auto;position:relative}.slide--current{grid-area:current-slide}.slide--left .slide__img-wrap,.slide--right .slide__img-wrap{width:100%;height:50%;position:relative;top:20%}.slide--left .slide__img-wrap{top:30%}.slide--left{border-right:1px solid var(--color-grid);grid-area:preview-left}.slide--right{border-left:1px solid var(--color-grid);grid-area:preview-right}.slide__side{white-space:nowrap;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;color:var(--color-text-alt);position:absolute;right:.25rem;transform:rotate(180deg)}.slide__category{color:#d4af37;margin:0;padding:1.5rem 0;font-size:2rem;font-weight:300;line-height:1;display:inline-block}.slide__category:before{content:"•";color:var(--color-text-alt);padding:0 0 1rem;font-size:2.5rem}.slide__number{margin:.5rem 1rem;padding:0;position:absolute;bottom:0;right:0}.slide__number:before{content:"#"}.slide--current .slide__title-wrap{flex-direction:column;align-items:flex-end;max-width:500px;display:flex;position:absolute;top:35%;right:50%}.slide--current .slide__title,.slide__subtitle{white-space:nowrap;margin:0 0 .2rem;padding:0 .5rem;font-size:5vw;font-weight:300;line-height:1;position:relative;overflow:hidden}.slide--current .slide__title{color:#fff;padding:.35rem .25rem .15rem}.slide--current .slide__title .slide__box,.slide__subtitle .slide__box{background:var(--color-slide-text-bg);width:100%;height:100%;position:absolute;top:0;left:0}.slide__title-inner,.slide__subtitle-inner{display:inline-block;position:relative}.slide--left .slide__title,.slide--right .slide__title{-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;text-align:right;color:var(--color-text);margin:1rem 0 0;font-size:1.2rem;font-weight:300;position:absolute;top:80vh;right:0;transform:rotate(180deg)}.slide--right .slide__title{top:70vh;left:0;right:auto}.slide__subtitle{color:var(--color-text-alt);font-size:2vw;line-height:1.5}.slide__quote{text-align:right;color:#fdfbf7cc;max-width:25vw;font-size:1.1rem;font-style:italic}}