@import"https://fonts.googleapis.com/css2?family=Alegreya:wght@400;500;600;700&family=Prata&display=swap";@font-face{font-family:Coconat;src:url(/assets/Coconat-Regular-BDRZM_Ag.otf);font-display:swap}*{padding:0;margin:0;box-sizing:border-box}ul{list-style:none}a{text-decoration:none;color:inherit;cursor:pointer}button{border:none;cursor:pointer;background-color:inherit}h1,h2,h3{font-weight:400}:root{--title: "Coconat", "Prata", serif;--main: #fbfbfb;--contrast: #1b3654;--primary: #bdb7de;--secondary: #b9d0f4;--tertiary: #ffd56a;scroll-behavior:smooth;font-family:Alegreya,Georgia,serif;font-size:16px;font-weight:500;line-height:1.4;color:var(--contrast);background-color:var(--main);padding:0 100px}@-moz-document url-prefix(){:root{font-weight:400}}@media screen and (max-width: 1366px){:root{padding:0 60px}}@media screen and (max-width: 520px){:root{font-size:14px;padding:0 40px}}.wrapper{margin:auto;max-width:1920px}.btn{background-color:var(--tertiary);padding:8px 18px;border-radius:20px}.h2{font-size:1.8rem;font-family:var(--title);position:relative;display:inline-block;margin-bottom:50px;text-align:center}.h2:after{content:url("data:image/svg+xml,%3csvg%20width='162'%20height='23'%20viewBox='0%200%20162%2023'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%20%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M43.1785%2013.7172C36.2186%2015.7048%2028.183%2017.6828%2020.4527%2018.1767C13.8455%2018.5982%207.46356%2017.9435%202.23983%2015.1577C1.50347%2014.7654%200.581354%2015.0351%200.183125%2015.761C-0.215712%2016.4863%200.0586752%2017.3946%200.795035%2017.7874C6.49348%2020.8256%2013.4418%2021.6203%2020.6488%2021.1598C28.5181%2020.6576%2036.6988%2018.6664%2043.7983%2016.6501C44.6221%2018.2939%2046.3279%2019.8264%2049.3329%2020.9571C53.9483%2022.6941%2060.2502%2022.6726%2066.8889%2021.6938C76.5175%2020.2749%2086.8751%2016.8911%2093.5345%2014.4868C93.8077%2014.3887%2094.2144%2014.2326%2094.7122%2014.027C94.8639%2014.357%2095.0339%2014.6823%2095.2221%2015.0016C96.8551%2017.7844%2099.7447%2020.0345%20102.689%2020.8381C121.362%2025.9338%20143.155%2019.8282%20160.9%2014.8593C161.701%2014.6339%20162.168%2013.8063%20161.944%2013.0129C161.713%2012.2194%20160.875%2011.7584%20160.068%2011.9838C142.821%2016.814%20121.647%2022.9082%20103.496%2017.9566C101.262%2017.3467%2099.089%2015.6175%2097.8506%2013.5055C97.711%2013.27%2097.5896%2013.029%2097.4743%2012.7844C99.9207%2011.5903%20102.798%209.92566%20104.346%208.14379C105.937%206.31707%20106.331%204.36718%20104.947%202.52551C103.757%200.951124%20101.954%200.817182%20100.079%201.63338C98.057%202.50757%2095.9748%204.55131%2095.301%205.51041C94.0383%207.30185%2093.6377%209.2452%2093.8684%2011.1401C93.2734%2011.3876%2092.7902%2011.5718%2092.4922%2011.6794C85.9785%2014.0305%2075.8546%2017.3491%2066.4397%2018.737C60.3819%2019.6303%2054.6276%2019.7493%2050.4158%2018.1647C48.6196%2017.4884%2047.4327%2016.6992%2046.7887%2015.7831C48.0598%2015.4088%2049.2855%2015.0405%2050.4565%2014.6889C52.7724%2013.9935%2057.5943%2012.8424%2061.0393%2010.7909C63.779%209.1597%2065.6366%206.94073%2065.5285%204.15909C65.4733%202.73%2064.6337%201.77627%2063.2976%201.2417C61.301%200.443449%2057.848%200.829713%2056.5623%201.09879C52.6626%201.91319%2047.4577%205.28441%2044.8825%209.08315C43.8548%2010.5989%2043.2435%2012.1847%2043.1785%2013.7172ZM46.3819%2012.7832C47.4837%2012.4567%2048.5485%2012.1362%2049.5714%2011.8289C51.7332%2011.1795%2056.2521%2010.1481%2059.4689%208.23226C61.1723%207.21814%2062.563%206.00314%2062.4957%204.27329C62.4902%204.13875%2062.3548%204.10049%2062.2352%204.04548C62.0501%203.96117%2061.8382%203.90315%2061.6124%203.85771C60.0844%203.55037%2058.032%203.84753%2057.1918%204.02333C53.9198%204.70678%2049.5672%207.55599%2047.4066%2010.7436C46.9501%2011.4169%2046.5865%2012.1028%2046.3819%2012.7832ZM96.8672%209.76361C98.2938%209.0407%2099.7872%208.16649%20100.965%207.21516C101.59%206.7099%20102.118%206.1903%20102.452%205.65096C102.731%205.20489%20102.841%204.74803%20102.507%204.30675C102.373%204.12797%20102.173%204.1244%20101.967%204.15789C101.748%204.19376%20101.523%204.27028%20101.299%204.36894C99.8175%205.01113%2098.2877%206.51138%2097.796%207.21516C97.2193%208.03135%2096.934%208.8948%2096.8672%209.76361Z'%20fill='%23B9D0F4'%3e%3c/path%3e%3c/svg%3e");position:absolute;bottom:-35px;left:50%;transform:translate(-50%)}.tags{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.tags li{background-color:var(--primary);padding:2px 8px;border-radius:8px;cursor:default}.relative{position:relative}.absolute{position:absolute}.shadow{box-shadow:0 0 7px -1px #0000000f,0 0 37px -7px #d8d8d8}.underline{position:relative}.underline:before{content:"";display:block;height:4px;width:0%;background-color:var(--secondary);position:absolute;top:100%;transition:.8s width}.underline:hover:before{width:100%}.btn,.tags li{transition:.3s font-size}.btn:hover,.tags li:hover{font-size:1.1rem}header{margin:40px 0 60px}header ul{display:flex;justify-content:space-evenly;flex-wrap:wrap;gap:20px}footer{margin:40px;display:flex;justify-content:center;align-items:center}#hero{display:flex;align-items:center;justify-content:center;column-gap:70px;margin-bottom:60px;animation:slide-on-load 2s 1 forwards cubic-bezier(.34,1.56,.64,1)}#hero .title{font-size:1.3rem;text-align:right}#hero .title h1{font-family:var(--title);font-size:3rem;max-width:460px}#hero .title svg{bottom:0;left:0;z-index:-1}#hero .links{margin-top:20px;display:flex;align-items:center;gap:20px;justify-content:flex-end;text-align:center}#hero .links a.btn{white-space:nowrap}#hero .links svg{top:15px;right:-35px}#hero .img{max-width:min(550px,100%)}#hero .img img{max-width:100%}@media screen and (max-width: 1080px){#hero .title svg{display:none}}@media screen and (max-width: 877px) and (min-width: 690px){#hero{column-gap:30px}#hero .links svg{display:none}}@media screen and (max-width: 690px){#hero{flex-wrap:wrap-reverse}#hero .title{text-align:center}#hero .links{justify-content:center}}@media screen and (max-width: 380px){#hero .title{font-size:1.2rem}#hero .title h1{font-size:2.6rem}#hero .links svg{display:none}}@keyframes slide-on-load{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}#skills{display:flex;flex-direction:column;align-items:center;justify-content:baseline;margin-bottom:40px}#skills .skillsGrid{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));justify-content:center;align-items:baseline;gap:25px 50px}#skills .skill{height:100%;display:flex;flex-direction:column}#skills .skill .header{display:flex;align-items:center;margin-bottom:10px;gap:10px}#skills .skill .header svg{min-width:60px;max-width:100%;max-height:80px}#skills .skill .header h3{flex:1;text-align:center;font-family:var(--title)}#skills .skill .header h3 span{display:inline-block;max-width:200px}#skills .skill p{text-align:justify;margin-bottom:20px}#skills .skill ul{margin:auto auto 0;flex:1;align-items:start}#skills .skill ul li:nth-child(2n){background-color:var(--secondary)}@media screen and (min-width: 1440px){#skills .skillsGrid{max-width:90%}}@media screen and (max-width: 690px){#skills .skillsGrid{gap:25px 30px}}#portofolio{display:flex;flex-direction:column;align-items:center;margin-bottom:50px}#portofolio .h2{margin-bottom:70px}#portofolio .projects{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),2fr));animation-duration:1s;animation-iteration-count:1;animation-fill-mode:forwards}#portofolio .projects .project{display:flex;flex-wrap:wrap;gap:20px}#portofolio .projects .project .img{flex:0 1 250px;overflow:hidden;border-radius:25px}#portofolio .projects .project .img img{max-width:100%;height:100%;object-fit:cover;transition:.4s transform}#portofolio .projects .project .img:hover img{transform:scale(1.1)}#portofolio .projects .project .header{flex:1 4 200px;display:flex;flex-direction:column;align-items:start;gap:20px;max-width:900px}#portofolio .projects .project .header h3{font-family:var(--title);font-size:1.5rem;margin-bottom:-10px}#portofolio .projects .project .header .links{display:flex;align-items:center;gap:15px}@media screen and (min-width: 960px) and (max-width: 1100px){#portofolio .projects{grid-template-columns:1fr 1fr 1fr}#portofolio .project{justify-content:center}}@media screen and (max-width: 510px) and (min-width: 380px){#portofolio .projects{grid-template-columns:1fr 1fr}}@media screen and (max-width: 380px){#portofolio .project{justify-content:center}#portofolio .project .header{align-items:center!important;text-align:justify;max-width:270px}#portofolio .project .header h3{text-align:center}}.projects.fade-in{animation-name:fade-in}.projects.fade-out{animation-name:fade-out}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.toggle{--button-size: 50px;width:calc(var(--button-size) * 2);height:var(--button-size);border-radius:var(--button-size);padding:4px;border:2px solid var(--primary);box-sizing:content-box;margin-bottom:40px}.toggle button,.toggle svg{animation-duration:1s;animation-iteration-count:1;animation-fill-mode:forwards}.toggle button.forward{animation-name:toggle-forward}.toggle button.forward svg{animation-name:go-up}.toggle button.backward{animation-name:toggle-backward}.toggle button.backward svg{animation-name:go-down}.toggle button{height:var(--button-size);width:var(--button-size);border-radius:50%;border:var(--primary) solid 2px;padding:0 10px;overflow:hidden}.toggle button svg{height:100%;max-width:100%;position:relative}button.design{transform:translate(100%)}button.design svg{transform:translateY(-105%)}button.dev{transform:translate(0)}button.dev svg{transform:translate(0)}@keyframes go-up{0%{transform:translateY(0)}to{transform:translateY(-105%)}}@keyframes go-down{0%{transform:translateY(-105%)}to{transform:translateY(0)}}@keyframes toggle-forward{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes toggle-backward{0%{transform:translate(100%)}to{transform:translate(0)}}#contact{display:flex;flex-direction:column;align-items:center}#contact .h2{margin-bottom:60px}#contact .contacts{max-width:865px;padding:40px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:40px}#contact .contacts>svg{z-index:-1}#contact .contacts .svg-bottom{bottom:-50px;left:-60px}#contact .contacts .svg-top{top:-35px;right:-50px}#contact .contacts div{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;min-width:200px;gap:20px}@media screen and (max-width: 480px){#contact .contacts{padding:40px 20px}#contact .contacts>svg{max-width:80px}#contact .contacts .svg-bottom{left:-30px}#contact .contacts .svg-top{right:-30px}}#notFound{min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:1.2rem;text-align:center}#notFound h1{font-size:8rem;margin-top:-80px}#notFound a{font-weight:700}#project{display:grid;width:100%;gap:40px;grid-template-columns:minmax(200px,300px) minmax(420px,1fr)}@media screen and (max-width: 768px){#project{grid-template-columns:1fr;gap:20px}}#project h1,#project h2{font-family:var(--title)}#project h2{font-size:1.6rem}#project .img,#project .tools{border-radius:8px}#project .img{overflow:hidden;max-width:300px}#project .img img{object-fit:cover;width:100%;height:100%;transition:.4s transform}#project .img:hover img{transform:scale(1.1)}#project .header h1{font-size:3rem}#project .header p{white-space:pre-line}#project .tools{padding:10px;display:flex;flex-direction:column;align-items:center}#project .tools ul{display:flex;justify-content:center;gap:30px;margin:0 0 20px;flex-wrap:wrap}#project .tools ul li{display:flex;flex-direction:column;align-items:center}#project .tools ul li svg{transition:.5s}#project .tools ul li svg:hover{transform:rotate(360deg)}#project .showcase{display:flex;flex-direction:column;row-gap:10px}#project .showcase h2{margin-bottom:10px}#project .showcase ul{display:flex;gap:10px;flex-wrap:wrap}