@font-face{font-family:"Avenir Next";src:url("fonts/AvenirNextRegular.otf") format("opentype");font-weight:normal;font-style:normal}@font-face{font-family:"Avenir Next";src:url("fonts/AvenirNext-Medium.ttf") format("truetype");font-weight:500;font-style:normal}@font-face{font-family:"Bakso Sapi";src:url("fonts/BaksoSapiScript.otf") format("opentype");font-weight:normal;font-style:normal}html{scroll-behavior:smooth}body{font-family:"Avenir Next";font-weight:normal;background-color:#f7f9fa;transition:all .3s ease-in-out}body *{box-sizing:border-box}body.text-light *{color:#f7f9fa !important}body.text-light .more img{filter:brightness(0) saturate(100%) invert(92%) sepia(3%) saturate(1249%) hue-rotate(197deg) brightness(108%) contrast(95%)}body.text-light .menu-btn span{background-color:#f7f9fa}body.text-light .menu ul li a{color:#455a63 !important}body.text-light .menu ul li a span{color:#455a63 !important}body.text-light .on .menu-btn span{background-color:#455a63 !important}body.text-light footer>.container p:first-child:after{filter:brightness(0) saturate(100%) invert(92%) sepia(3%) saturate(1249%) hue-rotate(197deg) brightness(108%) contrast(95%)}body.text-light footer>.container>div.socialmedia a span.behance{filter:brightness(0) saturate(100%) invert(92%) sepia(3%) saturate(1249%) hue-rotate(197deg) brightness(108%) contrast(95%)}body.text-light footer>.container>div.socialmedia a span.linkedin{filter:brightness(0) saturate(100%) invert(92%) sepia(3%) saturate(1249%) hue-rotate(197deg) brightness(108%) contrast(95%)}body.text-light footer>.container>div.socialmedia a span.dribbble{filter:brightness(0) saturate(100%) invert(92%) sepia(3%) saturate(1249%) hue-rotate(197deg) brightness(108%) contrast(95%)}body.text-light footer>.container>div.socialmedia:hover a{opacity:.3}body.text-light footer>.container>div.socialmedia:hover a:hover{opacity:1}body.text-light .scroll__ico span{filter:brightness(0) saturate(100%) invert(92%) sepia(3%) saturate(1249%) hue-rotate(197deg) brightness(108%) contrast(95%)}@keyframes Gradient{0%{background-position:30% 50%}50%{background-position:20% 45%}100%{background-position:30% 50%}}@keyframes Up{0%{opacity:0;transform:translate(0, 200px);-webkit-transform:translate(0, 200px)}100%{opacity:1;transform:translate(0, 0);-webkit-transform:translate(0, 0)}}.animation{opacity:0;transition:all 300ms ease-in-out}@media(max-width: 500px){.animation{opacity:1}}.animation.up{transform:translate(0, 200px);-webkit-transform:translate(0, 200px)}@media(max-width: 500px){.animation.up{opacity:1;transform:translate(0, 0);-webkit-transform:translate(0, 0)}}.animation.up.on{opacity:1;transform:translate(0, 0);-webkit-transform:translate(0, 0)}.animation.fade{opacity:0}.animation.fade.on{opacity:1}.container{max-width:1360px;width:100%;margin:0 auto;padding:0 30px}@media(max-width: 500px){.container{padding:0 20px}}@media(max-width: 900px){.container{padding:0 20px}}.more{font-family:"Avenir Next";font-weight:500;font-size:16px;line-height:20px;letter-spacing:1px;text-transform:uppercase;text-decoration:none;color:#455a63;display:flex;gap:8px;height:18px;overflow:hidden}@media(max-width: 500px){.more{font-size:16px;display:block;height:17px}}.more span{position:relative;top:0;transition:all .2s ease-in-out}.more span:after{content:attr(data-text);position:absolute;top:15px;left:0}.more:hover span{top:-15px}@media(max-width: 500px){.more img{margin-left:8px}}@supports(font: -apple-system-body) and (-webkit-appearance: none){.intro .more span{font-size:14px;width:148px}.about-me_intro .more span{font-size:14px;width:140px}}.loading{width:45px;aspect-ratio:2;--_g: no-repeat radial-gradient(circle closest-side, #455A64 90%,#0000);opacity:.8;background:var(--_g) 0% 50%,var(--_g) 50% 50%,var(--_g) 100% 50%;background-size:33.3333333333% 50%;animation:l3 1s infinite linear;margin:50px auto;transition-delay:.6s}@keyframes l3{20%{background-position:0% 0%,50% 50%,100% 50%}40%{background-position:0% 100%,50% 0%,100% 50%}60%{background-position:0% 50%,50% 100%,100% 0%}80%{background-position:0% 50%,50% 50%,100% 100%}}.scroll{position:fixed;bottom:60px;right:60px;width:40px;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:10;animation:Up 500ms ease-in-out 1;animation-delay:.6s;animation-fill-mode:forwards;opacity:0;color:#455a63;transition:all .5s ease-in-out}.scroll.hide{display:none;transition:all .5s ease-in-out}.scroll p{font-family:"Avenir Next";font-size:10px;text-transform:uppercase;text-align:center}.scroll__ico{position:relative;height:22px}.scroll__ico span:first-child{top:0;left:0;content:url(/src/imgs/scroll_mouse.svg)}.scroll__ico span:last-child{position:absolute;top:5px;left:7px;content:url(/src/imgs/scroll_mouse_middle.svg);animation:scroll .6s infinite linear}@media(max-width: 900px){.scroll{display:none}}@media(max-width: 500px){.scroll{display:none}}@keyframes scroll{0%{top:5px}50%{top:8px}100%{top:5px}}.intro{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}@media(max-width: 500px){.intro{height:auto;margin-top:120px;margin-bottom:54px}}.intro h1{font-family:"Andada Pro",serif;font-size:99px;font-weight:800;background:-webkit-linear-gradient(135deg, rgb(228, 120, 153) 0%, rgb(252, 153, 130) 10%, rgb(179, 129, 190) 22%, rgb(36, 177, 173) 33%, rgb(178, 167, 106) 43%, rgb(228, 120, 153) 58%, rgb(179, 129, 190) 66%, rgb(224, 194, 129) 76%, rgb(36, 177, 173) 88%, rgb(224, 194, 129) 100%);-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);animation:Gradient 2s ease-in-out infinite;background-size:400%;display:flex;flex-direction:column;line-height:100px;animation-name:Gradient,Up;animation-duration:2s,500ms;animation-iteration-count:infinite,1;animation-delay:.2s;animation-fill-mode:forwards;opacity:0}@media(max-width: 900px){.intro h1{font-size:60px;line-height:60px}}@media(max-width: 500px){.intro h1{font-size:56px;line-height:56px;animation:none;opacity:1}}.intro h1 span:last-child{line-height:145px;margin-top:-22px}@media(max-width: 900px){.intro h1 span:last-child{line-height:100px;margin-top:-14px}}@media(max-width: 500px){.intro h1 span:last-child{line-height:56px;margin-top:0}}.intro h1 i{font-family:"Bakso Sapi";font-weight:400;font-size:80px}.intro .more{margin-top:42px;animation:Up 500ms ease-in-out 1;animation-delay:.4s;animation-fill-mode:forwards;opacity:0}@media(max-width: 500px){.intro .more{animation:none;opacity:1}}.works{display:flex;flex-direction:column;margin-top:100px}@media(max-width: 500px){.works{margin-top:54px}}.works .project>a{margin:80px auto;display:flex;gap:88px;justify-content:center;color:#455a63;text-decoration:none;max-width:1118px;width:100%}@media(max-width: 900px){.works .project>a{margin:60px auto;gap:30px}}@media(max-width: 500px){.works .project>a{margin:32px auto;display:block}}.works .project>a .img{border-radius:20px;max-width:658px;height:569px;width:100%;overflow:hidden}@media(max-width: 900px){.works .project>a .img{max-width:400px;height:300px}}.works .project>a .img img{width:100%;transform:scale(1);transition:all .3s ease-in-out;height:100%;object-fit:cover}.works .project>a .description{align-self:center;max-width:320px;width:100%}.works .project>a .description .title{font-size:34px;font-family:"Andada Pro",serif;padding:32px 0;position:relative;line-height:40px;font-weight:800;color:#455a63}@media(max-width: 900px){.works .project>a .description .title{font-size:28px;line-height:32px;padding:20px 0}}@media(max-width: 500px){.works .project>a .description .title{padding:24px 0 16px;font-size:25px}}.works .project>a .description .title:before{content:"";height:3px;width:47px;position:absolute;top:0;background:#e47899;background:linear-gradient(135deg, rgb(228, 120, 153) 0%, rgb(252, 153, 130) 10%, rgb(179, 129, 190) 22%, rgb(36, 177, 173) 33%, rgb(178, 167, 106) 43%, rgb(228, 120, 153) 58%, rgb(179, 129, 190) 66%, rgb(224, 194, 129) 76%, rgb(36, 177, 173) 88%, rgb(224, 194, 129) 100%);background-size:250%}@media(max-width: 500px){.works .project>a .description .title:before{display:none}}.works .project>a .description .text{font-size:16px;letter-spacing:1px;line-height:21px;margin-bottom:32px;color:#455a63}@media(max-width: 500px){.works .project>a .description .text{margin-bottom:16px}}.works .project>a:hover .img img{transform:scale(1.05)}.works .project:nth-child(2n)>a{flex-direction:row-reverse}.works .project.on{background-color:attr(data-color)}header{width:100%;position:fixed;top:0;left:0;display:flex;height:68px;justify-content:space-between;align-items:center;padding:0 40px;z-index:100;background-color:#f7f9fa;transition:all .3s ease-in-out}@media(max-width: 500px){header{height:64px;padding:0 20px}}header .logo{font-family:"Andada Pro",serif;font-size:16px;text-transform:uppercase;color:#455a63;text-decoration:none;display:flex;align-items:center;letter-spacing:4px}header .logo img{margin-right:10px}header .menu-btn{background:rgba(0,0,0,0);border:0;cursor:pointer;z-index:1000;height:23px}header .menu-btn span{height:2px;width:20px;display:block;background-color:#455a63;transition:all .2s ease-in-out;transform:rotate(0deg);transition:.15s ease-in-out}header .menu-btn span:first-child{margin-bottom:4px}header .menu-btn span:last-child{margin-top:4px}header .menu-btn:hover span:first-child{margin-bottom:6px}header .menu-btn:hover span:last-child{margin-top:6px}header .menu_bg{opacity:0;position:fixed;top:0;left:0;width:100vw;height:100%;background-color:rgba(0,0,0,.7);z-index:100;pointer-events:none;transition:all .3s ease-in-out}header .menu{position:fixed;display:flex;right:-40vw;width:40vw;background-color:#fff;height:100%;top:0;z-index:200;justify-content:space-evenly;align-items:center;transition:all .3s ease-in-out;pointer-events:none}@media(max-width: 500px){header .menu{width:100vw;right:-100vw}}header .menu ul{text-align:center}header .menu ul li{margin-bottom:44px}header .menu ul li:last-child{margin-bottom:0}header .menu ul li a{font-size:25px;line-height:29px;text-decoration:none;color:#455a63;font-family:"Andada Pro",serif;font-weight:800;height:23px;overflow:hidden;display:flex;justify-content:space-evenly}@media(max-width: 500px){header .menu ul li a{font-size:25px}}header .menu ul li a span{position:relative;top:0;transition:all .2s ease-in-out}header .menu ul li a span:after{content:attr(data-text);position:absolute;top:20px;left:0}header .menu ul li a:hover span{top:-24px}header.on .menu-btn span:first-child{transform:rotate(45deg)}header.on .menu-btn span:nth-child(2){transform:rotate(-45deg);margin-top:-6px}header.on .menu-btn span:last-child{opacity:0;margin-top:-10px}header.on .menu-btn:hover span:first-child{margin-bottom:4px}header.on .menu{right:0;transition:all .3s ease-in-out;pointer-events:auto}header.on .menu_bg{display:block;opacity:1;pointer-events:auto;transition:all .3s ease-in-out}footer{width:100%}footer>.container{display:flex;justify-content:space-between;align-items:center;height:121px}@media(max-width: 500px){footer>.container{height:auto}}@media(max-width: 500px){footer>.container{display:block;padding-top:32px;padding-bottom:32px;margin-top:32px}}footer>.container>div{display:flex}@media(max-width: 500px){footer>.container>div:first-child{display:block}}footer>.container>div.socialmedia{display:flex;gap:20px;transition:all .2s ease-in-out}footer>.container>div.socialmedia a{height:24px;width:24px;transition:all .2s ease-in-out}footer>.container>div.socialmedia a span.behance{content:url("../imgs/behance.svg")}footer>.container>div.socialmedia a span.linkedin{content:url("../imgs/linkedin.svg")}footer>.container>div.socialmedia a span.dribbble{content:url("../imgs/dribbble.svg")}footer>.container>div.socialmedia:hover a{opacity:.3}footer>.container>div.socialmedia:hover a:hover{opacity:1}footer>.container p{font-size:18px;line-height:24px;letter-spacing:1px;color:#455a63}@media(max-width: 500px){footer>.container p{margin-bottom:16px}}footer>.container p:first-child{margin-right:16px;position:relative}@media(max-width: 500px){footer>.container p:first-child{margin-right:0}}footer>.container p:first-child:after{content:url("../imgs/sparkle.svg");vertical-align:middle;margin-left:16px}@media(max-width: 500px){footer>.container p:first-child:after{position:absolute;top:-32px;left:0;margin-left:0}}.about-me_intro{display:flex;flex-direction:column;align-items:center;padding-bottom:60px;position:relative;padding-top:68px}@media(max-width: 500px){.about-me_intro{padding-top:48px}}.about-me_intro_img{margin-top:80px;margin-bottom:60px;max-width:355px;width:100%;animation:Up 500ms ease-in-out 1;animation-delay:0;animation-fill-mode:forwards;opacity:0}@media(max-width: 500px){.about-me_intro_img{max-width:193px;margin-top:32px;margin-bottom:24px;animation:none;opacity:1}}.about-me_intro h2{text-align:center;font-family:"Andada Pro",serif;font-size:62px;font-weight:800;background:-webkit-linear-gradient(135deg, rgb(228, 120, 153) 0%, rgb(252, 153, 130) 10%, rgb(179, 129, 190) 22%, rgb(36, 177, 173) 33%, rgb(178, 167, 106) 43%, rgb(228, 120, 153) 58%, rgb(179, 129, 190) 66%, rgb(224, 194, 129) 76%, rgb(36, 177, 173) 88%, rgb(224, 194, 129) 100%);-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);animation:Gradient 2s ease-in-out infinite;background-size:400%;transition-delay:.2s;color:#455a63;animation-name:Gradient,Up;animation-duration:2s,500ms;animation-iteration-count:infinite,1;animation-delay:.1s;animation-fill-mode:forwards;opacity:0;line-height:73px}@media(max-width: 500px){.about-me_intro h2{font-size:34px;animation:none;opacity:1}}.about-me_intro h2 span{display:block;font-family:"Bakso Sapi";font-size:40px;font-weight:400;color:#455a63;-webkit-text-fill-color:#455a63;line-height:30px}@media(max-width: 500px){.about-me_intro h2 span{font-size:24px;line-height:35px}}.about-me_intro .more{margin-top:55px;animation:Up 500ms ease-in-out 1;animation-delay:.2s;animation-fill-mode:forwards;opacity:0}@media(max-width: 500px){.about-me_intro .more{margin-top:24px;animation:none;opacity:1}}.about-me_intro:after{content:"";height:3px;width:47px;position:absolute;bottom:0;background:#e47899;background:linear-gradient(135deg, rgb(228, 120, 153) 0%, rgb(252, 153, 130) 10%, rgb(179, 129, 190) 22%, rgb(36, 177, 173) 33%, rgb(178, 167, 106) 43%, rgb(228, 120, 153) 58%, rgb(179, 129, 190) 66%, rgb(224, 194, 129) 76%, rgb(36, 177, 173) 88%, rgb(224, 194, 129) 100%);background-size:250%;animation:Up 500ms ease-in-out 1;animation-delay:.25s;animation-fill-mode:forwards;opacity:0}@media(max-width: 500px){.about-me_intro:after{animation:none;opacity:1}}.about-me_text{max-width:1140px;width:100%;margin-left:auto;margin-right:auto;margin-top:60px;margin-bottom:50px;display:flex;justify-content:space-between;align-items:flex-start;color:#455a63}@media(max-width: 900px){.about-me_text{padding:0 20px}}@media(max-width: 500px){.about-me_text{display:block;margin-bottom:48px}}.about-me_text_descripton{max-width:563px;width:100%;color:#455a63;animation:Up 500ms ease-in-out 1;animation-delay:.35s;animation-fill-mode:forwards;opacity:0}@media(max-width: 500px){.about-me_text_descripton{margin-bottom:48px;animation:none;opacity:1}}.about-me_text_descripton h6{font-size:21px;font-family:"Andada Pro",serif;font-weight:800;margin-bottom:24px}.about-me_text_descripton p{font-size:18px;line-height:24px;letter-spacing:1px}.about-me_text_skills{max-width:412px;width:100%;transition-delay:.2s;color:#455a63;animation:Up 500ms ease-in-out 1;animation-delay:.4s;animation-fill-mode:forwards;opacity:0}@media(max-width: 500px){.about-me_text_skills{animation:none;opacity:1}}.about-me_text_skills ul li{display:flex;gap:10px;align-items:center;margin-bottom:24px;justify-content:end;line-height:24px}@media(max-width: 500px){.about-me_text_skills ul li{align-items:flex-start;flex-direction:column;margin-bottom:32px}}.about-me_text_skills ul li:last-child{margin-bottom:0}.about-me_text_skills ul li p{font-size:17px;letter-spacing:1px;text-align:right}.about-me_text_skills ul li span{height:1px;max-width:200px;width:100%;background:rgba(0,0,0,.2);position:relative}.about-me_text_skills ul li span:before{content:"";height:4px;width:0;position:absolute;top:-1.5px;left:0;background-color:#455a63;transition:all .5s ease-in-out;transition-delay:.3s}@media(max-width: 500px){.about-me_text_skills ul li span:before{width:var(--skill)}}.about-me_text_skills ul li.on span:before{width:var(--skill)}.about-me_grid{display:flex;max-width:1140px;width:100%;margin-left:auto;margin-right:auto;justify-content:space-between;align-items:flex-start;gap:20px;padding-top:50px;margin-bottom:80px}@media(max-width: 500px){.about-me_grid{display:block;padding-top:0;margin-bottom:40px}}.about-me_grid>div{max-width:560px;width:100%;padding:0 64px}@media(max-width: 500px){.about-me_grid>div{padding:0 20px}}.about-me_grid>div h4{font-size:34px;font-weight:800;font-family:"Andada Pro",serif;margin-bottom:48px;position:relative;padding-top:72px;color:#455a63}@media(max-width: 500px){.about-me_grid>div h4{padding-top:48px;margin-bottom:24px}}.about-me_grid>div h4:before{content:"";height:24px;width:24px;display:block;position:absolute;top:0;left:0}.about-me_grid>div ul li{margin-bottom:32px;color:#455a63}.about-me_grid>div ul li:last-child{margin-bottom:0}.about-me_grid>div ul li small{font-size:18px;line-height:24px;letter-spacing:1px;margin-bottom:4px;display:block}.about-me_grid>div ul li p{font-family:"Andada Pro",serif;font-size:18px;line-height:21px;font-weight:800;margin-bottom:4px;display:block}.about-me_grid>div ul li span{font-size:18px;line-height:24px;letter-spacing:1px;margin-bottom:4px;display:block}@media(max-width: 500px){.about-me_grid_experience{margin-bottom:48px}}.about-me_grid_experience h4:before{background-image:url("/src/imgs/experience.svg")}.about-me_grid_education{transition-delay:.2s}.about-me_grid_education h4:before{background-image:url("/src/imgs/education.svg")}.project_details{padding-top:164px;max-width:760px;width:100%;margin-left:auto;margin-right:auto;margin-bottom:100px;color:#455a63}@media(max-width: 500px){.project_details{margin-bottom:48px;padding-top:88px;padding-left:20px;padding-right:20px}}.project_details h2{font-family:"Andada Pro",serif;font-size:62px;font-weight:800;margin-bottom:10px;display:block;transition-delay:.2s}@media(max-width: 500px){.project_details h2{font-size:34px}}.project_details h3{font-family:"Andada Pro",serif;font-weight:800;display:block;font-size:18px;margin-bottom:48px;transition-delay:.3s}.project_details p{font-size:18px;line-height:24px;letter-spacing:1px;display:block;margin-bottom:48px;transition-delay:.4s}.project_details_grid{display:flex;justify-content:space-between;align-items:flex-start}@media(max-width: 500px){.project_details_grid{display:block}}.project_details_grid>div{max-width:140px;width:100%;transition-delay:.5s}@media(max-width: 500px){.project_details_grid>div{max-width:100%;margin-bottom:40px}}.project_details_grid>div h4{font-size:21px;font-family:"Andada Pro",serif;font-weight:800;display:block;margin-bottom:20px;line-height:24px}.project_details_grid>div ul li{font-size:16px;letter-spacing:.5px;margin-bottom:10px;line-height:21px;display:block}.project_details_grid>div ul li:last-child{margin-bottom:0}.project .gallery{transition-delay:.6s}.project .gallery img{width:100%;margin-bottom:80px;opacity:0;transition:all .5s ease-in-out}@media(max-width: 500px){.project .gallery img{margin-bottom:20px}}.project .gallery img.show{opacity:1 !important}.project .gallery img.center{max-width:1360px;width:100%;margin-left:auto;margin-right:auto;display:block}.project .other-works{margin-bottom:100px}@media(max-width: 500px){.project .other-works{margin-bottom:50px;padding-left:20px;padding-right:20px}}.project .other-works h3{font-weight:800;font-family:"Andada Pro",serif;font-size:34px;margin-bottom:80px;text-align:center}@media(max-width: 500px){.project .other-works h3{font-size:25px;margin-bottom:40px;text-align:left}}.project .other-works .works-wrapper{max-width:1140px;width:100%;margin-left:auto;margin-right:auto;display:flex;gap:80px;flex-wrap:wrap}@media(max-width: 900px){.project .other-works .works-wrapper{justify-content:center}}@media(max-width: 500px){.project .other-works .works-wrapper{display:block}}.project .other-works .works-wrapper .other-work{max-width:530px;width:100%;text-decoration:none;color:#455a63}@media(max-width: 900px){.project .other-works .works-wrapper .other-work{max-width:300px}}@media(max-width: 500px){.project .other-works .works-wrapper .other-work{margin-bottom:40px;display:block;max-width:100%}}.project .other-works .works-wrapper .other-work:nth-child(2n){transition-delay:.1s}.project .other-works .works-wrapper .other-work h4{margin-bottom:16px;margin-top:24px;font-weight:800;font-family:"Andada Pro",serif;font-size:25px}@media(max-width: 500px){.project .other-works .works-wrapper .other-work h4{font-size:25px}}.project .other-works .works-wrapper .other-work .img{border-radius:20px;max-width:530px;height:369px;width:100%;overflow:hidden}@media(max-width: 900px){.project .other-works .works-wrapper .other-work .img{max-width:400px;height:300px}}@media(max-width: 500px){.project .other-works .works-wrapper .other-work .img{height:198px}}.project .other-works .works-wrapper .other-work .img img{width:100%;transform:scale(1);transition:all .3s ease-in-out;height:100%;object-fit:cover}.project .other-works .works-wrapper .other-work:hover .img img{transform:scale(1.05)}