.nav-sidebar{background-color:var(--trans-primary-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:25%;max-width:235px;box-shadow:0px 8px 24px var(--shadow-color);flex-direction:column;justify-content:center;align-items:center;height:100%;padding:50px 0;display:flex;position:fixed}.nav-buttons{flex-direction:column;justify-content:center;align-items:center;gap:.25rem;width:100%;display:flex}.nav-button{text-align:left;border-radius:32px;width:90%;padding:12px 20px;font-size:1.5rem;text-decoration:none;transition:background-color .25s,font-weight .25s}.nav-button:hover,.theme-btn:hover,.nav-button-mobile:hover,.nav-button-mobile:active,.theme-btn-mobile:hover,.theme-btn-mobile:active{background-color:var(--hover-color);font-weight:600}.nav-button:focus-visible,.theme-btn:focus-visible,.nav-button-mobile:focus-visible{background-color:var(--hover-color)}.nav-footer{gap:1rem;padding-bottom:30px;display:flex;position:absolute;bottom:0}.theme-btn-parent{width:90%;padding-top:30px;position:absolute;top:0}.theme-btn{cursor:pointer;border-radius:32px;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:10px 15px;font-size:1.25rem;text-decoration:none;transition:background-color .25s,font-weight .25s;display:flex}.footer-btn{cursor:pointer;width:2rem;height:2rem;transition:transform .25s}.footer-btn:hover,.footer-btn:focus-visible,.footer-btn-mobile:hover,.footer-btn-mobile:focus-visible,.footer-btn-mobile:active{transform:scale(1.1)}.mobile-nav-container,.mobileNav,.mobile-page-nav,.mobile-links,.mobile-theme-parent{display:none}.mobileNav{width:64px;height:64px;box-shadow:0px 0px 16px var(--shadow-color);background-color:var(--primary-color);opacity:1;z-index:100;border-radius:32px;flex-direction:column;justify-content:center;align-items:center;gap:4px;position:fixed;bottom:16px;right:16px}.mobileNav>div{border-bottom:3px solid var(--main-text);width:32px;height:5px}.mobile-page-nav{background-color:var(--primary-color);box-shadow:0px 8px 16px var(--shadow-color);z-index:100;visibility:hidden;opacity:0;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;width:170px;padding:10px 0;transition:opacity .2s ease-out,transform .2s ease-out,visibility .2s;display:none;position:fixed;bottom:96px;right:16px;transform:translateY(20px)}.mobile-page-nav.open{visibility:visible;opacity:1;display:flex;transform:translateY(0)}.nav-button-mobile{text-align:left;border-radius:32px;width:90%;padding:8px 12px;font-size:1rem;text-decoration:none;transition:background-color .25s,font-weight .25s}.mobile-links{background-color:var(--primary-color);box-shadow:0px 8px 16px var(--shadow-color);z-index:100;visibility:hidden;opacity:0;border-radius:12px;flex-direction:row;gap:10px;padding:15px;transition:opacity .2s ease-out,transform .2s ease-out,visibility .2s;display:none;position:fixed;bottom:16px;right:96px;transform:translate(20px)}.mobile-links.open{visibility:visible;opacity:1;display:flex;transform:translate(0)}.footer-btn-mobile{cursor:pointer;width:2rem;height:2rem;transition:transform .25s}.mobile-theme-parent{background-color:var(--primary-color);z-index:100;visibility:hidden;opacity:0;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;width:170px;padding:5px 0;transition:opacity .2s ease-out .1s,transform .2s ease-out .1s,visibility .2s .1s;display:none;position:fixed;bottom:290px;right:16px;transform:translateY(20px)}.mobile-theme-parent.open{visibility:visible;opacity:1;display:flex;transform:translateY(0)}.theme-btn-mobile{text-align:left;border-radius:32px;flex-direction:row;justify-content:center;align-items:center;width:90%;padding:8px 12px;font-size:1rem;text-decoration:none;transition:background-color .25s,font-weight .25s;display:flex}@media (max-width:1000px){.nav-sidebar{visibility:hidden;width:0;display:none}.mobile-nav-container,.mobileNav{visibility:visible;display:flex}.mobile-page-nav,.mobile-links,.mobile-theme-parent{display:flex}}
main{flex-direction:column;width:calc(100% - 235px);display:flex;position:absolute;left:235px}*{font-family:var(--font-geist), Verdana, Geneva, Tahoma, sans-serif}main>section{width:90%;max-width:1100px;margin:40px auto}h1{font-size:2rem;font-weight:700}.hide-scroll::-webkit-scrollbar{display:none}.hide-scroll{-ms-overflow-style:none;scrollbar-width:none}img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}@media (max-width:1000px){main{width:100%;left:0}}
#about-page{grid-template-columns:1fr 2.5fr;grid-template-areas:"image skills""about about";gap:24px;display:grid}.about-cell{background-color:var(--panel-color);width:100%;box-shadow:0 8px 32px var(--shadow-color);opacity:0;border-radius:16px;padding:24px 32px;animation:.5s cubic-bezier(.2,.8,.2,1) forwards fadeInUp}.about-cell>h2{text-transform:uppercase;color:var(--outline-color);border-bottom:2px solid var(--neutral-gray);letter-spacing:.1rem;margin-bottom:16px;padding-bottom:8px;font-size:1.25rem;font-weight:700}.skill-cell{cursor:default;align-items:center;gap:8px;padding:8px 18px;font-size:.95rem;font-weight:500;display:flex}.skill-language{background-color:var(--tag-one);border-radius:32px}.skill-framework{background-color:var(--tag-two);border-radius:8px}.skill-app{border:2px solid var(--tag-three);color:var(--main-text);background-color:#0000;border-radius:32px}.skill-level-dots{gap:4px;margin-left:4px;display:flex}.skill-dot{opacity:.5;border:1.5px solid;border-radius:32px;width:8px;height:8px}.skill-dot.filled{opacity:1;background-color:currentColor}#about-skill-parent{flex-wrap:wrap;flex-grow:1;align-content:flex-start;gap:12px;padding-bottom:6px;display:flex;overflow-y:auto}.skill-footer{opacity:.75;justify-content:flex-end;margin-top:auto;font-size:.8rem;font-style:italic;display:flex}#about-image{aspect-ratio:1;grid-area:image;padding:0;animation-delay:.1s;display:flex;overflow:hidden}#about-image>img{border-radius:12px}#about-skills{flex-direction:column;grid-area:skills;animation-delay:.1s;display:flex}#about-about{grid-area:about;animation-delay:.2s}.about-content p{margin-bottom:14px;line-height:1.1}.about-content p:last-child{margin-bottom:0}@media (max-width:1000px){#about-page{grid-template-columns:1fr;grid-template-areas:"image""skills""about";gap:12px}#about-image{aspect-ratio:1;max-width:350px;margin:0 auto}}
@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOutDown{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}@keyframes fadeInLeft{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(20px)}}
#featured-card{opacity:0;animation:.5s cubic-bezier(.2,.8,.2,1) .1s forwards fadeInUp}.project-scroller{width:100%;padding-bottom:20px;position:relative}.project-controls{justify-content:space-between;align-items:start;margin-bottom:5px;display:flex}.project-control-buttons{flex-direction:row;gap:5px;display:flex}.project-controls button{cursor:pointer;background-color:var(--panel-color);border:none;border-radius:8px;padding:10px 15px}.project-content{opacity:1;box-sizing:border-box;width:100%;padding:5px 0 20px;transition:opacity .3s;overflow-x:auto}.project-grid{width:max-content;display:flex}.project-column{flex-direction:column;gap:20px;display:flex}.project-row{opacity:0;gap:20px;animation:.5s cubic-bezier(.2,.8,.2,1) forwards fadeInUp;display:flex}.project-card{background-color:var(--panel-color);cursor:pointer;width:450px;height:300px;box-shadow:0px 8px 24px var(--shadow-color);-webkit-user-select:none;user-select:none;border-radius:12px;flex-shrink:0;transition:transform .25s;position:relative;overflow:hidden}.project-card-big{aspect-ratio:16/9;background-color:var(--panel-color);cursor:pointer;box-shadow:0px 8px 24px var(--shadow-color);border-radius:12px;flex-shrink:0;transition:transform .25s;position:relative;overflow:hidden}.project-card>img,.project-card-big>img{object-fit:cover;width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.project-card:after,.project-card-big:after{content:"";z-index:1;pointer-events:none;background-color:#0000;width:100%;height:100%;transition:background-color .2s;position:absolute;top:0;left:0}.project-card:hover:after,.project-card-big:hover:after{background-color:var(--hover-color)}.project-card:hover,.project-card-big:hover{transform:scale(1.02)}.project-card>p,.project-card-big>p{opacity:.75;font-size:.8rem}.project-popup{background-color:var(--popup-background);z-index:9999;box-sizing:border-box;justify-content:center;align-items:center;padding-left:235px;display:flex;position:fixed;inset:0}.popup-content{background-color:var(--popup-color);border-radius:12px;width:90%;max-width:1000px;max-height:90vh;padding:40px 40px 20px;overflow-y:auto}.popup-title{border-bottom:2px solid var(--neutral-gray);background-color:var(--popup-color);z-index:10;justify-content:space-between;margin-bottom:10px;padding-left:.25rem;display:flex;position:sticky;top:-40px}.popup-title>h2{color:var(--outline-color);font-size:1.75rem;font-weight:700}.popup-title>button{background-color:var(--panel-color);cursor:pointer;border-radius:32px;width:35px;height:35px;font-weight:bolder}.popup-title>button:hover{background-color:var(--hover-color)}.popup-content>p{padding-left:.25rem}.popup-image{aspect-ratio:16/9;background-color:var(--hover-color);border-radius:12px;width:100%;position:relative}.popup-image>img{object-fit:cover;width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.popup-links{flex-direction:row;gap:1em;margin-top:6px;padding-left:.25rem;display:flex}.popup-links>a{text-underline-offset:2px;color:var(--link-color);flex-direction:row;align-items:center;gap:2px;text-decoration:underline;display:flex}.popup-tags{flex-wrap:wrap;gap:10px;margin:10px 2px;display:flex}.popup-description{flex-direction:column;gap:10px;display:flex}.popup-description p{line-height:1.2rem}.card-header{background-color:var(--popup-background);z-index:2;border-radius:12px 12px 0 0;padding:10px 20px;position:relative}.project-card h3{font-size:1.2rem;font-weight:400}.project-card-big h3{font-size:1.75rem;font-weight:500}.project-card-tags{flex-wrap:wrap;gap:8px;margin:5px 5px 5px 0;display:flex}.category-tag{cursor:default;align-items:center;gap:8px;padding:8px 18px;font-size:.95rem;font-weight:500;display:flex}.mini-category-tag{cursor:default;align-items:center;padding:6px 12px;font-size:.75rem;font-weight:400;display:flex}.category-webdev{background-color:var(--tag-one);border-radius:32px}.category-gamedev{background-color:var(--tag-two);border-radius:8px}.category-gamedes{border:2px solid var(--tag-three);color:var(--main-text);background-color:#0000;border-radius:32px}.category-dev{background-color:var(--tag-four);border-radius:0}.category-webdes{border:2px dotted var(--tag-four);color:var(--main-text);background-color:#0000;border-radius:32px}.category-gamedes.mini-category-tag,.category-webdes.mini-category-tag{background-color:var(--invert-text)}.project-dates{opacity:.8;justify-content:flex-end;margin-top:20px;font-size:.8rem;font-style:italic;display:flex}@media screen and (max-width:1000px){.project-popup{padding-left:0}.popup-title{padding-top:5px;top:-20px}.popup-content{padding:20px 20px 10px}.project-card{width:300px;height:200px}.mini-category-tag{gap:4px;padding:4px 9px;font-size:.6rem}.project-card-tags{gap:4px;margin:5px 5px 5px 0}.project-card h3{font-size:1rem;font-weight:400}}
footer{background-color:var(--trans-primary-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0px 0px 16px var(--shadow-color);text-align:center;z-index:-1;flex-direction:row;justify-content:center;align-items:center;gap:5px;padding:10px 0;display:flex;position:static;bottom:0}@media screen and (max-width:1000px){footer{padding:10px 75px 10px 10px}}
.blog-scroller{animation:.5s cubic-bezier(.2,.8,.2,1) .1s forwards fadeInUp;display:flex}.blog-link{background-color:var(--panel-color);box-shadow:0 8px 32px var(--shadow-color);border-radius:16px;padding:24px 36px}.blog-link>h2{text-transform:uppercase;color:var(--outline-color);border-bottom:2px solid var(--neutral-gray);letter-spacing:.1rem;margin-bottom:16px;padding-bottom:8px;font-size:1.25rem;font-weight:700}