@font-face{font-family:gotham;src:url(/static/media/Gotham%20Medium.bcd733e6f8ebeb6a5e75.otf)}:root{--primary-color:#3674b5;--secondary-color:#578fca;--tertiary-color:#f5f0cd;--contrast-color:#fada7a;--outside-padding:2em;--header-height:5vh}*{box-sizing:border-box;color:#fff;font-family:gotham,sans-serif;margin:0;padding:0}body{background-color:#3674b5;background-color:var(--primary-color);padding:2em;padding:var(--outside-padding)}.page-container{height:calc(100vh - 4em);height:calc(100vh - var(--outside-padding)*2);width:100%}.page-container.centered{align-items:center;display:flex;flex-direction:column;justify-content:center}.header{font-size:1.5em;letter-spacing:5px}.app-cover{border:2px solid #fff;display:flex;flex-direction:column;height:calc(100vh - 4em - 2px);height:calc(100vh - var(--outside-padding)*2 - 2px);width:100%}.input{background-color:initial;border-color:var(--color-contrast);border-radius:.25rem;border-width:2px;color:#fff;font-size:1rem;padding:.5rem}.input::placeholder{color:var(--color-contrast)}.input:focus{border-color:#fff;outline:none}.input:focus::placeholder{color:#fff}.input.full{width:100%}.clean-btn{background:none;border:none;padding:.5em}.clean-btn:hover:not(.no-bg-change){background-color:var(--secondary-color);cursor:pointer}.btn{border:0;border-radius:9999px;color:#fff;font-size:.875rem;font-weight:500;padding:.75rem;transition:.25s}.btn:hover{cursor:pointer}.btn.full{width:100%}.btn.primary{background-color:var(--primary-color);color:#fff}.btn.primary:enabled:hover{background-color:#2d3748}.btn.secondary{background-color:var(--secondary-color);color:var(--primary-color)}.btn.secondary:enabled:hover{background-color:#2d3748;color:#fff}.btn.contrast{background-color:var(--contrast-color);color:#fff}.btn.contrast:enabled:hover{background-color:#2d3748}.btn.h-tertiary:enabled:hover,.btn.tertiary{background-color:var(--tertiary-color);color:var(--primary-color)}.btn.tertiary{filter:none}.btn.tertiary:hover{background-color:var(--contrast-color)}.btn.tertiary.hollow{background-color:initial;border-color:var(--tertiary-color);border-width:2px;color:var(--tertiary-color)}.btn.h-secondary:enabled:hover{background-color:var(--secondary-color)}.btn.red{background-color:#b91c1c}.btn.red:enabled:hover{background-color:#ef4444}.btn.green{background-color:#15803d}.btn.green:enabled:hover{background-color:#22c55e}.btn.img,.clean-btn.img{align-items:center;display:flex;gap:.5rem;justify-content:center}.btn.img>*,.clean-btn.img>*{width:24px}.btn.notround,.clean-btn.notround{border-radius:.25rem}.btn.bold,.clean-btn.bold{font-weight:700}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.navbar{border-bottom:2px solid #fff;display:grid;height:var(--header-height);width:100%}.navbar button{background-color:initial;border:none;font-size:1.25em;transition:.75s}.navbar button.selected{background-color:#64646480}.navbar button:not(:last-child){border-right:2px solid #fff}.navbar button:hover{cursor:pointer}.image-viewer{background-color:#000000bf;height:100vh;left:0;padding:2em;position:fixed;top:0;width:100%;z-index:9999}.image-viewer img{height:100%;object-fit:contain;width:100%}.image-viewer .floatingbtn{background-color:gray;border:none;border-radius:100%;height:2em;position:fixed;top:50%;transform:translateY(-50%);width:2em}.floatingbtn.prev{left:.5em}.floatingbtn.next{right:.5em}.floatingbtn.back{right:1.5em;top:2em}.floatingbtn:active{background-color:#000}.header.bottom,.header.top{text-align:center;width:100%}.header.top{border-bottom:1px solid #fff;margin-bottom:.5em;padding-bottom:1em}.header.bottom{border-top:1px solid #fff;margin-top:.5em;padding-top:1em}.lang-selector{grid-gap:1em;display:grid;gap:1em;grid-template-columns:1fr 2px 1fr;max-width:600px;width:100%}.lang-selector>div{background-color:#fff;height:100%}.lang-selector>button{aspect-ratio:16/9;background-position:50%;background-repeat:no-repeat;background-size:cover;border:none;height:auto;transition:.5s;width:100%}.lang-selector>button:hover{cursor:pointer;transform:scale(110%)}.lang-selector>button:active{transform:scale(100%)}.lang-selector>button.eng{background-image:url(/static/media/flag_england.58a652d72279c9623b6a.png)}.lang-selector>button.ind{background-image:url(/static/media/flag_indonesia.c6b49ad21e0d54f7f95a.png)}.aboutme-container{display:flex;height:calc(100% - var(--header-height))}.aboutme-container .description{flex-grow:1;overflow-y:scroll}.description .hellothere{background:repeating-linear-gradient(-45deg,var(--secondary-color),var(--secondary-color) 20px,#0000 20px,#0000 40px);border-bottom:2px solid #fff;margin-bottom:1em;padding:2em;text-align:center;width:100%}.description .description-container{display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:2em;-webkit-user-select:none;user-select:none;width:100%}.description-container>p{color:#d3d3d3;opacity:.7;transition:.25s}.description-container>p:not(.separator):hover{font-size:x-large;opacity:1}.freelance{align-items:flex-end;display:flex;gap:1em;justify-content:center;padding-left:2em;padding-right:2em}.freelance h1{text-align:center;transform:translateY(50%)}.freelance .bar{background-color:#fff;flex-basis:0;flex-grow:1;height:5px;width:100%}.freelance-description{border-bottom:5px solid #fff;border-left:5px solid #fff;border-right:5px solid #fff;margin:0 2em 2em;padding:3em 2em 2em;text-align:center}.freelance-content{border-top:5px solid #fff;display:grid;grid-template-columns:1fr 5px 1fr;margin:0 2em 2em}.freelance-content ul.services{list-style:none;padding:1em}ul.services>li{align-items:center;background-color:var(--secondary-color);border-radius:5px;display:flex;gap:1em;margin-bottom:.5em;padding:.5em}ul.services>li img{height:auto;width:48px}.freelance-content .cta{display:grid;grid-template-rows:1fr 1fr;padding:1em}.cta a{margin:1em}.cta button{background-color:var(--primary-color);border:2px solid #fff;font-size:1.25em;height:100%;transition:.5s;width:100%}.cta button:hover{cursor:pointer}.cta button:hover,.links{background-color:var(--secondary-color)}.links{align-items:center;border:2px solid #fff;display:flex;flex-wrap:wrap;gap:1em;justify-content:center;margin:1em 2em 2em;padding:1em}.links img{aspect-ratio:1/1;height:auto;transition:.5s;width:48px}.links img:hover{transform:scale(110%)}.contact-form{border:5px solid #fff;display:flex;flex-direction:column;gap:1em;margin:1em 2em 2em;padding:1em}.contact-form>p{font-size:1.15em;text-align:center;width:100%}.contact-form>input,.contact-form>textarea{background-color:var(--secondary-color);border:2px solid #fff;font-size:1em;padding:.5em}.contact-form>textarea{height:300px;resize:vertical}.contact-form>input::placeholder,.contact-form>textarea::placeholder{color:var(--tertiary-color)}.contact-form>input:focus,.contact-form>textarea:focus{outline:none}.contact-form>button{background-color:var(--primary-color);border:2px solid #fff;font-size:1.15em;padding:.5em;transition:.5s}.contact-form>button:hover{background-color:var(--secondary-color);cursor:pointer}.biodata{background-color:#fff;border-left:2px solid #fff;display:flex;flex-direction:column}.biodata img{aspect-ratio:1/1;height:auto;object-fit:cover;width:100%}.biodata .name{color:var(--primary-color);font-weight:700;padding-bottom:1em;padding-top:1em;text-align:center;width:100%}.biodata .content{background-color:#fff;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto}.biodata .content p{border-bottom:2px solid var(--secondary-color);color:var(--primary-color);padding:1em;text-align:center}.biodata .content p:nth-child(-n+2){border-top:2px solid var(--primary-color)}.biodata .content p:nth-child(2n){border-left:2px solid var(--secondary-color)}.biodata-sidebar-btn{background-color:#fff;border:none;border-radius:10px 10px 0 0;color:var(--primary-color);font-size:1.25em;padding:.5em;position:fixed;right:0;top:10%;transform:rotate(-90deg) translateY(0);transform-origin:right bottom;transition:.5s}.biodata-sidebar-btn:active{background-color:var(--secondary-color)}.biodata-sidebar-btn.in{animation:biodata-sidebar-btn-in .5s 1 normal forwards}.biodata-sidebar-btn.out{animation:biodata-sidebar-btn-out .5s 1 normal forwards}.biodata.biodata-sidebar{background-color:#fff;display:flex;flex-direction:column;height:100vh;position:fixed;right:0;top:0;transform:translateX(100%);width:85%}.biodata.biodata-sidebar.in{animation:biodata-sidebar-in .5s 1 normal forwards}.biodata.biodata-sidebar.out{animation:biodata-sidebar-out .5s 1 normal forwards}@keyframes biodata-sidebar-btn-in{0%{right:0}to{right:85%}}@keyframes biodata-sidebar-btn-out{0%{right:85%}to{right:0}}@keyframes biodata-sidebar-in{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes biodata-sidebar-out{0%{transform:translateX(0)}to{transform:translateX(100%)}}.biodata-sidebar,.biodata-sidebar-btn{display:none}.experience-container{padding-top:2em}.education-container{padding:1em}.education-list{list-style:none}.education-list li{padding-bottom:.5em;padding-top:.5em;transition:.5s;-webkit-user-select:none;user-select:none}.education-list li:not(:last-child){margin-bottom:1em}.education-list li:hover{background-color:var(--secondary-color);box-shadow:0 0 15px var(--secondary-color);transform:scale(102%)}.education-list li>p:last-child{color:var(--tertiary-color);font-size:.9em}.loading-spinner-container{align-items:center;display:flex;justify-content:center;width:100%}.loading-spinner{animation:rotation 1s infinite forwards;aspect-ratio:1/1;border-radius:50%;display:inline-block;height:auto}@keyframes rotation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.loading-error{margin:2em 0;width:100%}.loading-error p{font-weight:700;margin-bottom:1em;text-align:center;width:100%}.loading-error .btn{display:block;margin:0 auto}.portfolio-container{display:flex;flex-basis:0;flex-direction:column;flex-grow:1;padding:2em}.search-bar{border:2px solid #fff}.search-input{display:flex;width:100%}.search-input input{background:none;border:2px solid #fff;border-left:none;border-top:none;flex-basis:0;flex-grow:1;font-size:1.05em;padding:.5em 0 .5em .5em}.search-input input::placeholder{color:var(--secondary-color)}.search-input input:focus{outline:none}.search-input button{background:none;background-color:var(--primary-color);border:none;border-bottom:2px solid #fff;min-width:50px;width:15%}.search-input button:hover{background-color:var(--secondary-color);cursor:pointer}.search-bar{margin-bottom:2em}.search-bar .filters{display:grid;width:100%}.search-bar .filters button:not(:last-child){border-right:2px solid #fff}.projects-list{display:grid;flex-basis:0;flex-grow:1;grid-template-columns:repeat(3,1fr);list-style:none;overflow-y:scroll}.projects-list>li{background-color:initial;border:2px solid #fff;height:-webkit-fit-content;height:fit-content;margin:1em;transition:.5s}.projects-list>li:hover{background-color:var(--secondary-color);cursor:pointer;transform:scale(105%)}.projects-list img{aspect-ratio:16/9;height:auto;object-fit:cover;width:100%}.projects-list .details{padding:.5em}.pd-container{align-items:center;background-color:#808080bf;display:flex;height:100vh;justify-content:center;left:0;padding:8em;position:fixed;top:0;width:100%;z-index:9999}.pd-panel{background-color:var(--primary-color);border:2px solid #fff;height:100%;overflow-y:scroll;width:100%}.pd-panel .img-container{border-bottom:2px solid #fff;display:flex;height:30em;justify-content:center;position:relative;width:100%}.img-container>button{background-color:gray;border:none;height:100%;transition:.5s;width:3em}.img-container>button:hover{background-color:#363636;cursor:pointer}.img-container>img{height:100%;width:auto}.img-container .fullscreen-prompt{align-items:center;background-color:#00000080;display:none;flex-direction:column;height:100%;justify-content:center;position:absolute;width:100%}.img-container .fullscreen-prompt img{height:auto;width:48px}.pd-panel .details-container{padding:1em}.details-container .title{font-size:1.5em;font-weight:700}.details-container .category{color:#ffffff80;font-weight:700}.details-container .tools-container{display:flex;gap:2em;list-style:none;overflow-x:auto;padding:1em;width:100%}.tools-container>li{align-items:center;background-color:var(--secondary-color);border-radius:10px;display:flex;flex-direction:column;gap:1em;justify-content:center;padding:1em;transition:.5s}.tools-container>li>img{height:8em;object-fit:contain;width:8em}.tools-container>li:hover{border-radius:2px;cursor:pointer;transform:scale(105%)}.details-container .urls{margin-left:2em}.urls>li{text-decoration:underline}.urls>li:hover{cursor:pointer}.pfw-container{align-items:center;background-color:#000000bf;display:flex;height:100vh;justify-content:center;left:0;padding:2em;position:fixed;top:0;width:100%;z-index:8000}.pfw-panel{background-color:var(--primary-color);border:5px solid #fff;max-width:550px;padding:2em;width:100%}.pfw-panel>p{text-align:center;width:100%}.pfw-panel>p:first-child{font-size:1.5em;font-weight:700;margin-bottom:1em}.pfw-panel>button{background-color:var(--primary-color);border:2px solid #fff;margin-top:1em;padding:.5em;width:100%}.pfw-panel>button:hover{background-color:var(--secondary-color);cursor:pointer}.pfw-panel a{font-size:1.1em;font-weight:700}.dp-container{align-items:center;background-color:#80808080;display:flex;flex-direction:column;height:100vh;justify-content:center;left:0;padding:2em;position:fixed;top:0;width:100%;z-index:9999}.dp-panel{background-color:var(--primary-color);border:2px solid #fff;max-height:400px;max-width:500px;overflow-x:auto;overflow-y:auto;padding:1em;width:90%}.dp-list{list-style:none}.dp-list>li{padding:.5em}.dp-list>li:hover{background-color:var(--secondary-color);cursor:pointer}@media screen and (max-width:1000px){.projects-list{grid-template-columns:repeat(2,1fr)}.projects-list .details>p:first-child{margin-bottom:.5em}.projects-list .details>p:not(:first-child){color:var(--tertiary-color);font-size:.85em}.pd-container{padding:3em}}@media screen and (max-width:815px){body{padding:1em}.navbar{font-size:.5em}.biodata{display:none}.biodata-sidebar,.biodata-sidebar-btn{display:inline;display:initial}.freelance-content{grid-template-columns:1fr}.freelance-content>.separator{display:none}.freelance-content .cta{padding:0}.projects-list{grid-template-columns:1fr}.pd-panel .img-container{height:10em}.pd-panel .img-container>button{display:none}.pd-panel .img-container>.fullscreen-prompt{display:flex}}
/*# sourceMappingURL=main.cef94f5f.css.map*/