:root{font-family:Poppins,Inter,system-ui,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#f5f6faee;background:radial-gradient(circle,#292929,#020202);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{width:100%}html{scroll-behavior:smooth}.cards-container{display:flex;flex-direction:column;align-items:center;margin:0 auto;padding:2rem;text-align:center;gap:8em;margin-top:10vh}.card{padding:2em}.footer{margin-top:8vh;color:#888;text-align:center}@media (max-width: 768px){.cards-container{padding:1em;gap:2em}}@media (max-width: 1280px){.cards-container{padding:1em;gap:4em}}.card{width:60vw;margin:0 auto;min-height:75vh;background:#23272f;border-radius:16px;box-shadow:0 4px 24px #000b;padding:25px;box-sizing:border-box;scroll-margin-top:150px}.card-hidden{opacity:0;transform:translate(-20px) scale(.95);filter:blur(5px);transition:all .5s ease-out}.card-show{opacity:1;transform:scale(1);filter:blur(0);transition:all .5s}ul,li{list-style:none;padding:0;margin:0}@media (prefers-reduced-motion){*{animation:none!important;transition:none!important}}@media (max-width: 1280px){.card{width:90vw;min-height:unset;padding:20px;border-radius:10px}.card-columns{grid-template-columns:1fr;gap:16px}}.input-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}.input-wrapper{position:relative;color:#fffa;font-size:1.2em;margin-bottom:10px}.input-wrapper label{position:absolute;top:50%;transform:translateY(-50%);color:#aaa;pointer-events:none;transition:.5s ease all}.input-wrapper input:focus+label,.input-wrapper input:not(:placeholder-shown)+label,.input-wrapper textarea:focus~label,.input-wrapper textarea:not(:placeholder-shown)~label{top:0;font-size:1em;color:#fff}.contact-form{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}.field-box{box-shadow:0 0 8px #000c;border-radius:8px;resize:none;margin:20px;padding:10px;border:1px solid #000000;background-color:#232323;color:#fff;font-size:1em;width:90%}.field-box:focus{outline:1px solid #000000}#name-box,#email-box{height:12px;text-align:center}#message-box{height:600px;font-size:1.1em}.popup{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0006;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.popup-box{background-color:#23272f;width:250px;height:20px;padding:20px;border-radius:24px;box-shadow:0 0 16px #fffc;text-align:center}.submit-button{transition:all .3s ease;border:none}.submit-button:hover{background-color:#0006;transform:scale(1.05);box-shadow:0 0 8px #fff9}.submit-button:active{transform:scale(1);box-shadow:inset 0 0 8px #000000d4,0 0 8px #fff6;outline:none}.submit-button .bx{margin-right:8px;vertical-align:text-top;font-size:1.2em}.personal-info{text-align:left;margin-bottom:0 0;align-items:left;display:flex;flex-direction:column;gap:0px}.personal-info h1{font-size:4em;margin:0;color:#fff}.personal-info h2{font-size:1.5em;margin:0;color:#ffffffac}.personal-info h3{--h3-color: #ffffff66;font-size:1.2em;margin:10px 0;color:var(--h3-color);display:flex;gap:4px}.personal-info h3 path{fill:var(--h3-color)}.card-columns{display:grid;grid-template-columns:6.5fr 3.5fr;align-items:start;column-count:2;column-gap:20px;gap:20px}.links{display:flex;gap:16px;align-items:center;justify-content:center;background-color:#00000054;padding:5px;border-radius:16px;width:80%;justify-self:center;height:36px;box-shadow:0 0 16px #000c}.link{display:flex;justify-content:center;align-items:center;border-radius:100%;transition:background-color .3s ease,transform 1s ease}.link:hover{background-color:#0006;transform:scale(1.1) rotate(-15deg)}path{fill:#fff}.about{display:grid;grid-template-columns:1fr;justify-items:start;text-align:left;line-height:2;margin-bottom:24px;align-items:left;gap:8vh}.about h2{text-align:center;font-size:1.5em;margin-bottom:8px}.table-of-contents{display:flex;justify-self:center;flex-direction:column;font-size:1.5em;width:80%;box-shadow:0 0 16px #000c;border-radius:8px;padding:20px 10px}.table-of-contents li a{display:block;color:#fff;width:100%;height:100%}.table-of-contents li:hover{text-decoration:underline}.table-of-contents li{list-style:none;text-align:center;padding:8px 16px;background-color:#0002;transition:transform 1s ease,box-shadow .2s ease,background-color .2s ease;border-radius:8px;text-decoration:outline;cursor:pointer;box-shadow:0 0 4px #0008;position:relative;font-size:.9em}.table-of-contents li:active{background-color:#0004;transform:scale(.98);box-shadow:inset 0 2px 5px #0008;transition:transform .1s ease}@media (max-width: 1280px){.personal-info h1{font-size:2.2em}.personal-info h2{font-size:1em}.personal-info h3{font-size:.95em}.links{width:90%;gap:10px;padding:4px;height:32px}.about{width:90%;gap:4vh;margin-bottom:16px}.table-of-contents{width:90%;font-size:1em;padding:10px 2px}.table-of-contents li{padding:6px 4px}.card-columns{grid-template-columns:1fr}.stack{padding-bottom:4vh;width:90%}}.stack{display:flex;flex-direction:column;align-items:center;justify-content:center}.stack h2{margin-bottom:36px}.stack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:32px;justify-items:center;align-items:center;width:90%;margin:0 auto;opacity:1;transition:transform .2s ease,opacity 5s ease}.stack-item{--item-width: 64px;width:var(--item-width);height:var(--item-width);font-size:calc(var(--item-width) / 4);font-weight:700;display:flex;flex-direction:column;align-items:center;gap:12px;border-radius:8px;margin-bottom:32px;transition:transform .5s ease,opacity .1s ease-out}.stack-item.transition{opacity:0;pointer-events:none}.stack-item:hover{transform:scale(1.2);transition:transform .2s ease-out}.stack-icon{background-color:#23232333;box-shadow:0 4px 16px #0009;padding:5px;border-radius:10px}.filter-buttons{display:grid;grid-template-columns:repeat(2,1fr);justify-content:center;margin-bottom:48px;width:80%;gap:0px;padding:0 4vw}.filter-button:nth-child(1){grid-column:1 / -1}.filter-button{flex:1 1 auto;margin-bottom:1px;border-radius:0;background-color:#23232333;color:#fff;cursor:pointer;box-shadow:0 4px 16px #0009;transition:background-color .1s ease,transform .3s ease;border:none}.filter-button:active{background-color:#0004;transform:scale(.95);transition:transform .1s ease}.filter-button:focus{outline:none}.filter-button:hover{background-color:#1c1c1cb0}.filter-button.inactive{background-color:#0004;color:#888;cursor:default;transform:none;transition:background-color .1s ease-out}.project-list{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;align-items:center;gap:20px;background-color:#2c2c2c;place-items:stretch;padding:20px;background:linear-gradient(135deg,#1a1a1a,#2c2c2c);border-radius:8px;outline:1px solid #000000}@media (max-width: 1280px){.project-list{grid-template-columns:1fr}}.project-item{display:grid;align-items:center;border:1px solid #0000004a;border-radius:8px;background-color:#39393946;margin-bottom:20px;width:100%;height:100%;box-shadow:inset 0 0 50px #353535a0}.project-item:hover{background-color:#39393966;box-shadow:0 0 10px #0006,inset 0 0 80px #51515158}.project-title{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:0}.project-title a{font-size:1.5em;font-weight:700;color:#fff;margin-bottom:0}.project-title a:hover{color:#ffffffd0;text-decoration:underline}.project-subtitle{font-size:1.2em;color:#ccc;margin:0}.project-description{font-size:1em;padding:20px 30px 20px 20px;border-top:1px solid #0000004a;text-align:left}.project-stack{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px}.tech-item{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 8px;border-radius:8px;background-color:#00000054;color:#fff;font-size:.9em;box-shadow:0 0 8px #0006;transition:transform .2s ease-out}.tech-item:hover{transform:scale(1.2);transition:transform .2s ease-in}.project-footer{display:flex;justify-content:space-between;align-items:center;padding:10px;border-top:1px solid #0000004a}.project-links{display:grid;padding:10px;grid-template-columns:repeat(2,1fr);justify-items:center;gap:10px}.gh-link{color:#fff;text-decoration:none;font-size:1em;padding:8px;border-radius:50%;background-color:#00000054;width:32px;height:32px;transition:all .2s ease-in-out}.gh-link:hover{background-color:#0006;transform:scale(1.1) rotate(-5deg);transition:all .2s ease-in-out}.demo-link{display:inline-block;color:#fff;background-color:#000;align-content:center;padding:10px 16px;border-radius:4px;height:30px;width:110px;text-decoration:none;font-weight:700;transition:background-color .3s ease;position:relative}.demo-link:hover{background-color:#000c;box-shadow:0 0 10px #0006}.demo-link .bx{margin-right:4px;vertical-align:text-top;font-size:1.2em}@media (max-width: 1280px){.project-item{grid-template-columns:1fr;min-width:0}.project-title a{font-size:1.2em}.project-subtitle{font-size:1em}.project-description{font-size:.95em;padding:14px 10px}.project-stack{gap:10px}.tech-item{font-size:.85em;padding:3px 6px}.project-footer{flex-direction:column;gap:10px;padding:8px}.project-links{grid-template-columns:1fr 1fr;gap:8px;padding:6px}.gh-link,.demo-link{font-size:.95em;width:auto;height:auto;padding:8px 10px}.demo-link{width:100px;padding:8px 10px;font-size:.95em}}.sticky-nav{position:fixed;display:flex;align-self:flex-start;top:50%;transform:translateY(-60%) translate(-150%);left:2em;width:210px;height:10vh;z-index:9999;transition:all .3s ease-in}.sticky-nav.scrolled{transform:translateY(-60%) translate(0);transition:all .3s ease-out}.sticky-nav li{margin:1.5em 0;border-radius:8px;background:linear-gradient(135deg,#1f2937d6,#1118279a);width:100%;height:1.75em;font-size:1.3em;padding-left:.5em;border:1px solid #000000bd}.sticky-nav li:hover{background:linear-gradient(135deg,#374151,#1f2937);cursor:pointer}.sticky-nav li:active{background:linear-gradient(135deg,#1f2937,#111827a1);transform:scale(.99);box-shadow:inset 0 2px 4px #0008;transition:transform .1s ease}.sticky-nav li .bx{margin-right:.2em;vertical-align:text-top;margin-top:.2em}.nav-short{display:none}@media (max-width: 1368px){.sidebar{position:fixed;align-self:flex-start;flex-direction:column;width:100%;z-index:9999}.sticky-nav{position:fixed;top:0;left:0;transform:translateY(-6em) translate(0);width:100%;height:10vh;font-size:.8em}.sticky-nav.scrolled{transform:translateY(-2em) translate(0)}.sticky-nav ul{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%;height:100%}.nav-short{display:inline}.nav-long{display:none}}.work-item{background:linear-gradient(135deg,#1f2937,#111827);border:1px solid #5355586c;border-radius:16px;padding:1.5em;margin:1rem 0;color:#f9fafb;box-shadow:0 8px 24px #00000050;transition:all .3s ease}.work-item:hover{transform:translateY(-8px);box-shadow:0 12px 30px #0000009b}.work-role{font-size:1.5em;font-weight:600;color:#fff;outline:1px solid #525252}.work-duration{font-size:.9em;color:#9ca3af}.work-company{font-weight:500;color:#d1d5db;font-size:1.1em;margin-bottom:.5em}.work-bullets{line-height:1.5;color:#e5e7eb;text-align:left;margin-left:1.5em;margin-bottom:1em}.work-bullets li{list-style-type:disc}@media (max-width: 1280px){.work-item{padding:1em;margin:.75rem 0}.work-role{font-size:1.2em}.work-company{font-size:1em}.work-bullets{margin-left:1em;font-size:.95em}}#work{min-height:600px;scroll-margin-top:350px}.timeline{position:relative;margin:0;padding-left:33px}.timeline:before{content:"";position:absolute;left:1em;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#233e5f,#23272f);border-radius:2px}.timeline-item{position:relative;margin-bottom:2.5em;display:flex}.timeline-marker{position:absolute;left:-1.85em;top:2vh;width:24px;height:24px;background:#1e293b;border:4px solid #517cb0;border-radius:50%;z-index:1;box-shadow:0 0 0 4px #1e293b}.timeline-content{margin-left:2vw;flex:1}