body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--baby-blue:#59a7ce;--dark-blue:#1e485d;--section-color:#65b9e328}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Josefin Sans,sans-serif}.contact-button{background-color:#59a7ce;background-color:var(--baby-blue);border-radius:50px;color:#fff;font-size:18px;font-weight:700;margin-top:60px;padding:20px 40px;text-align:center;text-decoration:none;transition:all .3s}.App{overflow:hidden;width:100%}.item-enter{opacity:0}.item-enter-active{opacity:1;transition:opacity 2s}.item-exit{opacity:1}.item-exit-active{opacity:0;transition:opacity 2s}.carpet-enter{opacity:0;-webkit-transform:translateY(-190px);transform:translateY(-190px)}.carpet-enter-active{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);transition:all .5s}.carpet-exit{opacity:1;-webkit-transform:translateY(-190px);transform:translateY(-190px)}.carpet-exit-active{opacity:0;-webkit-transform:translateY(0);transform:translateY(0);transition:all .5s}.content-enter{opacity:0;-webkit-transform:translateX(-190px);transform:translateX(-190px)}.content-enter-active{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);transition:all 1s}.content-exit{opacity:1;-webkit-transform:translateX(-190px);transform:translateX(-190px)}.content-exit-active{opacity:0;-webkit-transform:translateX(0);transform:translateX(0);transition:all 1s}.container{align-items:flex-start;gap:100px;padding:0 80px}.container,.container .img{display:flex;justify-content:center}.container .img{align-items:center;background-color:#1e485d;background-color:var(--dark-blue);border-radius:0 0 280px 280px;height:100vh;overflow:hidden;width:100%}.container .img img{bottom:-55px;display:none;position:relative;width:100%}.container .header{display:flex;flex-direction:column;flex-wrap:nowrap;width:100%}.container .navbar{align-items:center;background-color:#fff;display:flex;flex-direction:row;gap:30px;height:90px;justify-content:center;width:100%}.logo img{height:70px;margin-left:50px;width:70px}.links-container{text-align:right;width:100%}.toggle-menu{background:none;border:none;cursor:pointer;display:none;position:relative;transition:all .3s;width:30px}.toggle-menu.menu-active:before{border:10px solid transparent;border-bottom-color:#1e485d;border-color:transparent transparent var(--dark-blue) transparent;bottom:-10px;content:"";left:50%;margin-left:-10px;position:absolute}.toggle-menu:focus{outline:none}.toggle-menu span{background-color:#1e485d;background-color:var(--dark-blue);border-radius:4px;display:block;height:3px;margin-bottom:4px}.container .navbar ul{align-items:center;display:flex;font-weight:500;justify-content:space-between;list-style:none;transition:all .3;width:100%}.container .navbar ul a{color:#1e485d;color:var(--dark-blue);cursor:pointer;font-size:23px;text-decoration:none;transition:all .3s}.container .brief .name,.container .navbar ul a:hover{color:#59a7ce;color:var(--baby-blue)}.container .brief .name{font-size:25px;font-weight:600;margin-top:50px}.container .brief h1{font-size:60px;margin:50px 0}.container .brief .quote{font-size:22px;font-weight:700;font-weight:500;letter-spacing:.1em;line-height:1.7;margin-bottom:70px}.container .brief .button{font-size:22px;padding:30px 80px}.container .brief .button:hover{background-color:#1e485d;background-color:var(--dark-blue);box-shadow:0 1px 10px 1px #1e485d;box-shadow:0 1px 10px 1px var(--dark-blue);color:#59a7ce;color:var(--baby-blue)}.stats{margin:100px 0;padding:0 180px}.stats ul{justify-content:space-between;list-style:none}.stats ul,.stats ul li{align-items:center;display:flex}.stats ul li{flex-wrap:wrap;gap:20px;justify-content:center}.stats ul h2{color:#1e485d;color:var(--dark-blue);font-size:70px;font-weight:700;height:100%}.stats ul p{font-size:20px;font-weight:500;line-height:1.8}@media (max-width:992px){.container{flex-direction:column-reverse;padding:0 20px;text-align:center}.navbar .logo img{margin:0}.container .navbar{flex-direction:row-reverse;justify-content:space-between;padding-right:0}.container .links-container ul{display:none;opacity:0;transition:all .3s}.container .links-container ul.active{background-color:#1e485d;background-color:var(--dark-blue);border-radius:5px;display:block;left:0;padding:10px;position:absolute;top:80px;width:100%}.container .links-container ul.active li{color:#fff;margin-top:15px;text-align:left}.container .links-container .toggle-menu{display:inline-block}.container .img{display:none}.container .brief h1{font-size:40px}.container .brief .quote{font-size:17px}.container .brief .button{font-size:17px;padding:20px 50px}.stats ul{flex-direction:column;text-align:center}.stats ul li{margin:25px 0}.stats ul h2{font-size:40px}.stats ul p{font-size:20px;line-height:1.6}}.work{align-items:center;background-color:#65b9e328;background-color:var(--section-color);border-radius:100px;display:flex;flex-direction:row;flex-wrap:wrap;gap:40px;justify-content:space-between;padding:80px;-webkit-user-select:none;user-select:none}.work .portofolio{width:45%}.work .portofolio h2{color:#1e485d;color:var(--dark-blue);font-size:45px;margin-bottom:40px}.work .portofolio p{font-size:23px;line-height:1.7}.work .snippets{display:flex;flex-direction:column;gap:50px;justify-content:space-between;width:40%}.work .snippets .snippet{align-items:center;background-color:#59a7ce;background-color:var(--baby-blue);border-radius:30px;display:flex;justify-content:center;padding:30px}.work .snippets .snippet img{border-radius:30px;max-width:100%}.work .slider{background-color:#59a7ce;background-color:var(--baby-blue);border-radius:40px;height:600px;margin-top:70px;overflow:hidden;z-index:-100}.work .slider,.work .slider .images{align-items:center;display:flex;justify-content:center}.work .slider .images{height:450px;position:relative;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;z-index:10}.work .slider .images,.work .slider img{-webkit-transform-origin:bottom;transform-origin:bottom;width:275px}.work .slider img{border-radius:20px;cursor:pointer;height:490px;position:absolute;transition:all .3s}.work .slider img:first-of-type{-webkit-transform:translate(0);transform:translate(0)}.work .controls{align-items:center;display:flex;height:60px;justify-content:space-around;width:100%}.work .controls svg{color:#59a7ce;color:var(--baby-blue);cursor:pointer;height:50px;transition:-webkit-transform .3s ease-in;transition:transform .3s ease-in;transition:transform .3s ease-in,-webkit-transform .3s ease-in;width:50px}.work .controls svg:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}@media (max-width:767px){.work{flex-direction:column;overflow:hidden;padding:0;text-align:center}.work .portofolio{width:80%}.work .portofolio h2{font-size:25px;font-weight:700;margin-top:50px;padding:0}.work .portofolio p{font-size:18px}.work .snippets{display:none}}.skills{background-color:#65b9e328;background-color:var(--section-color);border-radius:100px;padding:80px}.skills h2{color:#60b5df;font-size:45px;font-weight:700;margin:50px 0 100px;text-align:center}.skill-grid{grid-column-gap:100px;grid-row-gap:50px;-webkit-column-gap:100px;column-gap:100px;display:grid;grid-template-columns:auto auto;row-gap:50px}.skill-grid .skill{border-radius:30px;box-shadow:0 0 15px #808d99;padding:30px}.skill-grid .skill h3{color:#1e485d;color:var(--dark-blue);font-size:32px}.skill-grid .skill p{color:#1e485d;font-size:23px;margin-bottom:30px}.skill-grid .skill div{align-items:center;display:flex;gap:25px;justify-content:flex-start;margin-bottom:30px}.skill-grid .skill div img{width:50px}@media (max-width:992px){.skills{padding:100px 0}.skills h2{font-size:27px}.skill-grid{grid-template-columns:auto;margin:auto;width:90%}.skill{align-items:center;display:flex;flex-direction:column;margin:auto;text-align:center;width:95%}.skill-grid .skill div h3{font-size:20px}.skill-grid .skill p{font-size:18px}}.technologies{align-items:center;display:flex;flex-direction:column;justify-content:center;margin:100px 0;padding:0 120px}.technologies h2{color:#1e485d;color:var(--dark-blue);font-size:45px;margin-bottom:40px}.technologies .frameworks,.technologies .fundamentals{align-items:center;border-radius:20px;box-shadow:1px 3px 18px #808d99;display:flex;gap:60px;gap:300px;justify-content:space-around;margin-top:50px;padding:40px}.technologies .frameworks{flex-direction:row-reverse}.technologies .frameworks img,.technologies .fundamentals img{width:400px}.technologies .frameworks h3,.technologies .fundamentals h3{font-size:32px;font-weight:700;margin-bottom:40px}.technologies .frameworks p,.technologies .fundamentals p{font-size:23px}@media (max-width:992px){.frameworks,.technologies{padding:0 50px}.technologies h2{font-size:25px;line-height:1.7;text-align:center}.technologies .frameworks,.technologies .fundamentals{flex-direction:column;font-size:18px;gap:80px;text-align:center;width:100%}.technologies .frameworks img,.technologies .fundamentals img{max-width:200px}.technologies .details h3{font-size:25px}.technologies .details p{font-size:18px}}.contact{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding:100px 0;text-align:center;width:100%}.contact h3{color:#1e485d;color:var(--dark-blue);font-size:45px;font-weight:700;line-height:1.8;margin-bottom:50px}.contact p{color:#59a7ce;color:var(--baby-blue);font-size:22px;line-height:1.6}.contact a:hover{background-color:#63beec}footer{align-items:center;background-color:#65b9e328;background-color:var(--section-color);display:flex;gap:300px;justify-content:center;padding:20px 100px}footer div p{font-size:18px}footer .flex div{align-items:flex-start;display:flex;font-size:24px;gap:30px;justify-content:flex-start;margin-bottom:10px}footer .flex div:not(.links){font-size:20px;gap:20px}footer div svg:first-child{background-color:#fff}footer div svg{border-radius:8px;width:40px}footer div svg.face{color:#4267b2}footer div svg.linked{color:#0077b5}footer div svg.git{color:#000}footer div svg.phone{color:#59a7ce;color:var(--baby-blue)}footer div svg.yahoo{color:#430297}@media (max-width:767px){.contact p{font-size:18px}.contact a{font-size:20px;padding:22px 50px}footer{flex-direction:column-reverse;gap:40px;text-align:center}footer .flex div{align-items:center;justify-content:space-between}}
/*# sourceMappingURL=main.ddf9deed.css.map*/