body{background-color:#f9f9f9;color:#111}.dark body{background-color:#111;color:#f9f9f9}.navbar{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background-color:#fff;box-shadow:0 2px 8px #0000000d;position:sticky;top:0;z-index:1000;transition:background-color .3s ease,box-shadow .3s ease}.dark .navbar{background-color:#1a1a1a;box-shadow:0 2px 8px #ffffff0d}.navbar-logo{font-size:20px;font-weight:700;color:#111;transition:color .3s ease}.dark .navbar-logo{color:#f9f9f9}.navbar-links{list-style:none;display:flex;gap:24px;transition:all .3s ease}.navbar-links li a{text-decoration:none;color:#333;font-weight:500;transition:color .2s ease}.navbar-links li a:hover{color:#07f}.dark .navbar-links li a{color:#f0f0f0}.dark .navbar-links li a:hover{color:#6af}.burger{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer}.bar{width:24px;height:3px;background-color:#333;transition:all .3s ease}.dark .bar{background-color:#f0f0f0}@media (max-width: 768px){.burger{display:flex}.navbar-links{position:absolute;top:60px;right:0;background-color:#fff;flex-direction:column;width:100%;max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0}.navbar-links.open{max-height:300px;padding:16px 0}.navbar-links li{margin:12px 0;text-align:center}.dark .navbar-links{background-color:#1a1a1a}}.theme-toggle{background-color:transparent;border:1px solid #ccc;border-radius:6px;padding:8px 12px;cursor:pointer;font-size:14px;transition:background-color .3s ease}.theme-toggle:hover{background-color:#eee}.dark .theme-toggle{color:#fff;border-color:#555}.dark .theme-toggle:hover{background-color:#333}.projects-section{padding:48px 16px;text-align:center;background-color:#fff;transition:background-color .3s ease,color .3s ease}.dark .projects-section{background-color:#121212}.projects-section h2{font-size:2rem;margin-bottom:32px;color:#111}.dark .projects-section h2{color:#f9f9f9}.projects-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}.project-card{display:block;width:280px;padding:20px;background-color:#f7f7f7;border-radius:12px;text-decoration:none;color:#222;box-shadow:0 4px 12px #0000000f;transition:transform .2s ease,box-shadow .2s ease,background-color .3s ease,color .3s ease}.project-card:hover{transform:translateY(-4px);box-shadow:0 6px 16px #0000001a}.dark .project-card{background-color:#1e1e1e;color:#f1f1f1;box-shadow:0 4px 12px #ffffff0a}.project-card h3{margin-bottom:8px;font-size:1.2rem;color:inherit}.project-card p{font-size:.95rem;color:#555}.dark .project-card p{color:#ccc}.coming-soon{margin-top:32px;font-style:italic;color:#777}.dark .coming-soon{color:#aaa}.about-section{padding:48px 16px;text-align:center;background-color:#fafafa;color:#111;transition:background-color .3s ease,color .3s ease}.dark .about-section{background-color:#121212;color:#f9f9f9}.about-section h2{font-size:2rem;margin-bottom:16px;color:inherit}.about-section p{max-width:600px;margin:0 auto 16px;color:#444;transition:color .3s ease}.dark .about-section p{color:#ccc}.contact-section{padding:48px 16px;text-align:center;background-color:#fff;color:#111;transition:background-color .3s ease,color .3s ease}.dark .contact-section{background-color:#121212;color:#f9f9f9}.contact-section h2{font-size:2rem;margin-bottom:16px;color:inherit}.contact-section a{color:#07f;text-decoration:none;transition:color .2s ease,text-decoration .2s ease}.contact-section a:hover{text-decoration:underline}.dark .contact-section a{color:#6af}.dark .contact-section a:hover{color:#39f}.footer{padding:24px 16px;background-color:#f5f5f5;color:#333;text-align:center;font-size:14px;margin-top:48px;border-top:1px solid #ddd;transition:background-color .3s ease,color .3s ease,border-color .3s ease}.dark .footer{background-color:#1a1a1a;color:#f0f0f0;border-top:1px solid #444}.footer-links{margin-top:8px;display:flex;justify-content:center;flex-wrap:wrap;gap:16px}.footer-links a{color:#07f;text-decoration:none;transition:color .2s ease}.footer-links a:hover{color:#05c}.dark .footer-links a{color:#6af}.dark .footer-links a:hover{color:#39f}