@import"https://fonts.googleapis.com/css2?family=Lexend+Exa&family=Lexend+Giga&family=Lexend+Mega:wght@300&family=Roboto+Mono:wght@500&display=swap";@import"https://fonts.googleapis.com/css2?family=Mulish:wght@700&family=Space+Grotesk:wght@400;500&display=swap";body{margin:0;padding:0;background-color:#03001c;font-family:Roboto Mono,sans-serif;color:#b6bbea;font-size:1rem}.container{display:flex;height:auto}.main{justify-self:center;width:100%;padding-inline:3.5em}.header{margin-top:1.5em;font-family:Mulish,sans-serif;font-size:2rem;color:#b6eada;margin-bottom:1em}.navbar-container{position:sticky;top:0;padding:1em 1.5em;height:100vh;border-right:1px solid #5B8FB9;overflow:hidden}.navbar-container .navbar-header{display:flex;padding:0;margin:2.25em auto;width:300px;height:190px}.navbar-container .navbar-header .name{padding-bottom:.3em;font-family:Mulish,sans-serif;font-size:2.5rem;color:#b6eada;display:inline-block;width:min-content}.navbar-container .navbar-header .job-title{text-align:right;display:block;font-family:Mulish,sans-serif;font-size:.65rem;align-self:flex-end}.navbar-container .cv button{width:100%;color:#b6bbea;background-color:#03001c;border:1px solid #5B8FB9;padding:.5em 1em;cursor:pointer}.navbar-container .cv a{text-decoration:none;color:#b6bbea;transition:color .2s ease-out}.navbar-container .cv a:hover{color:#b6eada}.navbar-container .preview-container{width:300px;height:190px;border:1px solid #5B8FB9;padding:0;margin:2.25em auto;align-items:center}.navbar-container .preview-container img{display:block;width:100%;height:100%;object-fit:fill}.navbar-container .preview-container .no-preview-container{transition:opacity .15s ease-in-out;overflow:visible;opacity:100}.navbar-container .preview-container .no-preview-container img{opacity:100;position:relative;top:-180px;left:70px;z-index:1;width:55%;color:#b6eada;animation:rotation 15s infinite linear}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}.navbar-container .preview-container .no-preview-container .eye{z-index:0;position:absolute;top:350px;left:126px;height:50px;width:100px;background-color:#b6bbea;border-radius:50%;animation:eyeOpen 4s infinite ease-in-out}@keyframes eyeOpen{0%{transform:none}95%{transform:none}97%{transform:translateY(15px) scaleY(0)}}.navbar-container .preview-container .no-preview-container .eye .cornea{position:relative;left:var(--eye-left, 50px);top:var(--eye-top, 50px);transform:translate(-50%,-50%);height:45px;width:45px;background-color:#03001c;border-radius:50%}.navbar-container .preview-container .hidden{pointer-events:none;opacity:0}.navbar-container .navlist-group{font-style:none;list-style:none;margin:2em auto;padding:0;text-align:left;width:300px;height:105px;display:flex;flex-direction:column;justify-content:space-between}.navbar-container .navlist-group .nav-link{text-decoration:none;font-size:.8rem;font-family:Mulish,sans-serif;color:#443375;transition:color .2s ease-out}.navbar-container .navlist-group .nav-link:hover{cursor:pointer;color:#b6bbea}.navbar-container .navlist-group .nav-link.active{color:#b6eada;font-size:1.5rem}.portfolio-container{display:flex;flex-direction:column;height:auto;min-width:400px;max-width:800px}.portfolio-container .portofolio-header{padding:.5em 1em;display:grid;grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;row-gap:.5em;grid-template-areas:"title arrow" "logo arrow";align-items:center;font-size:.8rem;font-weight:lighter;letter-spacing:.5px;border:1px solid #5B8FB9;height:fit-content;transition:background-color .2s linear}.portfolio-container .portofolio-header .portofolio-title{grid-area:title}.portfolio-container .portofolio-header .portofolio-logo-container{grid-area:logo}.portfolio-container .portofolio-header .portofolio-logo-container img{width:2em;height:2em;margin-right:1em}.portfolio-container .portofolio-header .portofolio-logo-arrow{margin-right:1em;grid-area:arrow;justify-self:right;align-self:center;transform:rotate(var(--deg, 0deg));transition:transform .3s ease-in}.portfolio-container .portofolio-header .portofolio-logo-arrow img{width:2.3em}.portfolio-container .portofolio-info{margin-block:1.5em;color:#b6eada}.portfolio-container .portofolio-header:hover{background-color:#b6eada;color:#03001c;cursor:pointer}.portfolio-container .portofolio-body{margin-bottom:2.5em;display:block;pointer-events:none;visibility:hidden;height:0;overflow:hidden;font-size:.8rem;padding:0;transition:height .5s ease-in-out}.portfolio-container .portofolio-body .portfolio-link{display:flex;justify-content:flex-end;align-items:center}.portfolio-container .portofolio-body .portfolio-link button{align-self:flex-end;padding:1em;font-size:.7rem;font-family:Mulish,sans-serif;border:1px solid #5B8FB9;background-color:#03001c;transition:background-color .2s linear}.portfolio-container .portofolio-body .portfolio-link button a{color:#b6eada;text-decoration:none}.portfolio-container .portofolio-body .portfolio-link button:hover{background-color:#b6eada}.portfolio-container .portofolio-body .portfolio-link button:hover a{color:#03001c;text-decoration:none}.portfolio-container .portofolio-body .portofolio-type{font-family:Mulish,sans-serif;color:#b6bbea;font-size:.7rem;text-align:left}.portfolio-container .portofolio-body .portofolio-image-container{display:grid;grid-template-rows:2fr;column-gap:.5em;grid-template-columns:2fr auto;justify-items:end}.portfolio-container .portofolio-body .portofolio-image-container .main-image{width:100%;object-fit:contain;height:100%;opacity:1;transition:opacity .5s ease-in-out;aspect-ratio:16/9}.portfolio-container .portofolio-body .portofolio-image-container .images{height:auto;width:100%;display:flex;flex-direction:column;justify-content:space-between;transition:opacity .5s ease-in-out}.portfolio-container .portofolio-body .portofolio-image-container .images .image{margin:.5em;opacity:.5}.portfolio-container .portofolio-body .portofolio-image-container .images .selected-image{border:2px solid #B6EADA;margin:.5em}.portfolio-container .portofolio-body .portofolio-image-container .images img{width:137px;aspect-ratio:3/2}.portfolio-container .portofolio-body .description{font-size:.8rem}.portfolio-container .portofolio-body .link{margin-top:.01em;text-align:right}.portfolio-container .visible{border:1px solid #5B8FB9;border-top:none;pointer-events:all;padding:2em;visibility:visible;display:block;height:max-content}.portfolio-container .pagination{display:flex;justify-content:right;margin-bottom:2em}.portfolio-container .pagination button{color:#b6bbea;background-color:#03001c;border:1px solid #5B8FB9;padding:.5em .8em;margin-left:.5em}.portfolio-container .pagination button:hover{background-color:#b6eada}.portfolio-container .pagination button[disabled]{color:#03001c;background-color:#b6eada}.about-container{margin-top:2em;text-wrap:pretty;display:flex;flex-direction:column;font-size:.8rem;max-width:800px;height:fit-content}.about-container .about-body{border:1px solid #5B8FB9;padding:3em}.technology-container{text-wrap:pretty;margin-top:2em;display:flex;flex-direction:column;height:fit-content;max-width:800px}.technology-container .technology-body-container{display:flex;align-items:center;flex-wrap:wrap}.technology-container .technology-box{border:1px solid #5B8FB9;padding:.5em;margin-right:1.1em;margin-bottom:1em;width:20%;display:flex;align-items:center;justify-content:space-between;box-shadow:0 0 #5b8fb9;transition:all .5s ease-in-out}.technology-container .technology-box img{display:block;object-fit:contain;max-width:100%;width:2em;height:2em}.technology-container .technology-box:hover{transform:scale(1.1);color:#b6eada}.logo-wrapper{display:flex;flex-direction:column;justify-content:start;align-items:top;height:200vh}.logo-container{height:fit-content;position:sticky;top:0;padding:.5em 1em;border:1px solid #5B8FB9;width:auto;display:inline-flex;flex-direction:column;align-items:start}.logo-container a{margin-block:.5em}.logo-container img{width:1.5em;height:1.5em;image-rendering:optimizeSpeed}.copyright-notice{position:sticky;top:0;font-size:.5rem;width:1.5em;text-wrap:balance}