.information{grid-area:information}:root{--blue:#006bd6;--green:#1a6a17;--kamon:#d6b400;--whiteGreen:#f5fff5;--whiteGreen1:#bed1be;--whiteBlue:#147fea;--whiteBlue1:#cee6ff;--whiteKamon:#fff4bb;--red:#e85050;--gray:#b5b5b5;--black:#3d3c3c}@media only screen and (max-width:600px){.main .primaryInfo .name{margin:10px 5px}.main .primaryInfo .stack{margin:10px 25px}.main .resume{font-size:13px;margin:0 25px}.main .contacts{bottom:0;position:absolute;width:calc(100% - 38px)}}@media only screen and (min-width:601px){.main{display:grid;grid-template-areas:"primaryInfo primaryInfo" "resume contacts";position:relative;top:12px}.main .primaryInfo{grid-area:primaryInfo;left:24%;position:relative;width:-webkit-max-content;width:max-content}.main .resume{font-size:15px;grid-area:resume;width:203px}.main .contacts{grid-area:contacts}}.main .primaryInfo .name{color:var(--green);font-size:20px;font-weight:700}.main .primaryInfo .stack{color:var(--gray);font-size:15px}.main .resume{color:var(--black)}.main .contacts{align-items:center;display:flex;flex-direction:column}.main .contacts .contact{display:flex;padding:5px}.main .contacts .contact>a{color:var(--red);margin-left:20px}@media only screen and (max-width:600px){.navbar{align-items:center;background-color:var(--whiteGreen);border-radius:0 15px 15px 0;flex-direction:column;height:456px;justify-content:space-evenly;width:39px}.navbar .button{display:flex;height:25px;position:relative;width:25px}.active{background-color:var(--green);height:60px;position:absolute;right:-9px;top:-17px;width:2px}}@media only screen and (min-width:601px){.navbar{align-items:center;height:48px;justify-content:space-between;left:126px;position:absolute;top:0;width:456px}.navbar .button{align-items:center;display:flex;height:35px;justify-content:center;padding:0;width:66px}.activeTabWidthScreen,.navbar .button:hover{background-color:var(--whiteBlue);border-radius:5px}}.navbar{display:flex;grid-area:nav}.navbar .button{cursor:pointer}@media only screen and (max-width:600px){.projects{grid-gap:5px;align-content:start;justify-content:center;left:5px;width:calc(100% - 5px)}}@media only screen and (min-width:601px){.projects{grid-gap:5px;justify-content:center;margin:5px;top:40px}}.projects{flex-wrap:wrap;font-size:12px}.project,.projects{display:flex;position:relative}.project{align-items:center;border:.5px solid var(--blue);border-radius:15px;flex-direction:column;height:90px;padding:5px 0;text-decoration:none;width:175px}.projects .project .name{color:var(--blue);font-size:17px}.projects .project .date{color:var(--kamon)}.projects .project .tags{border:.5px solid var(--blue);border-radius:8px;bottom:10px;color:var(--blue);display:flex;left:10px;padding:5px;position:absolute}.projects .project .tags .tag{margin:0 5px}@media only screen and (max-width:600px){.skills{align-content:flex-start;justify-content:center;margin:0 auto;width:200px}.mask{align-items:center;background:#fff;display:flex;font-size:12px;height:70px;justify-content:center;text-align:center;width:70px}.mask,.pie{border-radius:50%;position:relative}.pie{--w:80px;aspect-ratio:1;background:#f8c7c7;display:inline-grid;font-size:25px;font-weight:700;margin:5px;place-content:center;width:var(--w)}.pie:before{background:conic-gradient(var(--progress) calc(var(--p)*1%),var(--backgroundProgress) 0);border-radius:50%;content:"";inset:0;position:absolute}}@media only screen and (min-width:601px){.skills{height:202px;justify-content:space-evenly;position:relative;top:20px}.skill{align-items:center;display:flex}.skill .containerProgress{background-color:var(--backgroundProgress);border-radius:22px;height:8px;margin-left:5px;width:85px}.skill .containerProgress .progress{background-color:var(--progress);border-radius:22px;height:100%;width:calc(var(--p)*.85)}}.skills{display:flex;flex-wrap:wrap}@media only screen and (max-width:600px){.app{grid-row-gap:15px;display:grid;grid-template-areas:"appBar appBar" "nav information";grid-template-columns:38px;grid-template-rows:60vw;row-gap:15px}.appbar .avatar{left:50%;-webkit-transform:translateX(-47.5px);transform:translateX(-47.5px)}.uiMadeBy{background-color:var(--whiteGreen);border-radius:5px;bottom:-10px;left:5px;padding:3px;position:absolute!important}}@media only screen and (min-width:601px){.app{width:600px}.appbar .avatar{left:24px;top:0!important}.uiMadeBy{bottom:17px;left:140px}}body{margin:0;padding:0}*{font-family:Segoe UI}.commingSoon{font-size:30px}.app{margin:0 auto;position:relative}.app .content{grid-area:_content}.appBarCurve{width:100%}.appbar{grid-area:appBar;position:relative}.appbar .avatar{background-color:#fff;background-image:url(/portofolio/static/media/avatar.16e7d2274291b29ed226.jpg);background-size:contain;border:5px solid var(--blue);border-radius:50%;height:95px;position:absolute;top:22vw;width:95px}.uiMadeBy{position:relative;width:-webkit-max-content;width:max-content}.uiMadeBy .name{color:var(--red);font-size:15px}