.i-col100{width:100%}@media(max-width:430px){.i-col100{width:100%}}.i-col90{width:90%}@media(max-width:430px){.i-col90{width:100%}}.i-col80{width:80%}@media(max-width:430px){.i-col80{width:100%}}.i-col70{width:70%}@media(max-width:430px){.i-col70{width:100%}}.i-col60{width:60%}@media(max-width:430px){.i-col60{width:100%}}.i-col50{width:50%}@media(max-width:430px){.i-col50{width:100%}}.i-col40{width:40%}@media(max-width:430px){.i-col40{width:100%}}.i-col30{width:30%}@media(max-width:430px){.i-col30{width:100%}}.i-col25{width:25%}@media(max-width:430px){.i-col25{width:100%}}.i-col20{width:20%}@media(max-width:430px){.i-col20{width:100%}}.i-col10{width:10%}@media(max-width:430px){.i-col10{width:100%}}.i-fl{float:left}.i-fr{float:right}.i-container{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:center;margin:auto;padding-top:25vh}@media(max-width:940px){.i-container{padding-top:0}}.i-container-aboutpage{display:flex;padding-top:25vh}@media(max-width:940px){.i-container-aboutpage{padding-top:0}.i-container-aboutpage.hide-mobile{display:none}}.i-container-aboutpage.projects-page{padding-top:20vh;margin-bottom:15vh}@media(max-width:430px){.i-container-aboutpage{display:block;padding:0 25px 55px}}.i-clr{clear:both}.i-pd-top-10{padding-top:10%}.main{max-width:1025px;max-height:100vh;height:100vh;width:100%;display:flex;justify-content:space-between;align-items:center;margin:auto}@media(max-width:430px){.main.about,.main.experience,.main.projects{padding-top:20%;padding-bottom:20%;max-width:100%;max-height:100%;height:auto;width:100%}}.description{display:inherit;justify-content:inherit;align-items:inherit;font-size:.85rem;max-width:var(--max-width);width:100%;z-index:2;font-family:var(--font-mono)}.description a{display:flex;justify-content:center;align-items:center;gap:.5rem}.description p{position:relative;margin:0;padding:1rem;background-color:rgba(var(--callout-rgb),.5);border:1px solid rgba(var(--callout-border-rgb),.3);border-radius:var(--border-radius)}.code{font-weight:700;font-family:var(--font-mono)}.grid{display:grid;grid-template-columns:repeat(4,minmax(25%,auto));max-width:100%;width:var(--max-width)}.card{padding:1rem 1.2rem;border-radius:var(--border-radius);background:rgba(var(--card-rgb),0);border:1px solid rgba(var(--card-border-rgb),0);transition:background .2s,border .2s}.card span{display:inline-block;transition:transform .2s}.card h2{font-weight:600;margin-bottom:.7rem}.card p{margin:0;opacity:.6;font-size:.9rem;line-height:1.5;max-width:30ch;text-wrap:balance}.center{display:flex;justify-content:center;align-items:center;position:relative;padding:4rem 0}.center:before{background:var(--secondary-glow);border-radius:50%;width:480px;height:360px;margin-left:-400px}.center:after{background:var(--primary-glow);width:240px;height:180px;z-index:-1}.center:after,.center:before{content:"";left:50%;position:absolute;filter:blur(45px);transform:translateZ(0)}.logo{position:relative}@media(hover:hover)and (pointer:fine){.card:hover{background:rgba(var(--card-rgb),.1);border:1px solid rgba(var(--card-border-rgb),.15)}.card:hover span{transform:translateX(4px)}}@media(prefers-reduced-motion){.card:hover span{transform:none}}@media(max-width:700px){.content{padding:4rem}.grid{grid-template-columns:1fr;margin-bottom:120px;max-width:320px;text-align:center}.card{padding:1rem 2.5rem}.card h2{margin-bottom:.5rem}.center{padding:8rem 0 6rem}.center:before{transform:none;height:300px}.description{font-size:.8rem}.description a{padding:1rem}.description div,.description p{display:flex;justify-content:center;position:fixed;width:100%}.description p{align-items:center;inset:0 0 auto;padding:2rem 1rem 1.4rem;border-radius:0;border:none;border-bottom:1px solid rgba(var(--callout-border-rgb),.25);background:linear-gradient(to bottom,rgba(var(--background-start-rgb),1),rgba(var(--callout-rgb),.5));background-clip:padding-box;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.description div{align-items:flex-end;pointer-events:none;inset:auto 0 0;padding:2rem;height:200px;background:linear-gradient(to bottom,transparent 0,rgb(var(--background-end-rgb)) 40%);z-index:1}}@media(min-width:701px)and (max-width:1120px){.grid{grid-template-columns:repeat(2,50%)}}@media(prefers-color-scheme:dark){.vercelLogo{filter:invert(1)}.logo{filter:invert(1) drop-shadow(0 0 .3rem rgba(255,255,255,.4392156863))}}@keyframes rotate{0%{transform:rotate(1turn)}to{transform:rotate(0deg)}}.navigation{font-family:Apercu Light;font-style:normal;position:fixed;top:0;left:50%;transform:translate(-50%,-50%);width:100%;z-index:10;background-color:#111827}.navigation.desktop{display:block}@media(max-width:940px){.navigation.desktop{display:none}}.navigation.mobile{display:none}.navigation.mobile .nav{margin-top:0}@media(max-width:940px){.navigation.mobile{display:block}}@media(max-width:430px){.navigation{top:auto;z-index:0;background-color:#111827;bottom:0;padding:1rem;transform:translate(-50%)}}.nav{background-color:transparent;display:flex;justify-content:center;align-items:center;margin-top:60px}.nav,.nav a{color:#94a3b8}.nav a{padding:5px 1rem;font-size:16px;display:inline-block;line-height:1.2}.nav a.active{color:#f1f8cf;font-weight:bolder}.nav a.active svg{fill:#f1f8cf}.nav a svg{fill:#94a3b8}.nav-container{width:auto;padding:0;display:flex;justify-content:space-between;align-items:center;height:68px}.nav-icon>div:only-child{display:flex;flex-direction:column;justify-content:center;align-items:center}.social-navigation{width:40px;position:fixed;bottom:0;left:40px;right:auto;z-index:10;color:#94a3b8}@media(max-width:430px){.social-navigation{display:none}}.social-navigation ul{display:flex;flex-direction:column;align-items:center;margin:0;padding:0;list-style:none}.social-navigation ul li{padding:10px}.social-navigation ul li svg{width:20px;height:20px}.social-navigation ul li svg.feather{fill:none}.social-navigation ul:after{content:"";display:block;width:1px;height:90px;margin:0 auto;background-color:#94a3b8}@font-face{font-family:Apercu Light;src:url(/_next/static/media/Apercu\ Light.6de0c68f.otf)}@font-face{font-family:Apercu Regular;src:url(/_next/static/media/Apercu_Regular.cf63cb9f.otf)}@font-face{font-family:Apercu Medium;src:url(/_next/static/media/Apercu\ Medium.6545cfb8.otf)}@font-face{font-family:Apercu Bold;src:url(/_next/static/media/Apercu\ Bold.ef649a15.otf)}@font-face{font-family:Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;src:url()}.flexi-header{position:-webkit-sticky;position:sticky;display:flex;flex-flow:column;justify-content:center;top:0}.header{font-family:Apercu Light;font-style:normal}.header h1{font-size:4.5rem;background:linear-gradient(90deg,#ffec3f,#fff 35%,red);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gradient 3s linear infinite}.header-number-one{font-size:1.5rem;color:#f1f8cf}.header-title{font-size:2.5rem;color:#94a3b8;margin-bottom:0}.header-title-one{font-family:Apercu Bold;font-style:normal;font-weight:800;color:#ccd6f6}.header-title-about{font-size:26px;color:#94a3b8;margin-bottom:2rem}.header-title-experience{font-size:26px;color:#94a3b8;margin-bottom:3rem}.header .side-nav{font-family:Apercu Regular;font-style:normal;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;display:flex;flex-flow:column wrap;justify-content:flex-start;width:50%;margin-top:1rem}@media(max-width:430px){.header .side-nav{margin-bottom:1rem}}.header .side-nav.projects-nav{width:auto}.header .side-nav div{display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center;padding-top:.75rem;padding-bottom:.75rem;cursor:pointer}.header .side-nav div:hover span.line{width:4rem;background-color:#e2e8f0}.header .side-nav div:hover span.text{color:#e2e8f0}.header .side-nav div.active>span.line{width:4rem;height:1px;background-color:#e2e8f0}.header .side-nav div.active>span.text{padding-left:1rem;color:#e2e8f0}.header .side-nav div>span.line{width:2rem;height:1px;background-color:#64748b}.header .side-nav div>span.line.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.header .side-nav div>span.text{padding-left:1rem;color:#64748b}.header .side-nav div>span.text:hover{color:#94a3b8}.greetings{font-size:1.5rem;color:#f1f8cf;margin-bottom:0;margin-top:5%}@media(max-width:360px){.greetings{font-size:1rem;margin-bottom:1rem;margin-top:0}}.experience-container{display:flex;flex-flow:row wrap;padding:100px;align-self:center}@media(max-width:430px){.experience-container{padding:0}}.content{font-size:1rem;color:#94a3b8;line-height:1.5;margin-bottom:3rem}.content .pangalan,.content .trabaho{font-family:Apercu Bold;font-style:normal;font-weight:800;font-size:66px}@media(max-width:430px){.content .pangalan,.content .trabaho{font-size:clamp(30px,8vw,70px);line-height:1.1}}.content .pangalan{color:#ccd6f6}.content .trabaho{margin-top:-1rem;margin-bottom:2rem}@media(max-width:430px){.content .trabaho{margin-top:.5rem}}.content .brief-background{font-size:2rem}@media(max-width:430px){.content .brief-background{font-size:16px}}.content .mobile-enquiry{display:none}@media(max-width:430px){.content .mobile-enquiry{display:block;margin-top:3rem;color:#f1f8cf;border:1px solid #f1f8cf;padding:1rem;border-radius:5px;width:125px}.content{padding:0 25px 25px;margin-bottom:0}}.content-experience{display:flex;flex-flow:row wrap;justify-content:space-between}@media(max-width:430px){.content-experience{display:block}}.content-experience .experience-tab-side{font-family:Apercu Light;font-style:normal;color:#ccd6f6;font-size:14px;width:25%;display:flex;flex-flow:column;justify-content:flex-start;height:145px}.content-experience .experience-tab-side::-webkit-scrollbar{width:12px;height:8px}.content-experience .experience-tab-side::-webkit-scrollbar-thumb{background:rgba(204,214,246,.5);border-radius:10px;padding-top:5px}@media(max-width:430px){.content-experience .experience-tab-side{flex-flow:nowrap;justify-content:flex-start;width:350px;height:auto;padding-bottom:5px;margin-bottom:30px;overflow-x:auto}}.content-experience .experience-tab-side-item{padding:1rem;border-left:solid rgba(148,163,184,.5);border-width:2px}@media(max-width:430px){.content-experience .experience-tab-side-item{border-left:0;border-bottom:1px solid rgba(148,163,184,.5);min-width:107px}}.content-experience .experience-tab-side-item:hover{cursor:pointer;background-color:rgba(148,163,184,.5);transition:all .5s}.content-experience .experience-tab-side-item.active{border-left:solid #f1f8cf;border-width:2px}@media(max-width:430px){.content-experience .experience-tab-side-item.active{border-left:0;border-bottom:solid #94a3b8;border-width:2px}}.content-experience .experience-tab-content{width:75%}@media(max-width:430px){.content-experience .experience-tab-content{width:90%}}.content-experience #experience .experience-item{display:none;flex-flow:row wrap;justify-content:center;margin-bottom:4rem;transition:all .5s}.content-experience #experience .experience-item.active{display:flex;transition:all .5s;animation:fadeIn 1s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.content-experience #experience .experience-year{font-family:Apercu Medium;font-style:normal;width:25%;color:rgba(148,163,184,.5);letter-spacing:.025em;font-size:.75rem;line-height:1rem;margin-top:2px;margin-bottom:1rem}@media(max-width:430px){.content-experience #experience .experience-year{width:100%}}.content-experience #experience .experience-year span{vertical-align:middle}.content-experience #experience .experience-year span.dash{width:.6rem;height:1px;background-color:rgba(148,163,184,.5);display:inline-block;align-items:center;vertical-align:middle;margin-left:5px;margin-right:5px}.content-experience #experience .experience-company{width:75%}@media(max-width:430px){.content-experience #experience .experience-company{width:100%}}.content-experience #experience .experience-company h3{font-family:Apercu Light;font-style:normal;color:#ccd6f6;font-size:16px;line-height:1.375;padding-top:.75rem}.content-experience #experience .experience-company .visit svg{width:18px;padding-left:3px;vertical-align:bottom}.content-experience #experience .experience-company .experience-summary{font-family:Apercu Light;font-style:normal;font-size:14px;color:rgba(148,163,184,.5);line-height:1.5;margin-bottom:1rem}.content-experience #experience .experience-company .experience-summary ul{list-style-type:none}.content-experience #experience .experience-company .experience-summary ul li{line-height:1.5;position:relative;padding-left:30px;margin-bottom:10px}.content-experience #experience .experience-company .experience-summary ul li:before{content:"▹";position:absolute;left:0;color:#f1f8cf}.content-experience #experience .experience-techstack{font-family:Apercu Light;font-style:normal;display:flex;flex-flow:row wrap;justify-content:flex-start;margin-top:1rem}.content-experience #experience .experience-techstack .techstack-item{width:auto;margin-right:1rem;font-size:12px;padding:5px 10px;background-color:hsla(70,75%,89%,.4);color:#f1f8cf;border-radius:15px;margin-bottom:.8rem}.content-page{font-family:Apercu Light;font-style:normal;font-size:1rem;color:#94a3b8}.content-page .about-techstack ul{list-style-type:none}.content-page .about-techstack ul li{line-height:1.5;position:relative;padding-left:30px;margin-bottom:10px}.content-page .about-techstack ul li:before{content:"▹";position:absolute;left:0;color:#f1f8cf}.content-page.project-page{max-height:70vh;height:70vh;overflow:auto;padding-right:15px}@media(max-width:430px){.content-page.project-page{display:block;padding-right:15px}}.content-page.project-page::-webkit-scrollbar{width:12px}.content-page.project-page::-webkit-scrollbar-thumb{background:rgba(148,163,184,.5);border-radius:10px}.content-page #other-projects{display:flex;flex-flow:row wrap;justify-content:flex-start;padding-left:5%}.content-page #other-projects .featured-projects-container{display:flex;flex-flow:row wrap;justify-content:flex-start;margin-bottom:5rem;padding:1rem}@media(max-width:430px){.content-page #other-projects .featured-projects-container{margin-left:0;padding:0}}.content-page #other-projects .featured-projects-container:hover{background-color:rgba(176,191,241,.1);border-radius:5px;border:1px solid rgba(176,191,241,.1)}.content-page #other-projects .featured-projects-image{width:50%}@media(max-width:430px){.content-page #other-projects .featured-projects-image{margin-top:1rem;width:100%}}.content-page #other-projects .featured-projects-image img{width:100%!important;height:auto!important}.content-page #other-projects .featured-projects-description{width:50%;padding-right:5%}@media(max-width:430px){.content-page #other-projects .featured-projects-description{margin-top:1rem;width:100%;padding-left:0}}.content-page #other-projects .featured-projects-description .title{font-family:Apercu Medium;font-style:normal;font-size:20px;margin-bottom:3rem}.content-page #other-projects .featured-projects-description p{font-size:.85rem;line-height:1.3;margin-top:2rem}.content-page #other-projects .featured-projects-stack{display:flex;flex-flow:row wrap;justify-content:flex-start}.content-page #other-projects .featured-projects-stack .other-projects-item{width:auto;font-size:.75rem;margin-right:7px;margin-bottom:5px;border:1px solid hsla(70,75%,89%,.4);color:hsla(70,75%,89%,.4);padding:3px 10px;border-radius:5px;line-height:1.6}@media(max-width:430px){.content-page #other-projects .featured-projects-stack{margin-top:2rem}.content-page #other-projects{padding-left:0}}.content-page #other-projects .other-projects-container{margin-bottom:3rem}.content-page #other-projects .other-projects-description,.content-page #other-projects .other-projects-header{width:100%}.content-page #other-projects .other-projects-description ul,.content-page #other-projects .other-projects-header ul{list-style-type:none}.content-page #other-projects .other-projects-header{font-family:Apercu Medium;font-style:normal;font-size:1.25rem;margin-bottom:1rem}.content-page #other-projects .other-projects-description{font-family:Apercu Light;font-style:normal;font-size:.9rem;margin-bottom:1rem;line-height:1.5}.content-page #other-projects .other-projects-stack{display:flex;flex-flow:row wrap;justify-content:flex-start}.content-page #other-projects .other-projects-stack .other-projects-item{width:auto;font-size:.75rem;margin-right:15px;border:1px solid hsla(70,75%,89%,.4);color:hsla(70,75%,89%,.4);padding:3px 10px;border-radius:5px;line-height:1.6}@media(max-width:430px){.content-page #other-projects .other-projects-stack .other-projects-item{margin-bottom:10px}.content-page #featured-projects{padding-top:1rem}}.content-page #featured-projects .featured-projects-container{display:flex;flex-flow:row wrap;justify-content:flex-start;margin-bottom:5rem;margin-left:5%;padding:1rem}@media(max-width:430px){.content-page #featured-projects .featured-projects-container{margin-left:0;padding:0}}.content-page #featured-projects .featured-projects-container:hover{background-color:rgba(176,191,241,.1);border-radius:5px;border:1px solid rgba(176,191,241,.1)}.content-page #featured-projects .featured-projects-image{width:50%}@media(max-width:430px){.content-page #featured-projects .featured-projects-image{margin-top:1rem;width:100%}}.content-page #featured-projects .featured-projects-image img{width:100%!important;height:auto!important}.content-page #featured-projects .featured-projects-description{width:50%;padding-left:5%}@media(max-width:430px){.content-page #featured-projects .featured-projects-description{margin-top:1rem;width:100%;padding-left:0}}.content-page #featured-projects .featured-projects-description .title{font-family:Apercu Medium;font-style:normal;font-size:20px;margin-bottom:3rem}.content-page #featured-projects .featured-projects-description p{font-size:.85rem;line-height:1.3;margin-top:2rem}.content-page #featured-projects .featured-projects-stack{display:flex;flex-flow:row wrap;justify-content:flex-start}.content-page #featured-projects .featured-projects-stack .other-projects-item{width:auto;font-size:.75rem;margin-right:7px;margin-bottom:5px;border:1px solid hsla(70,75%,89%,.4);color:hsla(70,75%,89%,.4);padding:3px 10px;border-radius:5px;line-height:1.6}.content-page p{line-height:1.5;margin-bottom:25px}.content .bold{font-family:Apercu Medium;font-style:normal;color:#f1f8cf}.get-in-touch{font-size:1.5rem;color:#94a3b8;line-height:1.5}@media(max-width:430px){.get-in-touch{display:none}}.get-in-touch .email-add{color:#f1f8cf;text-decoration:underline}.get-in-touch .social-profile{display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:flex-start;margin-top:1rem}.get-in-touch .social-profile a{font-size:2rem;margin-right:1.5rem;color:#f1f8cf}.get-in-touch .social-profile a svg{width:1em;height:1em}.phFlag{display:inline-block;width:50px}.phFlag .st0{fill:#fcd116}.phFlag .st1{fill:none;stroke:#ccc;stroke-width:.4799;stroke-miterlimit:22.9256}.phFlag .st2{fill:#fff}.phFlag .st3{fill:#ce1126}.phFlag .st4{fill:#0038a8}.ianimage-container{position:relative;text-align:center;max-width:500px;padding-left:3rem}@media(max-width:430px){.ianimage-container{max-width:300px;padding-left:0}}.ianimage-container .ianimage-outer-wrapper{box-shadow:0 10px 30px -15px rgba(2,12,27,.7);transition:all .25s cubic-bezier(.645,.045,.355,1);display:block;position:relative;width:100%;border-radius:4px;background-color:#f1f8cf}.ianimage-container .ianimage-outer-wrapper:after{border:2px solid #f1f8cf;top:14px;left:14px;z-index:-1;content:"";display:block;position:absolute;width:100%;height:100%;border-radius:4px;transition:all .25s cubic-bezier(.645,.045,.355,1)}.ianimage-container .ianimage-outer-wrapper:before{top:0;left:0;background-color:#111827;mix-blend-mode:screen}.ianimage-container .ianimage-outer-wrapper .ianimage-inner-wrapper{position:relative;border-radius:4px;mix-blend-mode:multiply;filter:grayscale(100%) contrast(1);transition:all .25s cubic-bezier(.645,.045,.355,1);max-width:100%;text-align:center}.ianimage-container .ianimage-outer-wrapper .ianimage-inner-wrapper img{display:block;position:static;bottom:0;height:100%;left:0;margin:0;max-width:none;padding:0;right:0;top:0;width:100%;object-fit:cover;border-radius:4px}.ianimage-container:hover{cursor:pointer}.ianimage-container:hover .ianimage-outer-wrapper:after{top:20px;left:20px}.ianimage-container:hover .ianimage-inner-wrapper{mix-blend-mode:normal;filter:none}.ianimage-container img{width:75%;height:auto}