html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1.54}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #22c55e;--black: #000;--white: #fff;--blue: royalblue;--purple: darkorchid;--line: rgba(255, 255, 255, .1);--muted: rgba(255, 255, 255, .75);--netral: rgba(25, 25, 25, .25);--padding: 1em}html,body{width:100vw;font-family:Roboto,sans-serif;font-size:16px;background-color:var(--black);color:var(--white);overflow-x:hidden}p{font-family:Open Sans}h1,h2,h3,h4,h5,h6{font-family:Montserrat}html::-webkit-scrollbar{background-color:#000;width:8px}html::-webkit-scrollbar-thumb{background-color:var(--primary);border-radius:.2em}h1,h2,h3,h4,h5,h6{font-weight:700}h1{font-size:2em;line-height:1.2}h2{font-size:1.75em;line-height:1.3}h3{font-size:1.5em;line-height:1.4}h4{font-size:1.25em;line-height:1.4}h5{font-size:1em;line-height:1.5}h6{font-size:.875em;line-height:1.5}button{display:flex;justify-content:center;align-items:center;gap:.4em;background-color:inherit;border:none;color:var(--white);border-radius:.1em;padding:.2em .5em}button:hover{cursor:pointer;background-color:var(--primary)}p{margin:.25em 0}a.active{text-decoration:underline;text-underline-offset:.7em;color:var(--primary)}a:hover{color:var(--primary)}img{width:100%}a{color:inherit;text-decoration:none}img,a{-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.hidden{display:none!important}section{padding:var(--padding) 0}.title-section{margin-bottom:var(--padding);display:flex;gap:var(--padding);font-weight:400;text-wrap:nowrap}.load-more{margin:auto;margin-top:var(--padding);background-color:var(--primary)}.loading{display:block;width:39px;aspect-ratio:1 / 1;margin:auto;margin-top:var(--padding)}.highlight{color:var(--primary)}.line{width:100%;height:1px;background-color:var(--line);margin:auto 0}.container{max-width:1080px!important;margin:auto!important;padding-left:1em!important;padding-right:calc(1em + 18px)!important}nav{padding:var(--padding) 0}.inner-nav{display:flex;align-items:center}.navigation{display:flex;justify-content:center;width:100%;gap:1em}.logo{width:60px;aspect-ratio:1 / 1}.inner-introduction{display:flex;flex-direction:column;gap:var(--padding)}.inner-introduction .description{display:flex;flex-direction:column;gap:.2em}.inner-introduction .social{display:flex;justify-content:space-between}.inner-introduction .technology{display:flex;flex-direction:column}.technology ul{font-size:1.8em;display:flex;gap:.5em}.social .contact{display:flex;gap:var(--padding)}.social button{padding:.4em .8em}button.whatsapp{background-color:var(--primary)}.social ul{font-size:1.8em;display:flex;gap:1em}.skills{margin-top:var(--padding);display:grid;gap:4em;justify-content:center;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.skill{aspect-ratio:1 / 1;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5em}.icon-skill{cursor:pointer;display:flex;font-size:80px}.skill .level{font-size:12px;position:absolute;top:0;right:0;padding:.2em .5em;border-radius:.2em}.skill p{text-align:center}.basic{background-color:var(--blue)}.intermediate{background-color:var(--purple)}.fluent{background-color:var(--primary)}ul.projects{display:grid;gap:2em;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.project{aspect-ratio:3 / 4;cursor:pointer;position:relative;display:flex;flex-direction:column;gap:1em;border-radius:.2em 2em 0 0;background-color:var(--netral);height:100%;width:100%;max-width:320px;min-width:280px;margin:auto}.title-project{font-size:1.2rem}.project .description{padding:0 .5em}.project .description p{display:-webkit-box;-webkit-box-orient:vertical;line-clamp:3;overflow:hidden;text-overflow:ellipsis}.project img{object-fit:fill;height:150px;border-radius:.2em 2em 0 0}.project .libraries{display:flex;gap:1em;font-size:1.2rem;margin-top:.5em}.project .lib{display:flex;justify-content:center;align-items:center}.project .action{font-size:1.5rem;padding:.2em;position:absolute;bottom:0;width:100%;display:flex;justify-content:space-between;gap:1em;margin-top:2em;border-top:2px solid var(--black)}.project .action a{display:flex;align-items:center;justify-content:center;padding:.4em .5em;width:100%;border:inset 10px solid var(--black)}.videos{display:grid;gap:2em;justify-content:center;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}.videos iframe{width:100%;aspect-ratio:16 / 9}.platform-lists{display:grid;gap:1em;grid-template-columns:1fr 1fr 1fr 1fr}.platform{width:100%;margin:auto;max-width:200px}.platform a{display:flex;justify-content:center;align-items:center}.platform a:hover{color:inherit}.samples{display:grid;gap:2em;justify-content:center;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.sample{display:flex;flex-direction:column;align-items:center;cursor:pointer;position:relative;overflow:hidden}.sample:hover img{transition:.5s linear;width:108%;height:125%}.sample .top{font-size:1.5em;top:5%;right:6%;position:absolute}.sample .bottom{display:inline-block;width:90%}.sample .bottom p{text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.platform,.sample .thumbnail{display:flex;justify-content:center;align-items:center;font-size:120px;aspect-ratio:1 / 1;border-radius:.2em;overflow:hidden}.thumbnail{width:100%}.sample img{transition:.5s linear;width:100%;height:118%}.portofolio-page a{text-decoration:underline;text-underline-offset:.25em}.portofolio-page p{max-width:750px}.portofolio-page .circle{margin-left:1.2em;list-style:circle;display:flex;flex-direction:column;gap:.2em}.circle li div{margin-top:.2em;padding:.2em 0}.portofolio-page .show{background-color:var(--primary);padding:0 .5em;display:inline-block;margin:.2em 0}.portofolio-page .line{margin:1em 0;border-color:var(--netral)}.portofolio-page .container{max-width:900px!important}.portofolio-page .date{font-size:11px;color:var(--muted)}.portofolio-page h1,.portofolio-page h2,.portofolio-page h3,.portofolio-page h4,.portofolio-page h5,.portofolio-page h6,.portofolio-page p,.portofolio-page li{padding:0!important;margin:0!important;line-height:1.3}section.about-portofolio,section.experiences-portofolio,section.education-portofolio,section.skills-portofolio{padding:0;margin:0}section.about-portofolio .container,section.experiences-portofolio .container,section.education-portofolio .container,section.skills-portofolio .container{display:flex;flex-direction:column;gap:.5em}section.about-portofolio{padding-top:1.5em}section.about-portofolio .top{display:flex;justify-content:space-between}section.about-portofolio .top ul{display:flex;flex-direction:column;gap:.2em}section.about-portofolio .top li{text-align:end;display:flex;gap:.5em;justify-content:end;align-items:center}section.experiences-portofolio{padding-top:0}section.experiences-portofolio iframe{width:100%;aspect-ratio:16 / 9;border-radius:.2em}section.experiences-portofolio .pictures{display:grid;justify-content:start;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.5em}section.experiences-portofolio .pictures img{aspect-ratio:1 / 1;border-radius:.2em}section.education-portofolio{padding-top:0}section.skills-portofolio{padding-bottom:1.5em}.me{cursor:pointer;aspect-ratio:1 / 1;max-width:150px;border-radius:50%}footer{width:100%;border-top:2px solid var(--netral);color:var(--muted);font-size:.66em;display:flex;align-items:center;justify-content:center;padding:var(--padding) 0}@media screen and (max-width: 681px){.social{flex-direction:column;gap:3em}.portofolio-page .top .contact-portofolio{display:none}.platform{font-size:80px}.skills{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.icon-skill{font-size:50px}.social ul{justify-content:space-around}}@media screen and (max-width: 500px){h1,h2,h3,h4,h5,h6{line-height:1.15}h3{font-size:1.6em}body{line-height:1.45}.inner-introduction .description{gap:.5em}.logo{width:50px}.skills{grid-template-columns:1fr 1fr}ul.projects{gap:3em}.platform{font-size:43px}.samples{grid-template-columns:1fr 1fr}.sample .top{font-size:1.2em}}