*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Arial,sans-serif;line-height:1.5;transition:background-color .3s,color .3s}body.light{color:#222;background-color:#f5f5f5}body.dark{color:#f5f5f5;background-color:#121212}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.navbar{color:#fff;z-index:10;background-color:#222;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 2rem;display:flex;position:sticky;top:0}.logo{font-size:1.4rem}.nav-links{gap:1rem;list-style:none;display:flex}.theme-button,button,.hero-button{color:#fff;cursor:pointer;background-color:#444;border:none;border-radius:8px;padding:.7rem 1rem}.hero-button{margin-top:1rem;display:inline-block}main{max-width:1100px;margin:0 auto;padding:2rem}section{padding:4rem 0}.hero{justify-content:space-between;align-items:center;gap:2rem;min-height:70vh;display:flex}.hero-text{flex:1}.hero-text h1{margin-bottom:1rem;font-size:3rem}.hero-image img{object-fit:cover;border-radius:50%;width:260px;height:260px}.about h2,.projects h2,.contact h2{margin-bottom:1rem}.about-grid{grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem;display:grid}.about-card,.project-card{background-color:#ffffffb3;border-radius:12px;padding:1.2rem}body.dark .about-card,body.dark .project-card,body.dark .modal-content{background-color:#1e1e1e}.project-card h3{margin:1rem 0 .5rem}.projects-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:1.5rem;display:grid}.project-image,.modal-image{border-radius:10px;margin-bottom:1rem}.filters{flex-wrap:wrap;gap:.7rem;margin-top:1rem;display:flex}.contact,.footer{text-align:center}.contact p{margin-top:.8rem}.footer{padding:2rem}.modal-overlay{background-color:#0000008c;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal-content{color:#222;background-color:#fff;border-radius:12px;width:100%;max-width:600px;padding:2rem}body.dark .modal-content{color:#f5f5f5}.modal-content h2{margin-bottom:1rem}.modal-content p{margin-top:.8rem}@media (width<=768px){.navbar{flex-direction:column}.nav-links{flex-wrap:wrap;justify-content:center}.hero{text-align:center;flex-direction:column;min-height:auto;padding-top:2rem}.about-grid,.projects-grid{grid-template-columns:1fr}.hero-text h1{font-size:2.2rem}}