#about{margin-top:100vh}body{margin:0;padding:0;font-family:Arial,sans-serif;background-color:#f9f9f9;color:#333;overflow-x:hidden;transition:background-color .4s ease,color .4s ease}ul{list-style:none;padding-left:0;margin-left:0}p{margin-top:2rem}.about-split{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:3rem;flex-wrap:wrap;text-align:left;margin-top:2rem}.about-left{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:1rem}.about-right{flex:1 1 500px;max-width:700px}.about-right p{font-size:1.25rem;font-weight:400;line-height:1.8;color:#222;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,sans-serif;margin-top:1.5rem}body.dark-mode .about-right p{color:#eee}.contact-list{list-style:none;padding:0;margin:1.5rem 0}.contact-list li{margin-bottom:.8rem;font-size:1.1rem}.contact-list a{color:#07c;text-decoration:none}.contact-list a:hover{text-decoration:underline}.availability{margin-top:2rem;background-color:#00000008;padding:1rem 1.5rem;border-radius:12px;font-size:1.1rem}#page-wrapper{transition:transform .3s ease}section{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:4rem 2rem;text-align:center;box-sizing:border-box;position:relative}h1{font-size:2.8rem;color:#444;margin-top:2.5rem;margin-bottom:1rem}h2{font-size:2rem;color:#444;margin-top:2.5rem;margin-bottom:1rem}header{margin-top:0;text-align:center;font-size:1.2rem}#contact form{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;margin:2rem auto;width:100%;max-width:600px}.form-group{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;width:100%;gap:1rem}label{width:100px;text-align:right;padding-top:.75rem;font-weight:700;font-size:.95rem;color:#333}input,textarea{flex:1;max-width:100%;padding:.75rem;border:1px solid #ccc;border-radius:20px;font-size:1rem;transition:border .3s ease}textarea{resize:vertical;min-height:120px}button[type=submit]{padding:.75rem 2rem;font-size:1rem;background-color:#61dafb;border:none;border-radius:25px;color:#fff;font-weight:700;cursor:pointer;transition:background-color .3s ease}button[type=submit]:hover{background-color:#1b9cd9}nav{background-color:transparent!important;background:transparent!important;box-shadow:none!important;border:none!important;flex-wrap:wrap;position:sticky;top:1.2rem;display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;gap:1rem;padding:0 1.5rem;z-index:1000;transition:padding .3s ease,background-color .3s ease,transform .3s ease,width .3s ease,backdrop-filter .3s ease}.nav-wrapper{display:flex;justify-content:center;flex:1}.nav-list{display:flex;gap:2rem;padding:.6rem 1.5rem;border-radius:25px;background-color:#fffc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 12px #0000001a}.nav-list li a{font-size:1.2rem;font-weight:700;color:#333;text-decoration:none;transition:color .3s ease}.nav-list li a:hover{color:#61dafb}.logo-bubble.desktop-only{display:flex!important}.logo-bubble.mobile-only{display:none!important}.section-content{width:100%;max-width:1400px;padding:0 3rem;margin:0 auto;box-sizing:border-box}.float-in{opacity:0;animation:floatInUp .8s ease-out forwards}.bubble{background-color:#fffc;padding:.6rem 1.5rem;border-radius:25px;border:2px solid rgba(255,255,255,.4);box-shadow:0 4px 12px #0000001a;display:flex;align-items:center}.logo-bubble{display:flex;align-items:center;gap:1rem}.logo{font-size:1.2rem;font-weight:700;color:#333;text-decoration:none}.darkmode-bubble{display:flex;align-items:center;justify-content:center}.menu-toggle{display:flex;flex-direction:column;gap:5px;cursor:pointer}.bar{height:2px;width:22px;background-color:#333;border-radius:2px;transition:background-color .3s ease}body.dark-mode .bar{background-color:#fff}.big-bubble{position:relative;width:clamp(240px,24vw,360px);height:clamp(500px,60vh,680px);background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:48px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 12px 30px #0000001a;transition:transform .4s ease,box-shadow .4s ease}.big-bubble:after{content:"";position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(to top,rgba(0,0,0,.45),transparent);z-index:0;border-radius:inherit}.big-bubble:before{content:"";position:absolute;top:0;left:0;right:0;height:60%;background:linear-gradient(to bottom,rgba(0,0,0,.849),transparent);z-index:0;border-radius:inherit}.bubble-bottom-list{position:absolute;top:-.5rem;left:0rem;z-index:1;padding:0;font-size:1.1rem;font-weight:400;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);line-height:1.3;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,sans-serif;text-align:left}.bubble-bottom-list p{margin:0;padding:0;line-height:1.3;letter-spacing:.2px}.big-bubble:hover{transform:scale(1.03);box-shadow:0 16px 40px #0003}.bubble-bottom-list{padding:1.8rem;font-size:1.5rem;font-weight:400;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);line-height:1.7;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,sans-serif}.bubble-bottom-list p{margin:.4rem 0;letter-spacing:.1px}body.dark-mode .bubble-overlay-top,body.dark-mode .bubble-bottom-list{color:#eee;text-shadow:none}.section-heading{font-size:clamp(2.2rem,4vw,3rem);font-weight:600;color:#111;margin-bottom:2rem;text-align:left;padding-left:.25rem}body.dark-mode .section-heading{color:#fff}.typewriter-container{position:absolute;top:2.5rem;left:2.5rem;z-index:2;font-size:clamp(1rem,1.5vw,1.4rem);color:#fff;font-family:monospace;white-space:nowrap;overflow:hidden;border-right:2px solid white;width:fit-content;animation:blinkCaret .75s step-end infinite}@keyframes blinkCaret{0%,to{border-color:transparent}50%{border-color:#fff}}.fade-right{animation:fadeOutRight .9s ease forwards}@keyframes fadeOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(40px)}}.dark-icon{width:20px;height:20px;margin-right:.5rem;display:none}.light-icon{width:20px;height:20px;margin-right:.5rem}#grid-container{display:grid;width:100vw;height:100vh;gap:2px;box-sizing:border-box;overflow:hidden}.grid-square{background-color:#ddd;border-radius:4px;will-change:background-color;transition:background-color .4s ease,transform .3s ease}.grid-square.snake{background-color:#32cd32!important}.grid-square.food{background-color:red!important}.hero-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#222;z-index:2;width:100%;max-width:100vw;pointer-events:none;padding:0 1rem}.hero-text.fade-toggle{pointer-events:none!important}.hero-text h1,.hero-text h2{font-weight:400;margin:.5rem 0;line-height:1.3}.hero-text h1{font-size:clamp(2rem,5vw,4rem)}.hero-text h2{font-size:clamp(1.2rem,3vw,2rem);color:#555}body.dark-mode .hero-text{color:#eee}body.dark-mode .hero-text h2{color:#bbb}.scroll-down{position:absolute;bottom:30px;left:50%;transform:translate(-50%);z-index:3}.scroll-down a{font-size:2rem;color:#333;text-decoration:none;animation:bounce 1.5s infinite;cursor:pointer}.see-more-bubble{position:absolute;bottom:30px;left:50%;transform:translate(-50%);z-index:3;padding:.75rem 1.8rem;background-color:#ffffff26;border-radius:25px;font-size:1rem;font-weight:700;color:#333;text-decoration:none;box-shadow:0 4px 12px #0000000d;transition:all .3s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:2px solid rgba(255,255,255,.2);opacity:.7}.see-more-bubble:hover{background-color:#ffffffe6;color:#000;cursor:pointer;transform:translate(-50%) scale(1.05);opacity:1}body.dark-mode .see-more-bubble{background-color:#1e1e1e33;color:#eee;border-color:#ffffff26;box-shadow:0 4px 12px #0003;opacity:.7}body.dark-mode .see-more-bubble:hover{background-color:#000000e6;color:#fff;opacity:1}body.dark-mode .section-nav-bubble{background-color:#1e1e1e33;color:#eee;border-color:#ffffff26;box-shadow:0 4px 12px #0003;opacity:.7}body.dark-mode .section-nav-bubble:hover{background-color:#000000e6;color:#fff;opacity:1}.scroll-wrapper{scroll-snap-type:y proximity;overflow-y:auto}.scroll-wrapper section{scroll-snap-align:start}.see-more-bubble{animation:bounceDown 1.5s ease-in-out}@keyframes bounceDown{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(5px)}}.play-game-bubble{position:absolute;bottom:calc(26% - 60px);left:50%;transform:translate(-50%);z-index:4;padding:.75rem 1.8rem;font-size:1rem;font-weight:700;border-radius:25px;text-decoration:none;transition:all .3s ease;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.play-game-bubble{background-color:#fff3;color:#333;border:2px solid rgba(255,255,255,.3);box-shadow:0 4px 12px #0000000d;opacity:.9}.exit-bubble{position:absolute;top:20px;right:20px;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;text-decoration:none;background-color:#ffffff40!important;color:#111!important;border:2px solid rgba(255,255,255,.3)!important;opacity:0;pointer-events:none;transition:all .3s ease;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:10}.exit-bubble.exit-animate-in{animation:fadeInSlide .35s ease-out forwards}.exit-bubble:hover{background-color:#fffffff2!important;color:#000!important;transform:scale(1.1)}@keyframes fadeInSlide{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}.play-game-bubble:hover{background-color:#fffffff2;color:#000;transform:translate(-50%) scale(1.05);cursor:pointer}body.dark-mode .play-game-bubble{background-color:#1e1e1e33;color:#eee;border-color:#fff3}body.dark-mode .play-game-bubble:hover{background-color:#000000e6;color:#fff}.fade-in{opacity:0;transform:translateY(40px);transition:opacity .8s ease-out,transform .8s ease-out}.fade-in.visible{opacity:1;transform:translateY(0)}section>*{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}section.visible>*{opacity:1;transform:translateY(0)}.fade-toggle{transition:opacity .4s ease,transform .3s ease;opacity:1;pointer-events:auto}.fade-toggle.fade-out{opacity:0!important;pointer-events:none!important}.fade-out{opacity:0!important;pointer-events:none!important;transition:opacity .3s ease}.timeline-grid{display:flex;flex-direction:column;gap:4.6rem;max-width:100%;margin:0 auto;padding:4rem 2rem}.timeline-row{display:grid;grid-template-columns:30px 1fr;gap:2rem;align-items:flex-start;min-height:150px;position:relative;transition:transform .3s ease,opacity .3s ease;cursor:pointer}.timeline-row .year-label,.timeline-row .timeline-entry,.timeline-row .timeline-entry h3,.timeline-row .timeline-entry p{transition:all .3s ease}.timeline-row .year-label{font-size:1.2rem;font-weight:500;color:#999;text-align:right;padding-top:.3rem}.timeline-row .timeline-entry{opacity:.75;transform:scale(.98);text-align:left;padding-left:5.5rem}.timeline-row .timeline-entry h3{margin:0 0 .5rem;font-size:1.4rem;color:#222}.timeline-row .timeline-entry p{margin:0;color:#444;line-height:1.6}.timeline-row:hover{transform:scale(1.02);opacity:1}.timeline-row:hover .year-label{color:#61dafb;font-size:1.6rem;font-weight:700}.timeline-row:hover .timeline-entry,.timeline-row:hover .timeline-entry h3,.timeline-row:hover .timeline-entry p{color:#61dafb}body.dark-mode .timeline-row .year-label{color:#666}body.dark-mode .timeline-row .timeline-entry h3,body.dark-mode .timeline-row .timeline-entry p{color:#eee}body.dark-mode .timeline-row:hover .year-label,body.dark-mode .timeline-row:hover .timeline-entry h3,body.dark-mode .timeline-row:hover .timeline-entry p{color:#61dafb}.skills-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2rem;justify-items:center;padding-top:2rem;overflow:visible;position:relative}.skill-bubble{background-color:#fffc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.3);border-radius:20px;padding:1rem;width:100px;height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 12px #0000000d;transition:transform .3s ease;transition:background-color .4s ease,border-color .4s ease,color .4s ease}.skill-bubble:hover{transform:scale(1.05)}.skill-bubble img{width:40px;height:40px;object-fit:contain;margin-bottom:.5rem}.skill-bubble span{font-size:.9rem;font-weight:500;color:#333;text-align:center}body.dark-mode .skill-bubble{background-color:#1e1e1ed9;border-color:#ffffff1a}body.dark-mode .skill-bubble span{color:#eee}body.dark-mode .skill-bubble img{filter:invert(1) hue-rotate(180deg)}.tooltip{position:relative;display:inline-block}.tooltip-content{position:absolute;top:50%;left:100%;transform:translateY(-50%) translate(-10px);width:100px;background:#fffffff2;padding:.6rem 1rem;border-radius:16px;box-shadow:0 6px 12px #0000001a;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;z-index:10;text-align:center}.tooltip:hover .tooltip-content{opacity:1;transform:translateY(-50%) translate(10px)}.progress-bar{width:100%;background-color:#e0e0e0;height:10px;border-radius:10px;overflow:hidden;margin-top:.5rem;margin-bottom:.3rem}.progress-fill{height:100%;background-color:#61dafb;border-radius:10px;transition:width .4s ease-in-out}.tooltip-label{font-size:.75rem;color:#333;font-weight:500}body.dark-mode .tooltip-content{background-color:#141414fa;color:#f5f5f5;box-shadow:0 4px 14px #0009;border:1px solid rgba(255,255,255,.1)}body.dark-mode .tooltip-label{color:#ddd}body.dark-mode .progress-bar{background-color:#444}body.dark-mode .progress-fill{background-color:#61dafb;box-shadow:0 0 6px #61dafb99}.icon-bubbles{display:flex;justify-content:center;gap:1.2rem;margin-top:2.5rem;pointer-events:auto}.icon-bubbles.float-in{animation:floatInUp .8s ease-out forwards}.icon-bubble{pointer-events:auto;width:60px;height:60px;border-radius:50%;background-color:#1f1f1f;color:#fff;display:flex;justify-content:center;align-items:center;text-decoration:none;font-size:24px;transition:transform .3s ease,background-color .3s ease;z-index:3;position:relative;transition:background-color .4s ease,border-color .4s ease,color .4s ease}.icon-bubble:hover{transform:scale(1.1);background-color:#3e8ed0}body.dark-mode .icon-bubble{background-color:#333;color:#eee}body.dark-mode .icon-bubble:hover{background-color:#61dafb;color:#111}@keyframes floatInUp{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.fade-toggle.fade-out,.fade-toggle.fade-out *{pointer-events:none!important}.icon-bubbles{pointer-events:none}.icon-bubbles a,.icon-bubbles .icon-bubble{pointer-events:auto}body.dark-mode{background-color:#1c1c1c;color:#eee}body.dark-mode .bubble,body.dark-mode .nav-list{background-color:#1e1e1ee6;border-color:#ffffff1a}body.dark-mode a{color:#eee}body.dark-mode a:hover{color:#61dafb}body.dark-mode footer{background-color:#111;color:#ccc}body.dark-mode h2{color:#eee}body.dark-mode .dark-icon{display:inline;filter:invert(1)}body.dark-mode .light-icon{display:none}body.dark-mode h1{color:#eee}body.dark-mode input,body.dark-mode textarea{background-color:#2a2a2a;color:#eee;border:1px solid #555}body.dark-mode input:focus,body.dark-mode textarea:focus{border-color:#61dafb}.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;width:100%;max-width:1200px;margin:0 auto;padding:2rem;box-sizing:border-box}.project-bubble{background-color:#ffffffd9;border-radius:25px;aspect-ratio:1 / 1;display:flex;justify-content:center;align-items:center;font-weight:700;box-shadow:0 4px 12px #00000014;transition:transform .3s ease;text-align:center}.project-bubble:hover{transform:scale(1.03);background-color:#fff}body.dark-mode .project-bubble{background-color:#3f3f3fc9;color:#eee}.contact-icons{display:flex;gap:2rem;justify-content:center;align-items:center;padding-top:2rem;list-style:none;margin:0}.contact-icons li a img{width:40px;height:40px;transition:transform .3s ease,filter .3s ease}.contact-icons li a:hover img{transform:scale(1.2)}body.dark-mode .contact-icons li a img{filter:invert(1) hue-rotate(180deg)}footer{text-align:center;padding:1rem;background-color:#282c34;color:#fff;font-size:.9rem}.desktop-only{display:flex!important;transition:none!important;opacity:1!important;visibility:visible!important}.mobile-only{display:none}@media (max-width: 768px){.desktop-only{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}.mobile-only{display:flex!important;align-items:center;gap:1rem;position:fixed;top:1.2rem;left:1.2rem;z-index:1002}.darkmode-bubble{position:fixed;top:1.2rem;right:1.2rem;z-index:1002}nav{padding:1rem 2rem;flex-wrap:nowrap;position:relative;z-index:1000}.nav-wrapper{display:none!important}.menu-toggle{display:flex;flex-direction:column;gap:5px;cursor:pointer}.menu-toggle .bar{width:24px;height:2px;background-color:#333;border-radius:2px}body.dark-mode .menu-toggle .bar{background-color:#eee}.nav-list.mobile-only{position:fixed;top:4.5rem;left:1.3rem;width:160px;background-color:#fff9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.4);border-radius:25px;box-shadow:0 4px 12px #0000001a;display:flex;flex-direction:column;gap:1.2rem;padding:1.5rem 1.2rem;opacity:0;pointer-events:none;transition:opacity .3s ease,left .3s ease;z-index:9999}.nav-list.mobile-only.active{opacity:1;pointer-events:auto}.nav-list.mobile-only li{margin-bottom:1.5rem}.nav-list.mobile-only li a{font-size:1.1rem;font-weight:600;color:#333;text-decoration:none}body.dark-mode .nav-list.mobile-only{background-color:#1e1e1ee6;border-color:#ffffff1a}body.dark-mode .nav-list.mobile-only li a{color:#eee}.about-split{flex-direction:column;align-items:center;gap:2rem}.about-left{position:static;width:100%;display:flex;justify-content:center}.big-bubble{width:90%;max-width:360px;margin:0 auto}.about-right{width:90%;max-width:600px;text-align:center}.about-right p{font-size:1rem}.darkmode-bubble,.logo-bubble.mobile-only{display:flex!important;align-items:center;gap:1rem}}@media (min-width: 769px){.about-split{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:4rem}.about-left{position:sticky;top:120px;flex:0 0 clamp(240px,24vw,360px);align-self:flex-start;z-index:1}.about-right{flex:1;max-width:700px;text-align:left;display:flex;flex-direction:column;justify-content:center}.about-right p{font-size:clamp(1rem,1.25vw + .5rem,1.25rem);line-height:1.8;margin-top:1.25rem}}@media (min-width: 0px){@supports (width: calc(100vw - 17px)){#grid-container{width:calc(100vw - 17px)}}}body.locked{overflow:hidden}#grid.locked-grid{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;box-shadow:0 0 30px #00000080}*{margin:0;padding:0;box-sizing:border-box;font-family:Cambria,Cochin,Georgia,Times,Times New Roman,serif}html{scroll-behavior:smooth}body{margin:0;padding:0;background-color:#f9f9f9;color:#333;overflow-x:hidden;transition:background-color .4s ease,color .4s ease}.darkmode-bubble{animation:floatInUp .8s ease-out forwards}.toggle-switch{position:relative;width:40px;height:20px}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#ccc;border-radius:20px;cursor:pointer;transition:background-color .3s ease}.slider:before{content:"";position:absolute;height:16px;width:16px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;transition:transform .3s ease}.toggle-switch input:checked+.slider{background-color:#333}.toggle-switch input:checked+.slider:before{transform:translate(20px)}.light-icon,.dark-icon{width:20px;height:20px;margin-right:.5rem}.dark-icon{display:none}.grid-hero{position:absolute;top:0;left:0;width:100%;height:100vh;z-index:1}#grid-container{display:grid;width:100vw;height:100vh;grid-template-columns:repeat(auto-fill,minmax(14px,1fr));grid-auto-rows:14px;gap:2px;box-sizing:border-box;overflow:hidden}.grid-square{background-color:#ddd;border-radius:4px;transition:background-color .4s ease,transform .3s ease}.grid-square.hovered{background-color:#61dafb}.grid-square.active{background-color:#222}body.dark-mode .grid-square{background-color:#444}body.dark-mode .grid-square.hovered{background-color:#61dafb}body.dark-mode .grid-square.active{background-color:#fff}.grid-square.player{background-color:#00f!important;border:2px solid #00f!important}.grid-square.obstacle{background-color:red!important}#score-display{font-family:monospace;font-size:16px;color:#fff}@keyframes floatInUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}