@property --lines-offset{syntax:"<length>";initial-value:0;inherits:false}:root{--foreground:#f8f8f2;--orange:#fd971f;--pink:#f92672;--accent:var(--orange);--highlight:var(--pink);--fader-height:5rem;--scroll-percentage:0%;--rotation:0rad;--black:#252525;--background:var(--black)}*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box;outline:0}body,html{background-color:var(--background);color:var(--foreground);font-size:8px;height:100%;margin:0;padding:0;width:100%}main{position:relative}section{align-items:center;background-color:var(--background);display:flex;height:100%;justify-content:center;pointer-events:none;position:fixed;width:100%}section:nth-child(2n),section:nth-child(odd) .links-wrapper{--accent:var(--pink);--highlight:var(--orange)}section:nth-child(2n) .links-wrapper{--accent:var(--orange);--highlight:var(--pink)}section:nth-child(2){-webkit-clip-path:polygon(0 0,100% 0,100% min(200%,var(--scroll-percentage) - 0%),0 min(200%,var(--scroll-percentage) - 100%));clip-path:polygon(0 0,100% 0,100% min(200%,var(--scroll-percentage) - 0%),0 min(200%,var(--scroll-percentage) - 100%));will-change:clip-path}section:nth-child(3){-webkit-clip-path:polygon(0 0,100% 0,100% min(200%,var(--scroll-percentage) - 100%),0 min(200%,var(--scroll-percentage) - 200%));clip-path:polygon(0 0,100% 0,100% min(200%,var(--scroll-percentage) - 100%),0 min(200%,var(--scroll-percentage) - 200%));will-change:clip-path}section:nth-child(4){-webkit-clip-path:polygon(0 0,100% 0,100% min(200%,var(--scroll-percentage) - 200%),0 min(200%,var(--scroll-percentage) - 300%));clip-path:polygon(0 0,100% 0,100% min(200%,var(--scroll-percentage) - 200%),0 min(200%,var(--scroll-percentage) - 300%));will-change:clip-path}section:nth-child(5){-webkit-clip-path:polygon(0 0,100% 0,100% min(200%,var(--scroll-percentage) - 300%),0 min(200%,var(--scroll-percentage) - 400%));clip-path:polygon(0 0,100% 0,100% min(200%,var(--scroll-percentage) - 300%),0 min(200%,var(--scroll-percentage) - 400%));will-change:clip-path}section:nth-child(6){-webkit-clip-path:polygon(0 0,100% 0,100% min(200%,var(--scroll-percentage) - 400%),0 min(200%,var(--scroll-percentage) - 500%));clip-path:polygon(0 0,100% 0,100% min(200%,var(--scroll-percentage) - 400%),0 min(200%,var(--scroll-percentage) - 500%));will-change:clip-path}section .wrapper{max-height:70rem;min-height:70rem;margin:0 auto;max-width:100rem;padding:0 5rem;pointer-events:all;position:relative;width:100%;z-index:2}@media(min-width:768px){section .wrapper{max-height:60rem;min-height:60rem}}@media(min-width:1024px){section .wrapper{padding:0}}section .wrapper .intro{margin:0 0 4rem}@media(min-width:768px){section .wrapper .intro{margin:0 0 8rem}section .wrapper .intro p{font-size:3rem}}section canvas{left:50%;position:absolute;top:50%;transform:translate3d(-50%,-50%,0)}em{animation:background-lines 1.5s linear infinite;background-image:repeating-linear-gradient(var(--rotation),var(--accent) var(--lines-offset),var(--accent) calc(var(--lines-offset) + 3px),var(--background) calc(var(--lines-offset) + 3px),var(--background) calc(var(--lines-offset) + 4px));background-position:0 0;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:var(--accent);font-style:normal;padding:2rem 0;margin:-2rem 0}@media(min-width:768px){em{display:inline-block}}h1{font-size:6rem;line-height:1.1;margin:0 0 4rem}@media(min-width:768px){h1{font-size:9rem}}h1 br{display:inline}@media(min-width:768px){h1 br{display:inline-block}}h2{color:var(--highlight);font-size:4rem;line-height:1.1;margin:0 0 2rem}@media(min-width:768px){h2{font-size:5rem}}.intro p{font-size:3rem}p{font-size:2.5rem;line-height:1.4;margin:0 0 4rem;width:90%}a{background-image:linear-gradient(to right,var(--background) 0,var(--background) 50%,var(--foreground) 50%,var(--foreground) 100%);background-size:200%;background-position:100% 0;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:inline-block;font-size:3rem;height:6rem;padding:1rem 1.5rem;position:relative;text-decoration:none;transition:background-position .25s ease-in-out}a:before{background:var(--accent);border-radius:2rem;content:"";display:block;height:60%;left:0;position:absolute;top:50%;transform:translate3d(0,-50%,0);transition:height .1s ease,width .25s ease-in-out;width:.5rem;z-index:-1}a:hover{background-position:0 0}a:hover:before{height:100%;width:100%}.project{display:flex;flex-direction:column;margin-top:8rem}@media(min-width:768px){.project{align-items:center;flex-direction:row}}.project img{object-fit:contain;object-position:top left;max-height:12rem;min-height:12rem;max-width:30rem;min-width:30rem;margin-bottom:4rem}@media(min-width:768px){.project img{object-position:center left;max-height:20rem;min-height:20rem;max-width:20rem;min-width:20rem;margin-bottom:0}.project .text-wrapper{padding-left:6rem}}.brands-wrapper{display:flex;flex-wrap:wrap;justify-content:space-evenly}.brands-wrapper img{object-fit:contain;max-height:12rem;min-height:12rem;max-width:15rem;min-width:15rem;margin:4rem 2rem 0}.brands-wrapper img.--wide{max-width:20rem;min-width:20rem}@media(min-width:768px){.brands-wrapper img{max-height:15rem;min-height:15rem;max-width:20rem;min-width:20rem}.brands-wrapper img.--wide{max-width:25rem;min-width:25rem}}@media(min-width:1024px){.brands-wrapper img{margin-inline:5rem}}.links-wrapper{align-items:flex-start;display:flex;flex-direction:column;margin:2rem 0}.links-wrapper a{margin:1rem 0}.fader{-webkit-backdrop-filter:blur(4px) grayscale(50%);backdrop-filter:blur(4px) grayscale(50%);height:var(--fader-height);left:50%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#fff 40%,#fff 60%,transparent);mask-image:linear-gradient(180deg,transparent 0,#fff 40%,#fff 60%,transparent);pointer-events:none;position:fixed;top:calc(var(--fader-position) - 50% - var(--fader-height)/2);transform:translateX(-50%) rotate(var(--rotation));width:300vw}.fader.two{top:calc(var(--fader-position) - 100% - 50% - var(--fader-height)/2)}.spacer{height:700vh;pointer-events:none}.scroll-indicator{animation:up-and-down 2s ease-in-out infinite forwards;left:50vw;opacity:var(--scroll-indicator-opacity);pointer-events:none;position:fixed;top:90vh}.scroll-indicator:before{border-bottom:.5rem solid var(--highlight);border-radius:.25rem;border-right:.5rem solid var(--highlight);content:"";display:block;height:3rem;transform:rotate(45deg) translate3d(-100%,-50%,0);width:3rem}@keyframes up-and-down{0%,to{transform:translate3d(0,calc(-50% - 4rem),0)}50%{transform:translate3d(0,calc(-50% + 4rem),0)}}@keyframes background-lines{0%{--lines-offset:0}to{--lines-offset:4px}}