@charset "UTF-8";html{font-size:62.5%}*{margin:0;padding:0;box-sizing:border-box}body{font-family:inter var,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;font-weight:600}a:link,a:visited{background-image:linear-gradient(120deg,rgba(248,181,0,.2),rgba(248,181,0,.2) 100%);background-repeat:no-repeat;background-size:100% .3em!important;background-position:0 100%;transition:background-size .15s ease-in 0s}a:hover{background-size:100% 88%!important}details[open] summary::marker{content:'▽ '}details summary{cursor:pointer}details summary::marker{content:'▻ '}blockquote p::before{content:'\201C'}blockquote p::after{content:'\201D'}footer svg{height:32px}footer .svgs{opacity:.4}footer .internetbff__link:hover .svgs{opacity:.8}.home>nav{position:absolute;width:100%}.home>nav .navbar__container{justify-content:space-between}.home .about h3{max-width:40ch}.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{letter-spacing:1.1em;font-size:clamp(1.1rem,10vw,1.75rem)}.home .header>.hero__content .name:hover::after{content:attr(data-after)}.home section h4::before{content:"↘ ";display:table-caption}.home section h4:hover::before{content:"";display:none}.home section h4:hover::after{content:"↓";display:table-caption}.home .coding h3::after{content:' 🙂'}.home .coding h3:hover::after{content:' 😁'}.content>nav{position:absolute;width:100%}.content>nav .navbar__container{justify-content:space-between}.content__intro h2{max-width:60ch}.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__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}.internetbff__content a{background:unset}.internetbff__content a img{transition:all .25s ease-in-out 0s;height:32px}.portfolio .card{height:100%;transition:transform .25s}.portfolio .card:hover{transform:translateY(-.5em)}.portfolio .card__content{position:relative}.blog .card{height:100%;transition:transform .25s}.blog .card:hover{transform:translateY(-.5em)}.blog .card__content{position:relative}.comments__content{transition:transform .25s}.comments__content:hover{transform:translateY(-.5em)}.whatido .grid .column,.work .grid .column{transition:transform .25s;min-width:320px}.whatido .grid .column:hover,.work .grid .column:hover{transform:translateY(-.5em)}.whatido .card,.work .card{width:100%}.whatido .card__footer a,.work .card__footer a{transition:all .25s}.whatido .card__footer a:link,.whatido .card__footer a:visited,.work .card__footer a:link,.work .card__footer a:visited{background-image:none;background-repeat:unset;background-size:unset;background-position:unset}.whatido .card__footer a:hover,.work .card__footer a:hover{background-size:unset}.whatido .card .normal padding,.work .card .normal padding{top:0;left:0}.whatido .card .normal margin,.work .card .normal margin{top:0;left:0}.whatido__content,.work__content{background-position:top;background-repeat:no-repeat;background-size:initial}.whatido__badges,.work__badges{flex-direction:column;position:relative;left:-4.5em;top:1em}.whatido__badges ul,.work__badges ul{flex-direction:column}.whatido__badges li,.work__badges li{padding:.7rem;margin-bottom:.4rem}.whatido details::focus,.whatido summary::focus,.work details::focus,.work summary::focus{outline:none}.home--dark .header .container,.content--dark .header .container,.home--dark nav .navbar__logo,.content--dark nav .navbar__logo{color:#fff}.home--dark footer .container,.content--dark footer .container,.home--dark footer .coding .container,.content--dark footer .coding .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 main .privacy__items .card summary,.content--dark main .privacy__items .card summary,.home--dark main .container .whatido .card summary,.home--dark main .container .work .card summary,.content--dark main .container .whatido .card summary,.content--dark main .container .work .card summary,.home--dark main .container .whatido__brand,.home--dark main .container .work__brand,.content--dark main .container .whatido__brand,.content--dark main .container .work__brand,.home--dark [class^=content__] .card__header,.content--dark [class^=content__] .card__header{color:#afeeee}.h1{background:linear-gradient(to right,#00ADB5,#FFD563)}.home--dark footer .coding,.content--dark footer .coding,.home--dark .about,.content--dark .about{background-color:#080f1a}.home--dark [class^=content__] .hero__content,.content--dark [class^=content__] .hero__content,.home--dark .header,.content--dark .header{background-color:#050a11}.home--dark main .privacy__items .card summary,.content--dark main .privacy__items .card summary,.home--dark main .container .whatido .card summary,.home--dark main .container .work .card summary,.content--dark main .container .whatido .card summary,.content--dark main .container .work .card summary{background-color:#12284a}.home--dark main .container .whatido .card,.home--dark main .container .work .card,.content--dark main .container .whatido .card,.content--dark main .container .work .card{background-color:#080f1a;background-image:url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23101d30' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E")}.home--dark main .container .comments__content,.content--dark main .container .comments__content{background-color:#080f1a;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23101d30' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.home--dark,.content--dark{background-color:#080f1a;background-image:url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23101d30' fill-opacity='0.98' fill-rule='evenodd' d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z'/%3E%3C/svg%3E")}a{color:#fff}a:link,a:visited{color:#ffd563!important}footer .svgs{fill:#fff}.home--dark .header>.hero__content,.content--dark .header>.hero__content{background-color:rgba(5,10,17,.75)}.home--dark main .container .comments__content:hover,.content--dark main .container .comments__content:hover{background-color:#050a11}.home--dark main .container .whatido .column:hover .card,.home--dark main .container .work .column:hover .card,.content--dark main .container .whatido .column:hover .card,.content--dark main .container .work .column:hover .card{background-color:#050a11}.home--dark main .container .whatido .card__footer a .card__footer-left:hover,.home--dark main .container .work .card__footer a .card__footer-left:hover,.content--dark main .container .whatido .card__footer a .card__footer-left:hover,.content--dark main .container .work .card__footer a .card__footer-left:hover{background-color:#f8b500;color:#0f1928}.home--dark main .container .whatido .card__footer .card__url:hover,.home--dark main .container .work .card__footer .card__url:hover,.content--dark main .container .whatido .card__footer .card__url:hover,.content--dark main .container .work .card__footer .card__url:hover{background-color:#ffd563;color:#0f1928!important}.home--dark main .privacy__items .card,.content--dark main .privacy__items .card{background-color:#080f1a}.home section h4:hover{color:#fff}.badge{background-color:#ffd563}.image{background-color:#fff}.h1{color:#fff}.icon--menu{stroke:#fdfdfc}.icon--close{stroke:#fdfdfc}.main-navigation:after{background-color:#0f1928}.main-navigation li:after{background-color:#fdfdfc}.main-navigation a{color:#fdfdfc}.svglogo{width:170px}.st0{fill:#fdfdfc}.image{transition:all .25s;z-index:1;height:25vh}.avatar{border-radius:50%}.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}.h1{font-family:fira code vf,monospace;animation:fadeInUp 1.2s;font-weight:700;letter-spacing:-.05em;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}#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:checked[type=checkbox]{box-shadow:inset 0 0 100px black}input:checked[type=checkbox]:before{left:6.5vw;background:#fff}: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:2}.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--close{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:1}.main-navigation:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 50%;z-index:-1}.main-navigation ul{font-size:12vmin;font-family:inter var,sans-serif;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);transform-origin:0 50%;transform:translateX(-100%)skew(15deg)}.main-navigation a{display:inline-block;width:100%;max-width:800px;margin:0 auto;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 * .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 * .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 * .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 * .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)}}.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}.url--in::after{content:'→'}.url--out::after{content:'↗'}.-width-50vw{min-width:50vw}.-width-100vw{min-width:100vw}.-width-50vh{min-width:50vh}.-width-100vh{min-width:100vh}.-width-50{min-width:50%}.-width-100{min-width:100%}.-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%}