@import"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Patrick+Hand+SC&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";*{font-family:poppins;color:#fff;box-sizing:border-box;padding:0;margin:0;font-weight:500;text-decoration:none;scroll-behavior:smooth}button{background:none;border:none;cursor:pointer;display:flex}button img{width:max-content;height:100%;aspect-ratio:auto}nav{height:60px;width:100%;background:linear-gradient(0deg,#160f4353,#2e2469);display:flex;position:fixed;z-index:999;top:0;left:0;flex-direction:row;justify-content:space-between;align-items:center;padding:0 20px}nav .left a{font-family:Patrick Hand SC;font-size:clamp(.6rem,7.5vw,4.5rem)}nav .right button{font-size:clamp(.6rem,7.5vw,4.5rem);height:1.2em}nav .right button img{filter:brightness(0) saturate(100%) invert(100%) sepia(6%) saturate(7500%) hue-rotate(161deg) brightness(112%) contrast(102%)}nav .right .links{display:none}.nav-full{position:fixed;z-index:1000;top:0;right:0;transition:.1s;width:100vw;height:100dvh;background-color:#160f43;max-width:0;overflow:hidden;display:flex;flex-direction:column}.nav-full.active{max-width:100vw}.nav-full .header{height:80px;width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:0 20px}.nav-full .header .left a{font-family:Patrick Hand SC;font-size:clamp(.6rem,7.5vw,4.5rem)}.nav-full .header .right button{font-size:clamp(.6rem,7.5vw,4.5rem);height:1.2em}.nav-full .header .right button img{filter:brightness(0) saturate(100%) invert(100%) sepia(6%) saturate(7500%) hue-rotate(161deg) brightness(112%) contrast(102%)}.nav-full .body{height:100%;display:flex;flex-direction:column}.nav-full .body a{display:flex;align-items:center;padding:20px;background:#140d42;gap:10px}.nav-full .body a img{height:1em;filter:brightness(0) saturate(100%) invert(100%) sepia(6%) saturate(7500%) hue-rotate(161deg) brightness(112%) contrast(102%)}body{display:flex;background:#160f43;flex-direction:column}body .wrapper-user{width:100vw;overflow-x:hidden;min-height:100dvh;display:flex;flex-direction:column}body .wrapper-user .page{height:100dvh;display:flex;flex-direction:column}body .wrapper-user .page.p1{gap:80px;justify-content:center;position:relative;background:radial-gradient(circle,#181045,#150d42 92%)}body .wrapper-user .page.p1 h1{font-size:clamp(.6rem,7.5vw,4.5rem);padding:0 10px;font-weight:500}body .wrapper-user .page.p1 h1 span{font-weight:550;color:#3321a7}body .wrapper-user .page.p1 a{background-color:#3321a7;font-size:clamp(.6rem,4.5vw,3rem);font-weight:400;width:max-content;padding:15px 80px;border-radius:0 20px 20px 0;z-index:1}body .wrapper-user .page.p1 .trinket{position:absolute;right:-200px;height:70%;top:60%;z-index:0;transform:translateY(-50%);width:auto;aspect-ratio:1/1;opacity:.7}body .wrapper-user .page.p1 .trinket img{width:100%;height:100%}body .wrapper-user .page.p2{height:max-content;align-items:center;padding:10dvh 0;background:linear-gradient(0deg,#140d42,#00063a 10%,#0a0c57,#00063a 90%,#140d42)}body .wrapper-user .page.p2 h2{font-size:clamp(.6rem,7.5vw,4.5rem)}body .wrapper-user .page.p2 h3{font-size:clamp(.6rem,4vw,2.5rem);font-weight:400}body .wrapper-user .page.p2 .container-profile{width:100%;padding:40px}body .wrapper-user .page.p2 .container-profile .container-image img{width:100%}body .wrapper-user .page.p2 .container-profile .container-info{display:flex;flex-direction:column;gap:20px}body .wrapper-user .page.p2 .container-profile .container-info .desc p{text-align:center;height:max-content}body .wrapper-user .page.p2 .container-profile .container-info .sosmed{width:100%;height:40px;display:flex;justify-content:center;gap:10px}body .wrapper-user .page.p2 .container-profile .container-info .sosmed a{height:100%}body .wrapper-user .page.p2 .container-profile .container-info .sosmed a img{height:100%;width:auto}body .wrapper-user .page.p3{display:flex;flex-direction:column;align-items:center;background:radial-gradient(circle,#181045,#150d42 92%);gap:10px;height:max-content;padding-bottom:30px}body .wrapper-user .page.p3 h2{font-size:clamp(.6rem,7.5vw,4.5rem);flex-shrink:0}body .wrapper-user .page.p3 .wrapper-scroller{width:100%;height:300px}body .wrapper-user .page.p3 .wrapper-scroller .certificate-scroller{width:100%;height:100%;display:flex;flex-direction:row;overflow:scroll;scroll-snap-type:x mandatory}body .wrapper-user .page.p3 .wrapper-scroller .certificate-scroller .certificate{width:90%;height:100%;padding:10px;display:flex;align-items:center;flex-direction:column;scroll-snap-align:center;gap:5px;flex-shrink:0}body .wrapper-user .page.p3 .wrapper-scroller .certificate-scroller .certificate .wrapper-img{width:100%;height:80%;display:flex}body .wrapper-user .page.p3 .wrapper-scroller .certificate-scroller .certificate .wrapper-img img{width:100%;height:100%;object-fit:contain;object-position:center}body .wrapper-user .page.p3 .wrapper-scroller .certificate-scroller .certificate h2{font-size:clamp(.6rem,4vw,2.5rem);font-weight:400;text-align:center;height:40px}body .wrapper-user .page.p4{background:radial-gradient(circle,#181045,#150d42 92%);display:flex;align-items:center;justify-content:center;padding:0 0 30px;height:max-content}body .wrapper-user .page.p4 h2{font-size:clamp(.6rem,7.5vw,4.5rem);margin-bottom:30px}body .wrapper-user .page.p4 .wrapper-projects{width:100%;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;padding:10px}body .wrapper-user .page.p4 .wrapper-projects .project-card{width:70%;height:auto;text-align:center;flex-direction:column;gap:10px;aspect-ratio:1/1;display:none}body .wrapper-user .page.p4 .wrapper-projects .project-card.mobile-active{display:flex}body .wrapper-user .page.p4 .wrapper-projects .project-card img{width:100%;height:80%;border-radius:10px;object-fit:cover}body .wrapper-user .page.p4 .wrapper-projects .project-card h2{font-size:clamp(.6rem,4vw,2.5rem)}body .wrapper-user .page.p4 .more{font-size:clamp(.6rem,4vw,2.5rem);background-color:#3321a7;padding:10px 20px;border-radius:20px;width:max-content}body .wrapper-user .page.projects{background:radial-gradient(circle,#181045,#150d42 92%);display:flex;align-items:center;justify-content:center;padding:100px 0 30px;height:max-content}body .wrapper-user .page.projects h2{font-size:clamp(.6rem,7.5vw,4.5rem);margin-bottom:30px}body .wrapper-user .page.projects .wrapper-projects{width:100%;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;padding:10px}body .wrapper-user .page.projects .wrapper-projects .project-card{width:70%;height:auto;text-align:center;flex-direction:column;gap:10px;aspect-ratio:1/1}body .wrapper-user .page.projects .wrapper-projects .project-card img{width:100%;height:80%;border-radius:10px;object-fit:cover}body .wrapper-user .page.projects .wrapper-projects .project-card h2{font-size:clamp(.6rem,4vw,2.5rem)}body .wrapper-user .page.projects .detail-project{display:none}body .wrapper-user .page.projects .detail-project.active{display:flex;animation:fadeIn .2s}body .wrapper-user .page.projects .detail-project{flex-direction:column;position:fixed;width:100vw;height:100dvh;z-index:999;padding:10px;top:0;left:0;background-color:#000d}body .wrapper-user .page.projects .detail-project .header{width:100%;height:10%;display:flex;padding:10px;border-radius:10px 10px 0 0}body .wrapper-user .page.projects .detail-project .header h2{font-size:clamp(.6rem,4.5vw,3rem);font-weight:500;width:100%;height:100%;display:flex;align-items:center}body .wrapper-user .page.projects .detail-project .header button{height:100%;width:auto;aspect-ratio:1/1}body .wrapper-user .page.projects .detail-project .header button img{width:100%;height:100%;filter:brightness(0) saturate(100%) invert(100%) sepia(6%) saturate(7500%) hue-rotate(161deg) brightness(112%) contrast(102%)}body .wrapper-user .page.projects .detail-project .body{border-radius:0 0 10px 10px;padding:10px;width:100%;height:100%;display:flex;align-items:center;flex-direction:column}body .wrapper-user .page.projects .detail-project .body .wrapper-img{max-width:100%;width:max-content;height:40%}body .wrapper-user .page.projects .detail-project .body .wrapper-img img{width:100%;height:100%;border-radius:20px;object-fit:contain}body .wrapper-user .page.projects .detail-project .body h4{width:100%;font-size:clamp(.6rem,3.5vw,2rem);font-weight:400}body .wrapper-user .page.projects .detail-project .body h2{margin:0;width:100%;font-size:clamp(.6rem,5.5vw,3.5rem)}body .wrapper-user .page.projects .detail-project .body h5{width:100%;font-weight:300;font-size:clamp(.6rem,2vw,1.5rem)}body .wrapper-user .page.projects .detail-project .body h3{width:100%;font-weight:400;text-align:justify;font-size:clamp(.6rem,3.5vw,2rem);height:100px;overflow:scroll;margin-bottom:10px}body .wrapper-user .page.projects .detail-project .body .container-links{display:flex;height:40px;width:100%;justify-content:end;gap:10px}body .wrapper-user .page.projects .detail-project .body .container-links a{height:100%;width:auto;aspect-ratio:1/1;background-color:#fff;border-radius:999px;padding:5px}body .wrapper-user .page.projects .detail-project .body .container-links a img{width:100%;height:100%}body .wrapper-user .page.projects .detail-project .body .container-links .link{padding:8px}@media(min-width:425px){nav .left a{font-size:clamp(.6rem,4vw,2.5rem)}nav .right button{font-size:clamp(.6rem,4.5vw,3rem)}.nav-full{position:fixed}.nav-full .header .left a,.nav-full .header .right button{font-size:clamp(.6rem,4vw,2.5rem)}body{flex-direction:row-reverse}body .wrapper-user{height:100dvh;overflow:scroll}body .wrapper-user .page.p1{padding:10% 0}body .wrapper-user .page.p1 h1{font-size:clamp(.6rem,5.5vw,3.5rem)}body .wrapper-user .page.p1 a{font-size:clamp(.6rem,2vw,1.5rem)}body .wrapper-user .page.p1 .trinket{top:50%;right:5%;height:80%}body .wrapper-user .page.p2{padding:10% 0}body .wrapper-user .page.p2 h2{font-size:clamp(.6rem,4.5vw,3rem)}body .wrapper-user .page.p2 .container-profile .container-image{display:flex;justify-content:center}body .wrapper-user .page.p2 .container-profile .container-image img{width:50%}body .wrapper-user .page.p2 .container-profile .container-info .desc{height:7em}body .wrapper-user .page.p3 h2{font-size:clamp(.6rem,4.5vw,3rem)}body .wrapper-user .page.p3 .wrapper-scroller .certificate-scroller{padding:0 20px}body .wrapper-user .page.p3 .wrapper-scroller .certificate-scroller .certificate{gap:20px;width:50%}body .wrapper-user .page.p3 .wrapper-scroller .certificate-scroller .certificate h2{font-size:clamp(.6rem,2vw,1.5rem);font-weight:300}body .wrapper-user .page.p4{padding:10% 0}body .wrapper-user .page.p4 h2{font-size:clamp(.6rem,4vw,2.5rem)}body .wrapper-user .page.p4 .wrapper-projects{flex-direction:row;padding:0 10%}body .wrapper-user .page.p4 .wrapper-projects .project-card{display:flex;width:auto;flex:1}body .wrapper-user .page.p4 .wrapper-projects .project-card h2,body .wrapper-user .page.p4 .more{font-size:clamp(.6rem,2vw,1.5rem);font-weight:400}body .wrapper-user .page.projects h2{font-size:clamp(.6rem,3.5vw,2rem)}body .wrapper-user .page.projects .wrapper-projects{gap:10px 20px}body .wrapper-user .page.projects .wrapper-projects .project-card{max-width:40%;border-radius:20px;transition:.4s}body .wrapper-user .page.projects .wrapper-projects .project-card h2{font-size:clamp(.6rem,2vw,1.5rem);font-weight:400}body .wrapper-user .page.projects .wrapper-projects .project-card img{border:2px solid transparent}body .wrapper-user .page.projects .detail-project .header h2{font-size:clamp(.6rem,3.5vw,2rem)}body .wrapper-user .page.projects .detail-project .body h4{font-size:clamp(.6rem,2vw,1.5rem)}body .wrapper-user .page.projects .detail-project .body h2{font-size:clamp(.6rem,4vw,2.5rem)}body .wrapper-user .page.projects .detail-project .body h5{font-size:clamp(.6rem,2vw,1.5rem)}body .wrapper-user .page.projects .detail-project .body h3{font-size:calc(clamp(.6rem,2vw,1.5rem)*1.2)}}@media(min-width:768px){nav .left a{font-size:clamp(.6rem,3.5vw,2rem)}nav .right button{display:none}nav .right .links{display:flex;gap:10px}.nav-full{display:none}body{flex-direction:row-reverse}body .wrapper-user{height:100dvh;overflow:scroll}body .wrapper-user .page.p1{padding:10% 5%}body .wrapper-user .page.p1 h1{font-size:clamp(.6rem,4.5vw,3rem)}body .wrapper-user .page.p1 a{margin-left:10px;font-size:clamp(.4rem,1.25vw,1rem);border-radius:20px}body .wrapper-user .page.p2 h2{font-size:clamp(.6rem,3.5vw,2rem)}body .wrapper-user .page.p2 .container-profile{display:flex;flex-direction:row}body .wrapper-user .page.p2 .container-profile .container-image{display:flex;width:45%;justify-content:center}body .wrapper-user .page.p2 .container-profile .container-image img{width:auto;height:100%}body .wrapper-user .page.p2 .container-profile .container-info{width:55%;justify-content:space-between}body .wrapper-user .page.p2 .container-profile .container-info .desc{height:max-content;display:flex;flex-direction:column}body .wrapper-user .page.p2 .container-profile .container-info .desc p{text-align:left;width:90%;font-weight:400;font-size:clamp(.6rem,3.5vw,2rem)}body .wrapper-user .page.p2 .container-profile .container-info .sosmed{width:90%;justify-content:end}body .wrapper-user .page.p2 h3{font-size:clamp(.6rem,2vw,1.5rem)}body .wrapper-user .page.p3{padding-bottom:0}body .wrapper-user .page.p3 h2{font-size:clamp(.6rem,3.5vw,2rem);margin-bottom:20px;margin-top:10px}body .wrapper-user .page.p3 .wrapper-scroller{height:400px}body .wrapper-user .page.p3 .wrapper-scroller .certificate-scroller{padding:0 20px}body .wrapper-user .page.p3 .wrapper-scroller .certificate-scroller .certificate{gap:20px;width:40%}body .wrapper-user .page.p3 .wrapper-scroller .certificate-scroller .certificate h2{font-size:clamp(.4rem,1.25vw,1rem);font-weight:300}body .wrapper-user .page.p4{padding:10% 0;gap:50px}body .wrapper-user .page.p4 h2{font-size:clamp(.6rem,3.5vw,2rem)}body .wrapper-user .page.p4 .wrapper-projects{flex-direction:row;padding:0 10%;gap:40px}body .wrapper-user .page.p4 .wrapper-projects .project-card{display:flex;width:auto;flex:1}body .wrapper-user .page.p4 .wrapper-projects .project-card h2{font-size:clamp(.4rem,1.25vw,1rem)}body .wrapper-user .page.p4 .wrapper-projects .project-card img{border:2px solid transparent;transition:.2s}body .wrapper-user .page.p4 .wrapper-projects .project-card:hover{background-color:ffffff0a}body .wrapper-user .page.p4 .wrapper-projects .project-card:hover img{border:2px solid #3321A7}body .wrapper-user .page.p4 .more{font-size:clamp(.4rem,1.25vw,1rem)}body .wrapper-user .page.projects h2{font-size:clamp(.6rem,3.5vw,2rem)}body .wrapper-user .page.projects .wrapper-projects{gap:10px 50px}body .wrapper-user .page.projects .wrapper-projects .project-card{max-width:25%;transition:.4s;padding:10px}body .wrapper-user .page.projects .wrapper-projects .project-card img{border:2px solid transparent}body .wrapper-user .page.projects .wrapper-projects .project-card:hover{background-color:#ffffff0a}body .wrapper-user .page.projects .wrapper-projects .project-card:hover img{border:2px solid #3321A7}body .wrapper-user .page.projects .wrapper-projects .project-card:active{scale:.95}body .wrapper-user .page.projects .detail-project .header h2,body .wrapper-user .page.projects .detail-project .body h4{font-size:clamp(.6rem,2vw,1.5rem)}body .wrapper-user .page.projects .detail-project .body h2{font-size:clamp(.6rem,4vw,2.5rem)}body .wrapper-user .page.projects .detail-project .body h5{font-size:clamp(.4rem,1.25vw,1rem)}body .wrapper-user .page.projects .detail-project .body h3{font-size:calc(clamp(.4rem,1.25vw,1rem)*1.3)}body .wrapper-user .page.projects .detail-project .body .container-links{height:40px}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}