:root{font-family:Sarabun,sans-serif;line-height:1.25;font-weight:300;color-scheme:light dark;color:#f5e6e8;background-color:#242124;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}*{box-sizing:border-box}body{margin:0;display:flex;min-width:100vw;min-height:100vh;overflow:hidden;flex-direction:row}.overlayer{position:relative}.overlayer .base{display:block;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.overlayer .overlay{position:absolute;width:100%;height:100%;bottom:0}.full-viewport{width:100vw;height:100vh}#first-background{opacity:0;position:absolute;background-color:#242124;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%234a454a' fill-opacity='0.2'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");transition:opacity .6s ease-in;width:400vw;height:100vh;-webkit-animation:bgScroll 2500s linear infinite;animation:bgScroll 2500s linear infinite}@-webkit-keyframes bgScroll{to{background-position:-3000rem -3000rem}}@keyframes bgScroll{to{background-position:-3000rem -3000rem}}@media screen and ((max-width: 900px) or ((max-height: 670px) and (not (orientation: portrait)))){body{flex-direction:column;overflow-y:auto}#first-background{width:100vw;height:400vh}}.scene{transition:transform .8s ease;min-width:100vw;min-height:100vh;display:flex;position:relative;font-size:5.5rem}.scene>section{padding:5vw;display:flex;flex-direction:column}.scene>section>.title{display:flex;overflow:hidden}.scene>section>.title aside{opacity:.5;cursor:pointer;text-align:center;margin-left:auto;padding-left:2rem;font-size:2.5rem;display:flex;justify-content:center;align-items:center}.scene>section>.title aside svg{height:5rem;width:5rem;margin-left:1.5rem}.scene>section>.title>span{font-family:Archivo Black,sans-serif;text-transform:uppercase;border:.25rem solid #F5E6E8;padding-left:1rem;padding-right:1rem}.scene>section>.description{display:flex;margin-top:2rem}.scene>section>.description span{font-weight:100;font-size:2rem}.scene .large-projects{display:grid;grid-template-columns:repeat(3,1fr);max-width:100%;margin-top:auto;margin-bottom:auto}.scene .large-projects .project{display:flex;flex-direction:column;justify-content:center;margin-top:6rem;text-align:center;font-size:2rem;color:#242124;background-color:#a9b4db;border-radius:1.8rem 1.8rem 1rem 1rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-shadow:0 13px 20px -12px #000000bf}.scene .large-projects .project .cover{display:flex;position:relative;margin-bottom:auto}.scene .large-projects .project .cover>div{position:absolute;width:100%;height:auto;justify-content:center;padding-top:1rem;overflow-y:hidden;display:flex}.scene .large-projects .project .cover>div span{background-color:#f5e6e8bf;border-radius:50rem;padding:.25rem .75rem .5rem;font-size:1.25rem;transform:translateY(-150%);transition-duration:.2s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.scene .large-projects .project .cover>div span:not(:first-child){margin-left:.5rem}.scene .large-projects .project .cover img{width:100%;height:19rem;-o-object-fit:cover;object-fit:cover;border-top-right-radius:1rem;border-top-left-radius:1rem}.scene .large-projects .project>span{padding:.75rem 1.5rem 1rem;height:100%;font-weight:700;font-size:1.5rem;display:flex;justify-content:center;align-items:center;text-overflow:ellipsis}.scene .large-projects .project:hover .cover>div span{transform:translateY(0)}.scene .large-projects .project:not(:first-child){margin-left:1rem}.scene-left-border{color:#242124;background-color:#a9b4db;height:100%;display:flex;justify-content:center;align-items:center}.scene-left-border span{text-transform:uppercase;-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr;font-family:Archivo Black,sans-serif;font-size:3rem;transform:rotate(180deg)}@media screen and ((max-height: 840px) or (max-width: 1400px)){.scene{font-size:4rem}.scene-left-border span{font-size:2.5rem}.scene .large-projects .project .cover img{height:15rem}}@media screen and ((max-width: 900px) or ((max-height: 670px) and (not (orientation: portrait)))){.scene>section .large-projects{grid-template-columns:1fr}.scene{min-height:100vh;display:flex}.scene .large-projects .project{margin-top:2rem;width:100%;font-size:1rem}.scene .large-projects .project>span{font-size:1.25rem}.scene .large-projects .project:not(:first-child){margin-left:0}.scene section>.title aside{display:none}.scene-left-border{height:auto}}@media screen and ((max-width: 550px)){.scene{flex-direction:column;font-size:3.25rem}.scene>section>.description span{font-size:1.75rem}.scene>section{justify-content:center;text-align:center}.scene>section>.title{width:100%}.scene>section>.title span{width:100%}.scene-left-border span{transform:rotate(0);-webkit-writing-mode:initial;-ms-writing-mode:initial;writing-mode:initial;margin-top:.5rem;margin-bottom:.5rem;font-size:2rem}}@media screen and ((max-width: 400px)){.scene{flex-direction:column;font-size:3rem}.scene>section>.description span{font-size:1.5rem}.scene-left-border span{transform:rotate(0);-webkit-writing-mode:initial;-ms-writing-mode:initial;writing-mode:initial;margin-top:.5rem;margin-bottom:.5rem;font-size:1.75rem}}@media screen and (max-width: 450px){.scene>section>.title span{font-size:2.5rem}}main.s1{padding:5vw;font-size:5.5rem;font-weight:100;display:flex;flex-direction:column;cursor:pointer}.s1 .faded-in-text div{overflow:clip}.s1 .faded-in-text .firstbober{font-family:Archivo Black,sans-serif;background:linear-gradient(150deg,#e26d5a 34%,#8590c5 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transform:translateY(-100%);transition:transform 1.7s ease;transition-delay:1.3s}.s1 .faded-in-text .firstbober:after{content:"";position:absolute;overflow:visible;width:100%;transform:scaleX(0);height:.25vw;bottom:0;left:0;background:linear-gradient(319deg,rgba(226,109,90,1) 34%,rgba(152,162,215,1) 100%);transform-origin:bottom right;transition:transform 1.5s ease-out}.s1 .faded-in-text div span{display:inline-block;transform:translateY(-120%);transition:transform .7s ease-out}.s1 .faded-in-text .b{transition-delay:.1s}.s1 .faded-in-text .c{transition-delay:.3s}.s1 .faded-in-text .d{transition-delay:.8s;transition-duration:.9s}.s1.isvis .faded-in-text div span{transform:translateY(0)!important}.s1.isvis .faded-in-text .firstbober{transform:translateY(0)}.s1.isvis .faded-in-text .firstbober:after{transform:scaleX(1);transform-origin:bottom left;transition-delay:2.7s}.s1 .wrapped-text{display:flex;flex-direction:column;width:100%;height:100%;font-family:Archivo Black,sans-serif;overflow:hidden;padding-top:5vw;padding-bottom:5vw}.s1 .wrapped-text>div{width:100%;height:50%;display:flex;justify-content:center;align-items:center;font-size:22rem;position:relative}.s1 .wrapped-text>div:first-child{align-items:end}.s1 .wrapped-text>div:last-child{align-items:start}.s1 .wrapped-text>div>span,.s1 .wrapped-text>div:last-child>div svg{opacity:0;transition-delay:1.3s;transition-duration:2s;text-transform:uppercase}.s1.nodelay .wrapped-text>div>span{transition-delay:0ms;transition-duration:1s}.s1.isvis .wrapped-text>div>span{opacity:.1}.s1.isvis .wrapped-text>div:first-child>span{transform:translate(35%)}.s1 .wrapped-text>div:first-child>span{align-items:end;transform:translate(45%)}.s1.isvis .wrapped-text>div:last-child>span{transform:translate(-42%)}.s1 .wrapped-text>div:last-child>span{align-items:start;transform:translate(-52%)}.s1 .wrapped-text>div:last-child>div{position:absolute;width:100%;display:flex}.s1.isvis .wrapped-text>div:last-child>div svg{opacity:.5}.s1 .wrapped-text>div:last-child>div svg{width:10vw;margin-right:5vw;-webkit-filter:invert(1);filter:invert(1);opacity:0;transition-delay:2.2s;-webkit-animation:wobbleX 2s ease infinite;animation:wobbleX 2s ease infinite}.s1.isvis .wrapped-text>div:last-child>div>span{opacity:.5}.s1 .wrapped-text>div:last-child>div span:before{content:"SCROLL OR CLICK"}.s1 .wrapped-text>div:last-child>div>span{font-size:2rem;margin-left:auto;margin-top:auto;margin-bottom:auto;margin-right:2rem;font-family:Sarabun,sans-serif;font-weight:100;opacity:0;transition-delay:2.6s;transition-duration:2s}@-webkit-keyframes wobbleX{0%{transform:translate(0)}50%{transform:translate(10%)}to{transform:translate(0)}}@keyframes wobbleX{0%{transform:translate(0)}50%{transform:translate(10%)}to{transform:translate(0)}}@-webkit-keyframes wobbleRot{0%{transform:rotate(90deg) translate(0)}50%{transform:rotate(90deg) translate(10%)}to{transform:rotate(90deg) translate(0)}}@keyframes wobbleRot{0%{transform:rotate(90deg) translate(0)}50%{transform:rotate(90deg) translate(10%)}to{transform:rotate(90deg) translate(0)}}@media screen and (min-width: 1800px){.s1 .wrapped-text>div{font-size:22vw}.s1 .wrapped-text>div:last-child>div>span{font-size:2vw}}main.s1 .socials{margin-top:auto;display:flex;cursor:auto}main.s1 .socials>div{display:flex;flex-direction:column;position:relative;transform:translateY(100%);transition-delay:.9s;transition-duration:1.8s}.s1.isvis .socials>div{transform:translateY(0)}main.s1 .socials>div:not(:first-child){margin-left:1rem}main.s1 .socials>div span{-webkit-writing-mode:vertical-rl;-ms-writing-mode:tb-rl;writing-mode:vertical-rl;font-size:1.5rem;margin-top:auto;text-align:center;font-weight:100;margin-left:.35rem;transform:translateY(150%);transition-duration:.3s;transition-timing-function:ease}main.s1 .socials>div:hover span{transform:translateY(0)}main.s1 .socials>div>div{display:flex;justify-content:center;align-items:center;flex:1;margin-bottom:1rem;overflow:hidden}main.s1 .socials>div>a{display:flex;justify-content:center;align-items:center}main.s1 .socials>div>a>img{height:4rem;width:auto;-webkit-filter:invert(.5);filter:invert(.5)}main.s1 .socials>div:first-child>a>img{height:4.2rem}@media screen and ((max-height: 840px) or (max-width: 1400px)){main.s1{font-size:4rem}}@media screen and ((max-width: 900px) or ((max-height: 670px) and (not (orientation: portrait)))){.s1 .wrapped-text>div:last-child>div svg{transform:rotate(90deg);-webkit-animation:none;animation:none;-webkit-animation:wobbleRot 2s ease infinite;animation:wobbleRot 2s ease infinite}.s1 .faded-in-text .firstbober:after{height:.25rem}.s1 .wrapped-text>div:last-child>div span:before{content:"DRAG"}}@media screen and (max-width: 600px){.s1 .faded-in-text .d{transform:translateY(-220%);transition-duration:1.5s}}@media screen and (max-width: 550px){main.s1{padding-top:4rem;padding-bottom:4rem;text-align:center}.s1 .wrapped-text>div:last-child>div{display:flex;flex-direction:column;justify-content:center;align-items:center}.s1 .wrapped-text>div:last-child>div span{margin-left:auto;margin-right:auto;margin-bottom:1rem}.s1 .wrapped-text>div:last-child>div svg{width:6rem;margin-left:auto;margin-right:auto}.s1 .faded-in-text .c{transform:translateY(-220%);transition-delay:.6s;transition-duration:.9s}.s1 .faded-in-text .d{transform:translateY(-220%);transition-delay:.9s;transition-duration:1s}}@media screen and (max-width: 450px){main.s1{font-size:3rem}main.s1 .socials>div>a>img{height:2.9rem}main.s1 .socials>div:first-child>a>img{height:3rem}.s1 .wrapped-text>div:last-child>div>span{font-size:1.8rem}main.s1 .socials{height:min-content}main.s1 .socials>div span{font-size:1rem}.s1 .wrapped-text>div:last-child>div svg{height:4rem}}@media screen and (max-height: 670px){main.s1{padding:2rem}}.s2{background-color:#e2e6f3;color:#242124}.s2 .scene-left-border{background-color:#201d20;color:#e2e6f3}.s2>section>.title span{border-color:#242124}.s3 section>.description{margin-bottom:2rem}.s3 section .small-projects{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:auto;margin-bottom:auto}.s3 section .small-projects a{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:column;align-items:center;text-decoration:none;flex-grow:1;font-size:2rem;background:#D4DAED;color:#242124;padding:1rem 1.5rem 1.25rem;border-radius:.25rem;transition:transform .1s;box-shadow:0 13px 20px -12px #000000bf}.s3 section .small-projects a span:first-child{font-weight:700;margin-bottom:.5rem}.s3 section .small-projects a span:last-child{font-size:1.25rem}.s3 section .small-projects a:hover{background:linear-gradient(150deg,#EA9386 34%,rgb(133,144,197) 100%);transform:translateY(-10%)}.s3 section>.title aside svg{filter:invert(1)}@media screen and ((max-height: 840px) or (max-width: 1400px)){.s3 section .small-projects{gap:.75rem}.s3 section .small-projects a{padding:.75rem 1.25rem 1rem;font-size:1.5rem}.s3 section .small-projects a span:last-child{font-size:1rem}}.s4{background-color:#e2e6f3;color:#242124}.s4 .scene-left-border{background-color:#201d20;color:#e2e6f3}.s4 .socials{display:flex;font-size:min(2vw,1.5rem);justify-content:space-between;align-items:center;margin-top:auto;gap:1rem}.s4 .socials>div{display:flex;flex-direction:column-reverse;align-items:center}.s4 .socials>div img{width:min(8vw,8rem);height:min(8vw,8rem);filter:contrast(.75)}.s4 section{height:100vh}.s4>section>.title{background:linear-gradient(150deg,rgb(226,109,90) 34%,rgb(133,144,197) 100%);position:relative;display:flex;width:-webkit-min-content;width:-moz-min-content;width:min-content;align-items:center;padding:.25rem}.s4>section>.title span{border:none;background-color:#e2e6f3}.s4>section>.description{font-size:3rem;line-height:4.25rem;margin-top:3rem;font-weight:100}@media screen and ((max-height: 840px) or (max-width: 1400px)){.s4>section>.description{font-size:2.25rem;line-height:3.5rem}}@media screen and ((max-width: 900px) or ((max-height: 670px) and (not (orientation: portrait)))){.s4>section>.title{width:100%}.s4>section>.title span{width:100%}.s4>section>.description{font-size:1.75rem;line-height:2.75rem}.s4>section .socials{display:flex;flex-direction:column;margin-bottom:auto;margin-top:auto;font-size:min(4vw,1.6rem)}.s4>section .socials>div{flex-direction:row-reverse;justify-content:space-between;width:100%;text-align:left}.s4>section .socials>div img{width:min(16vw,5rem);height:min(16vw,5rem);filter:contrast(.75)}}@media screen and (max-width: 550px){.s4>section>.description{line-height:2.5rem;text-align:left}}@media screen and (max-width: 450px){.s4>section>.description{margin-top:1.5rem}}