body{color:#faf9f6;margin:0;text-align:center;font-family:Merriweather,serif}a{color:#264653;font-family:Montserrat,sans-serif;margin:10px 20px;text-decoration:none}a:hover{color:#eaf6f6}h2,h3{font-family:Montserrat,sans-serif}hr{border:0;border-top:6px dotted rgb(209,207,207);width:5%}.profile{width:50%;margin:80px auto;line-height:2}.skill-row{width:80%;margin:50px auto;text-align:left;line-height:2}.experience-row{width:95%;margin:10px auto;text-align:left;line-height:2}#about{min-height:50vh}.about{display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:center}.aboutText{font-family:Montserrat,sans-serif;font-size:larger;letter-spacing:.2px;line-height:2;margin:10px 0 16px}.about-media{justify-self:center}.border-container{width:200px;height:250px;margin:0 auto;border-radius:50%;overflow:hidden;position:relative;box-shadow:0 10px 30px #0000001f}.border{width:100%;height:100%;object-fit:cover;display:block}.border-container:before{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--bg-soft);z-index:-1}.about-copy{text-align:left}.about-cta{margin-top:16px;display:flex;flex-wrap:wrap;gap:12px}@media (max-width: 768px){.about{grid-template-columns:1fr;text-align:center}.about-copy{text-align:center}}.top-container,.bottom-container{background-color:#c4b7e7}.bottom-container{padding:50px 0 20px;margin-top:50px}.name{color:#eaf6f6;font-family:Montserrat,sans-serif}.code_img,.paint_img{width:15%;margin:30px}.code_img{float:left}.paint_img{float:right}.top-cloud{position:absolute;right:300px;top:50px;width:10%;height:15%}.bottom-cloud{position:absolute;left:300px;bottom:300px;width:10%;height:15%}:root{--accent:#13022b;--accent-2:#7859a5;--bg-soft:#ceedf4;--text:#264653;--text-on-dark:#fff;--text-on-light: #264653;--nav-h: 84px}html{scroll-behavior:smooth}body{padding-top:var(--nav-h);background:var(--bg-soft)}h1{font-family:Merriweather,serif;font-size:clamp(40px,8vw,72px);margin:50px auto 0;color:var(--text-on-light)}h2{font-size:clamp(22px,3vw,40px);font-weight:400;margin-top:0;color:var(--accent-2)}h3{color:var(--accent)}.contact-message{max-width:700px;margin:0 auto 70px;font-family:Montserrat,sans-serif}.btn{display:inline-block;border:2px solid var(--accent);background:linear-gradient(to bottom,var(--accent-2),var(--accent));color:var(--text-on-dark);font-family:Montserrat,sans-serif;font-size:18px;padding:10px 18px;border-radius:10px;line-height:1;margin:16px 10px}.btn:hover{background:linear-gradient(to bottom,var(--accent-2),#2bc4ad)}main,section{position:relative;z-index:5}.navbar{position:fixed;inset:0 0 auto;display:flex;align-items:center;gap:16px;padding:20px 16px;background:var(--accent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;border-bottom:1px solid rgba(255,255,255,.08);font-family:Montserrat,sans-serif}.navbar .brand{display:inline-flex;align-items:center;gap:10px;color:var(--text-on-dark);font-weight:700;letter-spacing:.2px;text-decoration:none;white-space:nowrap}.navbar .brand:after{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(45deg,#f0edf0,#ce97d5);box-shadow:0 0 8px #529de399}.navbar .nav-links{list-style:none;margin:0;padding:0;display:flex;gap:12px;flex:1;justify-content:space-evenly;align-items:center;min-width:0}.navbar .nav-links li{white-space:nowrap}.navbar .nav-links li button,.navbar .nav-links li a{background:none;border:0;color:#fff;font:inherit;cursor:pointer;padding:8px 10px;border-radius:10px;text-decoration:none}.navbar .nav-links li a:hover,.navbar .nav-links li button:hover{background:#ffffff1f}.navbar .nav-links .active{background:#2bc4ad33;outline:1px solid rgba(43,196,173,.35)}section[id]{scroll-margin-top:84px}.top-container{background:var(--bg-soft);padding-top:10px}.skill-row,.experience-row{max-width:1100px;width:90%}@media (max-width:900px){.code_img,.paint_img{width:120px;float:none;display:block;margin:0 auto 12px}.profile{width:90%}}#home{position:relative;min-height:90vh;overflow:hidden}#gameCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;background:transparent;pointer-events:none}.instructions{position:fixed;top:calc(var(--nav-h) + 12px);right:16px;z-index:90;background:#000000a6;color:#fff;padding:10px 12px;border-radius:10px;font-size:.9rem;text-align:left;transition:opacity .22s ease,transform .22s ease}.instructions kbd{background:#222;border-radius:4px;padding:1px 5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.instructions.fade{opacity:0;transform:translateY(-50px);pointer-events:none}.score-hud{position:fixed;top:calc(var(--nav-h) + 12px);left:16px;z-index:5;background:#00000094;color:#fff;padding:8px 10px;border-radius:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95rem}.score-hud.fade{opacity:0;transform:translateY(-50px);transition:opacity .22s ease,transform .22s ease;pointer-events:none}section.section{padding:clamp(48px,7vw,96px) 0;background:#eaddef;position:relative;color:var(--text-on-light);font-family:Montserrat,sans-serif}section.section .container{width:min(1100px,92vw);margin:0 auto}section.section.alt{background:#eadfef}.section+.section:before{content:"";position:absolute;inset:0 auto auto 50%;transform:translate(-50%);width:min(1100px,92vw);border-top:1px solid rgba(0,0,0,.06);margin-top:-1px}.section h2.section-title{font-family:Montserrat,sans-serif;font-size:clamp(24px,3.2vw,34px);margin:0 0 16px;letter-spacing:.2px}.section p.section-subtitle{color:#5b6b7a;margin:0 0 32px}.skillSubtitle{font-size:large}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.skill-card{padding:16px;border:1px solid rgba(0,0,0,.08);border-radius:12px;background:#fff}.skill-tags{display:flex;flex-wrap:wrap;gap:8px}.skill-tag{background:#eef7f7;color:var(--accent-2);padding:4px 8px;border-radius:999px;font-size:12px}#contact{max-height:20vh}.contact-buttons{display:flex;justify-content:center;gap:24px;margin-top:20px}.contact-btn{width:60px;height:60px;border-radius:12px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 2px 6px #00000014;color:var(--text-on-light)}.contact-btn:hover{background:var(--text-on-light);transform:translateY(-3px);box-shadow:0 6px 12px #00000026;color:#fff}