@charset "UTF-8";html{font-size:62.5%}*{margin:0;padding:0;box-sizing:border-box}body{font-family:montserrat,sans-serif;font-size:1.4rem;line-height:1.8;display:grid;grid-template-rows:auto auto 1fr auto;scroll-behavior:smooth}body>nav,body>header,body>main,body>footer{grid-column:1/4}a{text-decoration:none!important;color:#fff;font-weight:600}a:link,a:visited{background-image:linear-gradient(120deg,rgba(248,181,0,0.2),rgba(248,181,0,0.2) 100%);background-repeat:no-repeat;background-size:100% .3em!important;background-position:0 100%;transition:background-size .15s ease-in 0s;color:#ffd563!important}a:hover{background-size:100% 88%!important}details summary{cursor:pointer}details summary:focus{outline:none}footer svg{height:32px}footer .svgs{opacity:.4}.home>nav{position:absolute;width:100%}.home>nav .navbar__container{justify-content:space-between}.home .about h3{max-width:55ch}.home .section{place-content:center;display:grid}.home .header{background-image:url(https://cdn.images.my.id/images/2020/09/21/413b40d95ee9a5381803c2cbd8eff7cc.jpg);min-height:100vh}.home .header h1{font-size:clamp(1.1rem,10vw,1.75rem)}.home section h4{font-family:fira code vf,monospace}.home section h4::before{content:"{{";font-weight:200}.home section h4::after{content:"}}";font-weight:200}.content>nav{position:absolute;width:100%}.content>nav .navbar__container{justify-content:space-between}.content .header{background-image:unset;background-position:50%;min-height:40vh}.content .header .hero__content-header::before,.content .header .hero__content-header time{content:attr(data-category);font-size:.25em;display:block;font-weight:400;padding-bottom:.3em;letter-spacing:.3em}.content__intro .hero__content h2{max-width:45ch}.content__detail figcaption{display:none}.content__detail-features li,.content__detail-tech li{margin-left:0;margin-bottom:0}.header{background-repeat:no-repeat;background-position:50%;background-attachment:fixed;background-size:cover}.svglogo{width:170px}.internetbff__content a{background:unset}.internetbff__content a img{transition:all .25s ease-in-out 0s;height:32px}.image{transition:all .25s;z-index:1}.image--transparent{transition:all .25s;max-width:85%;z-index:1}[data-year]::before{content:attr(data-year);font-size:.4em;display:block;font-weight:400;padding-bottom:.3em;letter-spacing:.3em}.link__after{vertical-align:middle}.scroll--down{font-family:caveat,cursive;font-size:2rem;opacity:.8;position:absolute;bottom:5vh}.webprojects .normal-url{background-color:#080f1a}.webprojects__body:hover{transform:translateY(-0.5em)}.webprojects__items:hover .image--transparent{transform:scale(1.05)translateY(0.25em)}.webprojects .card{padding-top:17vh;margin-top:-16vh}.opensource__body:hover{transform:translateY(-0.5em)}.opensource__items:hover .image--transparent{transform:scale(1.05)translateY(0.25em)}.opensource .card{padding-top:17vh;margin-top:-16vh}.startup .card__footer-left,.clients .card__footer-left{border-top-left-radius:10px}.startup__body,.clients__body,.projects__body,.webprojects__body,.opensource__body{transition:transform .25s;min-width:320px}.startup__body:hover,.clients__body:hover,.projects__body:hover,.webprojects__body:hover,.opensource__body:hover{transform:translateY(0.75em)}.startup__body:hover .card,.clients__body:hover .card,.projects__body:hover .card,.webprojects__body:hover .card,.opensource__body:hover .card{background-color:#050a11}.startup .card,.clients .card,.projects .card,.webprojects .card,.opensource .card{background-color:#080f1a;width:100%}.startup .card__footer a,.clients .card__footer a,.projects .card__footer a,.webprojects .card__footer a,.opensource .card__footer a{transition:all .25s}.startup .card__footer a:link,.startup .card__footer a:visited,.clients .card__footer a:link,.clients .card__footer a:visited,.projects .card__footer a:link,.projects .card__footer a:visited,.webprojects .card__footer a:link,.webprojects .card__footer a:visited,.opensource .card__footer a:link,.opensource .card__footer a:visited{background-image:none;background-repeat:unset;background-size:unset;background-position:unset}.startup .card__footer a:hover,.clients .card__footer a:hover,.projects .card__footer a:hover,.webprojects .card__footer a:hover,.opensource .card__footer a:hover{background-size:unset}.startup .card__footer a .card__footer-left:hover,.clients .card__footer a .card__footer-left:hover,.projects .card__footer a .card__footer-left:hover,.webprojects .card__footer a .card__footer-left:hover,.opensource .card__footer a .card__footer-left:hover{background-color:#f8b500;color:#0f1928}.startup .card__footer .card__url:hover,.clients .card__footer .card__url:hover,.projects .card__footer .card__url:hover,.webprojects .card__footer .card__url:hover,.opensource .card__footer .card__url:hover{background-color:#ffd563;color:#0f1928!important}.startup .card .normal padding,.clients .card .normal padding,.projects .card .normal padding,.webprojects .card .normal padding,.opensource .card .normal padding{top:0;left:0}.startup .card .normal margin,.clients .card .normal margin,.projects .card .normal margin,.webprojects .card .normal margin,.opensource .card .normal margin{top:0;left:0}.startup__items,.clients__items,.projects__items,.webprojects__items,.opensource__items{background-position:top;background-repeat:no-repeat;background-size:initial}.startup__badges,.clients__badges,.projects__badges,.webprojects__badges,.opensource__badges{flex-direction:column;position:relative;left:-4.5em;top:1em}.startup__badges ul,.clients__badges ul,.projects__badges ul,.webprojects__badges ul,.opensource__badges ul{flex-direction:column}.startup__badges li,.clients__badges li,.projects__badges li,.webprojects__badges li,.opensource__badges li{padding:.7rem;margin-bottom:.4rem}@media screen and (max-width:750px){.image{max-width:40%}.startup:hover,.clients:hover{transform:translateY(-0.5em)}.startup__items,.clients__items{align-items:center!important}.startup__items:hover .image,.clients__items:hover .image{transform:scale(1.05)translateY(0.5em)}.startup .card,.clients .card{padding-top:10vh;margin-top:-8vh}}@media screen and (min-width:755px){.image{max-width:20%;margin-top:2.5em}.startup__body,.clients__body{transition:all .25s}.startup__body:hover,.clients__body:hover{transform:translateX(-0.5em)}.startup__items:hover .image,.clients__items:hover .image{transform:scale(1.05)translateX(0.5em)}.startup .card,.clients .card{padding-left:10vh;margin-left:-8vh}}@media screen and (min-width:993px){.image{max-width:25%;margin-top:2.5em}.startup__body,.clients__body{transition:all .25s}.startup__body:hover,.clients__body:hover{transform:translateX(-0.5em)}.startup__items:hover .image,.clients__items:hover .image{transform:scale(1.05)translateX(0.5em)}.startup .card,.clients .card{padding-left:10vh;margin-left:-8vh}}.home--dark .header .container,.content--dark .header .container,.home--dark nav .navbar__logo,.content--dark nav .navbar__logo{color:#fff}.home--dark footer .coding .container,.content--dark footer .coding .container,.home--dark footer .container,.content--dark footer .container,.home--dark footer,.content--dark footer,.home--dark main .container,.content--dark main .container,.home--dark .about .container,.content--dark .about .container{color:#e0ffff}.home--dark [class^=content__] .card__header,.content--dark [class^=content__] .card__header{color:#afeeee}.home--dark .about,.content--dark .about{background-color:#080f1a}.home--dark,.content--dark{background-color:#0f1928}.home--dark .content__related,.content--dark .content__related,.home--dark [class^=content__] .hero__content,.content--dark [class^=content__] .hero__content,.home--dark .header,.content--dark .header{background-color:#050a11}.home--dark main .container .projects .card,.content--dark main .container .projects .card{background-color:#080f1a;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgNiA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiMxMDFkMzAiIGZpbGwtb3BhY2l0eT0iLjQiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTUgMGgxTDAgNlY1ek02IDV2MUg1eiIvPjwvZz48L3N2Zz4=)}.home--dark main .container .comments__items,.content--dark main .container .comments__items{background-color:#080f1a;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiMxMDFkMzAiIGZpbGwtb3BhY2l0eT0iLjQiPjxwYXRoIGQ9Ik0zNiAzNHYtNGgtMnY0aC00djJoNHY0aDJ2LTRoNHYtMmgtNHptMC0zMFYwaC0ydjRoLTR2Mmg0djRoMlY2aDRWNGgtNHpNNiAzNHYtNEg0djRIMHYyaDR2NGgydi00aDR2LTJINnpNNiA0VjBINHY0SDB2Mmg0djRoMlY2aDRWNEg2eiIvPjwvZz48L2c+PC9zdmc+)}.home--dark .header>.hero__content,.content--dark .header>.hero__content{background-color:rgba(5,10,17,.75)}.home--dark main .container .comments__body:hover .comments__items,.content--dark main .container .comments__body:hover .comments__items{background-color:#050a11}.home--dark footer .svgs,.content--dark footer .svgs{fill:#fff}.home--dark footer .coding,.content--dark footer .coding{background:repeating-linear-gradient(45deg,#050a11 0px,#050a11 40px,#080f1a 40px,#080f1a 80px)}.badge{background-color:#ffd563}.st0{fill:#fdfdfc}.image{background-color:#fff}.scroll--down{color:#00adb5}.h1{background:linear-gradient(to right,#00adb5,#ffd563)}.h1{color:#fff}.monospace{font-family:fira code vf,monospace}.h1{font-family:fira code vf,monospace;animation:fadeInUp 1.2s;text-transform:capitalize;font-weight:700;letter-spacing:-.05em;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.name{border-bottom:1px dotted #fff}.name:hover{border-bottom:0}.name:hover::after{content:attr(data-after)}.btn__scroll-up{background-color:#000;border:none;border-radius:50%;color:#fff;cursor:pointer;font-size:16px;line-height:48px;width:48px;position:fixed;bottom:30px;right:30px;z-index:100;opacity:0;transform:translateY(100px);transition:all .5s ease}.btn__scroll-up--show{opacity:1;transform:translateY(0)}:root{--duration: 1s;--nav-duration: calc(var(--duration) / 4);--ease: cubic-bezier(0.215, 0.61, 0.355, 1);--space: 1rem;--font-size: 1.125rem;--line-height: 1.5}.hidethis{font-size:1px;opacity:0;z-index:-99}.main-navigation-toggle{position:fixed;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}.main-navigation-toggle+label{position:fixed;right:calc(var(--space) * 2);cursor:pointer;z-index:3}.icon--menu-toggle{--size: calc(1rem + 4vmin);display:flex;align-items:center;justify-content:center;width:var(--size);height:var(--size);stroke-width:6;margin-top:-.8em}.icon-group{transform:translateX(0);transition:transform var(--nav-duration)var(--ease)}.icon--menu{stroke:#fdfdfc}.icon--close{stroke:#fdfdfc;transform:translateX(-100%)}.main-navigation{position:fixed;top:0;left:0;display:flex;align-items:center;width:100%;height:100%;transform:translateX(-100%);transition:transform var(--nav-duration);z-index:2}.main-navigation:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0f1928;transform-origin:0 50%;z-index:-1}.main-navigation ul{font-size:12vmin;font-family:fira code vf,monospace;width:100%}.main-navigation li{--border-size: 1vmin;display:flex;align-items:center;position:relative;overflow:hidden}.main-navigation li:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:var(--border-size);background-color:#fdfdfc;transform-origin:0 50%;transform:translateX(-100%)skew(15deg)}.main-navigation a{display:inline-block;width:100%;max-width:800px;margin:0 auto;color:#fdfdfc;line-height:1;text-decoration:none;user-select:none;padding:var(--space) calc(var(--space) * 2) calc(var(--space) + var(--border-size)/2);transform:translateY(100%)}.main-content{margin:6rem auto;max-width:70ch;padding:0 calc(var(--space) * 2);transform:translateX(0);transition:transform calc(var(--nav-duration) * 2) var(--ease)}.main-content>*+*{margin-top:calc(var(--space) * var(--line-height))}.main-navigation-toggle:checked~label .icon--menu-toggle .icon-group{transform:translateX(100%)}.main-navigation-toggle:checked~.main-content{transform:translateX(10%)}.main-navigation-toggle:checked~.main-navigation{transition-duration:0s;transform:translateX(0)}.main-navigation-toggle:checked~.main-navigation:after{animation:nav-bg var(--nav-duration)var(--ease)forwards}.main-navigation-toggle:checked~.main-navigation li:after{animation:nav-line var(--duration)var(--ease)forwards}.main-navigation-toggle:checked~.main-navigation a{animation:link-appear calc(var(--duration) * 1.5) var(--ease) forwards}.main-navigation-toggle:checked~.main-navigation li:nth-child(1):after,.main-navigation-toggle:checked~.main-navigation li:nth-child(1) a{animation-delay:calc((var(--duration)/2) * 1 * 0.125)}.main-navigation-toggle:checked~.main-navigation li:nth-child(2):after,.main-navigation-toggle:checked~.main-navigation li:nth-child(2) a{animation-delay:calc((var(--duration)/2) * 2 * 0.125)}.main-navigation-toggle:checked~.main-navigation li:nth-child(3):after,.main-navigation-toggle:checked~.main-navigation li:nth-child(3) a{animation-delay:calc((var(--duration)/2) * 3 * 0.125)}.main-navigation-toggle:checked~.main-navigation li:nth-child(4):after,.main-navigation-toggle:checked~.main-navigation li:nth-child(4) a{animation-delay:calc((var(--duration)/2) * 4 * 0.125)}@keyframes nav-bg{from{transform:translateX(-100%)skewX(-15deg)}to{transform:translateX(0)}}@keyframes nav-line{0%{transform:scaleX(0);transform-origin:0 50%}35%{transform:scaleX(1.001);transform-origin:0 50%}65%{transform:scaleX(1.001);transform-origin:100% 50%}100%{transform:scaleX(0);transform-origin:100% 50%}}@keyframes link-appear{0%,25%{transform:translateY(100%)}50%,100%{transform:translateY(0)}}h1,h2,h3,h4,h5,h6{line-height:1.3!important}strong{font-family:fira code vf,monospace;padding:0 .2em;background-color:#0f1928;border-radius:.15em}.card__footer-left,.card__footer-right{margin:0!important}.normal-url:link,.normal-url:visited{background-image:none;background-repeat:unset;background-size:unset;background-position:unset}.normal-url:hover{background-size:unset}.button--md{font-size:1rem;padding:.4em .8em;height:auto}.button--lg{font-size:2rem;padding:.5em 1em;height:auto}.url--in::after{content:"→";font-family:montserrat,sans-serif}.url--out::after{content:"↗";font-family:montserrat,sans-serif}.-height-50vw{min-height:50vw}.-height-100vw{min-height:100vw}.-height-50vh{min-height:50vh}.-height-100vh{min-height:100vh}.-height-50{min-height:50%}.-height-100{min-height:100%}#btn:checked~body{transition:.5s all;filter:invert(1)hue-rotate(210deg)}#btn{z-index:3;width:10vw;height:4vw;-webkit-appearance:none;position:fixed;outline:none;border:none;cursor:pointer;right:1vw;bottom:1vw;border-radius:2.5vw;background:#fff}input[type=checkbox]:before{content:"";position:absolute;width:3vw;height:3vw;border-radius:5vw;background:#000;left:.5vw;top:.5vw;transition:.5s}input[type=checkbox]:checked{box-shadow:inset 0 0 100px #000}input[type=checkbox]:checked:before{left:6.5vw;background:#fff}