@import"https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&family=Noto+Sans:wght@400;700&display=swap";@keyframes fade-in{0%{opacity:0}to{opacity:1}}.navbar{display:grid;grid-template-rows:80px 1fr;grid-template-columns:1fr 1fr;justify-items:center;align-items:center;padding:0 16px;background-color:#f7f7f7}.navbar .logo{justify-self:start;height:auto}.navbar .logo:hover{cursor:pointer}.navbar .icon-container{grid-column:3;justify-self:end;width:24px;height:24px;color:#262626}.navbar .icon-container .icon{display:block;margin:0 auto}.navbar .icon-container:hover{cursor:pointer}.navbar .list{display:none;font-size:26px;grid-column:1/3}.navbar .list li{list-style:none;min-width:64px;text-align:center}.navbar .list li a{text-decoration:none;color:#262626}.navbar .list li a:after{content:"";display:block;width:0;height:4px;margin:4px auto 0;border-radius:4px;transition:all .3s}.navbar .list li a.active{font-weight:700}.navbar .list li a.active:after{width:24px;background-color:#262626}.navbar.expanded{height:100%;transition:all 2s}.navbar.expanded .list{display:flex;flex-direction:column;gap:16px;animation:fade-in .5s}@media only screen and (min-width: 576px){.navbar{grid-template-columns:min-content 1fr;grid-template-rows:80px;gap:16px}.navbar .icon-container{display:none}.navbar .list{display:flex;gap:16px;font-size:16px;grid-column:2/3}}@media only screen and (min-width: 900px){.navbar{justify-items:start}}body:has(.navbar.expanded){overflow:hidden}header:has(.navbar.expanded){height:100svh}.footer{width:100%;padding:48px 16px;margin-top:42px;border-top:1px solid #262626}.footer .footer-logo{display:block;margin-bottom:24px}.footer .footer-logo img{height:24px}.footer .footer-list{list-style:none;margin-bottom:24px}.footer .footer-list li{display:inline-block;margin-right:16px}.footer .footer-list li a{color:#262626;text-decoration:none}.footer .footer-list li a:hover{color:#5f717b}.footer .footer-copyright{font-size:16px}.typist{position:relative;white-space:pre-wrap}.typist .character{visibility:hidden}.typist .character.visible{opacity:1;visibility:visible}.typist .cursor{position:absolute;top:0;left:0;font-weight:bolder;line-height:1.2;animation:blink 1s linear infinite}@keyframes blink{0%{opacity:1}to{opacity:0}}@media only screen and (min-width: 576px){.contact .form{grid-template-columns:repeat(2,minmax(180px,1fr))}}*{box-sizing:border-box;padding:0;margin:0}html{scroll-behavior:smooth}body{max-width:1200px;margin:0 auto;font-size:16px;font-family:Noto Sans,sans-serif;color:#262626;background-color:#f7f7f7}header{position:sticky;top:0;z-index:1;margin-top:32px;margin-bottom:64px}main{min-height:calc(100svh - 176px);padding:0 16px}.typist{height:162px;margin-bottom:56px;font-size:42px;font-weight:700;line-height:54px}@media only screen and (max-width: 576px){.typist{white-space:normal}}@media screen and (min-width: 768px){.typist{height:auto}}.input-group .input{position:relative;display:flex;gap:16px;align-items:center;height:56px;padding-left:12px;padding-right:16px;border-radius:4px;outline:1px solid #262626;transition:outline .1s;cursor:text}.input-group .input .icon{display:flex;justify-content:center;align-items:center;width:24px;height:24px;overflow:hidden}.input-group .input label{position:absolute;top:30%;left:48px;font-size:16px;transition:left .1s,top .1s,font-size .1s;cursor:text}.input-group .input input{appearance:none;outline:none;border:none;width:100%;height:100%;font-size:16px;background-color:transparent;font-family:Noto Sans,sans-serif}.input-group .input.filled{outline:1px solid #262626}.input-group .input.focused{outline:2px solid #262626}.input-group .input.invalid{outline:2px solid #e34234}.input-group .input.invalid label{color:#e34234}.input-group .input.focused label,.input-group .input.filled label{top:-10px;left:12px;padding:0 4px;background-color:#f7f7f7;font-size:12px}.input-group .supporting-text{padding:4px 16px 0;font-size:12px;word-wrap:break-word;min-height:22px}.input-group .supporting-text.invalid{color:#e34234}.textarea-group .textarea{position:relative;height:112px;outline:1px solid #262626;border-radius:4px}.textarea-group .textarea label{position:absolute;top:16px;left:16px;font-size:16px;transition:left .1s,top .1s,font-size .1s;cursor:text}.textarea-group .textarea textarea{appearance:none;border:none;resize:none;outline:none;width:100%;height:100%;padding:16px;border-radius:4px;background-color:transparent;font-size:16px;font-family:Noto Sans,sans-serif}.textarea-group .textarea.filled{outline:1px solid #262626}.textarea-group .textarea.focused{outline:2px solid #262626}.textarea-group .textarea.invalid{outline:2px solid #e34234}.textarea-group .textarea.invalid label{color:#e34234}.textarea-group .textarea.focused label,.textarea-group .textarea.filled label{top:-10px;left:12px;padding:0 4px;background-color:#f7f7f7;font-size:12px}.textarea-group .supporting-text{padding:4px 16px 0;font-size:12px;word-wrap:break-word;min-height:22px}.textarea-group .supporting-text.invalid{color:#e34234}.button{display:flex;justify-content:center;align-items:center;gap:8px;width:100%;height:56px;border:none;border-radius:20px;cursor:pointer;font-family:Noto Sans,sans-serif;font-size:16px;color:#f7f7f7;background-color:#262626;transition:background-color .2s}.button:hover,.button:focus{background-color:#333;outline:#262626}.button:disabled{background-color:#404040}.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(312px,1fr));gap:72px}.contact h2{margin-bottom:20px;font-size:42px;font-weight:400}.contact .form{display:grid;column-gap:16px;row-gap:4px}.contact .form .textarea-group,.contact .form .button{grid-column:1/-1}.contact .links{list-style:none;display:flex;flex-wrap:wrap;gap:8px}.contact .links .link{display:flex;justify-content:center;align-items:center;width:48px;height:48px;color:#262626;border-radius:24px;outline:1px solid #262626}.contact .links .link:hover,.contact .links .link:focus,.contact .links .link:active{outline:2px solid #262626}.contact .links .link:active{color:#f7f7f7;background-color:#262626}.grecaptcha-badge{visibility:hidden}.grecaptcha-notice{grid-column:1/-1;margin:16px 8px 0;text-align:center;font-size:12px;color:#889ba8}.error-page{max-width:440px;margin:0 auto}@media only screen and (min-width: 900px){.error-page{margin:0}.error-page:has(.error){max-width:100%}}.error-page .message{font-family:"Noto Serif",serif;font-size:20px;margin-bottom:32px}.error-page .link{display:block;width:100%;padding:10px 24px;border-radius:20px;outline:1px solid #262626;text-wrap:nowrap;text-align:center;text-decoration:none;color:inherit}.error-page .link:hover{outline-width:2px}@media only screen and (min-width: 900px){.error-page .link{width:min-content}}.error-page .error{margin-top:32px}.error-page .error .error-message{font-size:26px;margin-bottom:16px}.error-page .error .error-stack{width:100%;overflow-y:auto}main:has(.error-page) .typist{max-width:440px;height:auto;margin-left:auto;margin-right:auto;white-space:pre-wrap}@media only screen and (min-width: 900px){main:has(.error-page) .typist{max-width:100%;margin-left:0;margin-right:0}}.not-found-page{max-width:440px;margin:0 auto}@media only screen and (min-width: 900px){.not-found-page{margin:0}}.not-found-page .message{font-family:"Noto Serif",serif;font-size:20px;margin-bottom:32px}.not-found-page .link{display:block;width:100%;padding:10px 24px;border-radius:20px;outline:1px solid #262626;text-wrap:nowrap;text-align:center;text-decoration:none;color:inherit}.not-found-page .link:hover{outline-width:2px}@media only screen and (min-width: 900px){.not-found-page .link{width:min-content}}main:has(.not-found-page) .typist{max-width:440px;height:auto;margin-left:auto;margin-right:auto;white-space:pre-wrap}@media only screen and (min-width: 900px){main:has(.not-found-page) .typist{max-width:100%;margin-left:0;margin-right:0}}.project{display:flex;flex-direction:column;width:312px;border-radius:12px}.project .content{padding:16px 8px 24px}.project .img{width:100%;height:auto;aspect-ratio:1.618/1;border-radius:12px;object-fit:cover}.project .header{font-family:Noto Sans,sans-serif;font-size:26px;line-height:26px;font-weight:400;margin-bottom:12px}.project .description{font-family:"Noto Serif",serif;font-size:16px;line-height:24px;margin-bottom:16px}.project .links{display:flex;gap:16px}.project .links div{display:flex;align-items:center;gap:8px}.project .links div a{color:#262626;text-decoration:none}.project .links div a:hover{text-decoration:underline}.home h1{margin-bottom:20px;font-size:42px;font-weight:400}.home .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(312px,1fr));gap:16px;justify-items:center}.home .grid .project{width:100%}.pagination{display:flex;justify-content:center;gap:16px;margin-top:16px}.pagination button{display:flex;justify-content:center;align-items:center;width:40px;height:40px;font-size:16px;font-family:Noto Sans,sans-serif;border:none;border-radius:20px;outline:1px solid #262626;background-color:transparent;transition:outline .05s}.pagination button:hover{cursor:pointer;outline-width:2px}.pagination button:active{color:#f7f7f7;background-color:#262626}.pagination div{display:flex;align-items:center;gap:8px}.pagination div .current-page{font-weight:700}.projects h1{margin-bottom:20px;font-size:42px;font-weight:400}.projects .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.projects .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(312px,1fr));gap:16px;justify-items:center}.projects .grid .project{width:100%}.projects .grid .project.fixed{max-width:378px;justify-self:start}.carousel{height:min-content}.carousel .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(8px,1fr));grid-template-rows:1fr;gap:8px;margin-bottom:8px}.carousel .steps .step{position:relative;height:4px;border-radius:4px;background-color:#a6b4ba;transition:background-color .3s}.carousel .steps .step.active{background-color:#262626}.carousel .steps .step:hover{cursor:pointer}.carousel .steps .step:before{content:"";position:absolute;top:-10px;bottom:-10px;z-index:1;width:100%}.carousel .scroller{position:relative;display:flex;gap:24px;overflow-x:scroll;scroll-snap-type:x mandatory;list-style:none;-ms-overflow-style:none;scrollbar-width:none}.carousel .scroller>*{min-width:100%;scroll-snap-align:center}.carousel .scroller::-webkit-scrollbar{display:none}.slider{position:relative;display:flex;gap:24px;overflow-x:scroll;scroll-snap-type:x mandatory;padding-bottom:16px;scrollbar-width:thin;scrollbar-color:#262626 transparent}.slider>*{scroll-snap-align:start}.about{display:grid;grid-template-columns:1fr;gap:72px}.about h2{margin-bottom:20px;font-size:42px;font-weight:400}.about section{overflow:hidden}@media only screen and (min-width: 700px){.about{grid-template-columns:1fr 1fr}.about .about-me{grid-column:1/3}}@media only screen and (min-width: 900px){.about{row-gap:56px}.about .about-me{grid-column:1/2;grid-row:1/3}}.about section.about-me .content{display:flex;flex-direction:column;gap:16px;align-items:center}.about section.about-me .content .avatar{max-width:180px;object-fit:cover;aspect-ratio:auto}.about section.about-me .content .text{font-family:"Noto Serif",serif;font-size:18px;max-width:468px;text-align:center}.about section.about-me .content .text p{margin-bottom:16px}.about section.about-me .content .text p:last-of-type{margin-bottom:0}.about section.about-me .content a{color:inherit}@media only screen and (min-width: 576px){.about section.about-me .content{flex-direction:row;text-align:start}.about section.about-me .content .text{text-align:start}}.about section.the-process p{font-family:"Noto Serif",serif;font-size:18px}.about section.the-process .step .header{font-size:32px;font-weight:700;margin-bottom:8px}.about section.the-process .step .description{font-family:"Noto Serif",serif}.about section.languages-and-tools .tool{display:flex;flex-direction:column;align-items:center;gap:8px}.about section.languages-and-tools .tool .icon-container{display:flex;align-items:center;justify-content:center;height:56px;width:56px}.about section.languages-and-tools .tool .icon-container>svg{height:100%;width:100%}.about section.languages-and-tools .tool .icon-container>img{height:49px;width:49px}.about section.the-process,.about section.languages-and-tools{max-width:468px}