*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;background-color:#1e1e1e;color:#f5f5f5}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}header{position:fixed;width:100%;top:0;left:0;background-color:rgb(30 30 30 / .95);backdrop-filter:blur(8px);z-index:1000}.navbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;max-width:1200px;margin:auto}.navbar .logo{font-size:1.8rem;font-weight:700;color:#f5c518}.nav-links{list-style:none;display:flex;gap:2rem}.nav-links li a{font-weight:500;transition:0.3s}.nav-links li a:hover{color:#f5c518}.hamburger{display:none;flex-direction:column;cursor:pointer;gap:5px}.hamburger span{width:25px;height:3px;background-color:#f5f5f5;transition:0.3s}.hero-section{height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 2rem;background:linear-gradient(135deg,#2a1c12,#0d0906)}.hero-section h1{font-size:3rem;margin-bottom:1rem;color:#f5c518;animation:fadeInDown 1s ease forwards}.hero-section p{font-size:1.3rem;margin-bottom:2rem;color:#f5f5f5;animation:fadeInUp 1s ease forwards}.btn-primary{padding:.8rem 1.8rem;background-color:#f5c518;color:#1e1e1e;font-weight:700;border-radius:50px;transition:0.3s}.btn-primary:hover{background-color:#e0b50f;transform:translateY(-3px)}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-50px)}100%{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(50px)}100%{opacity:1;transform:translateY(0)}}.projects-section{padding:6rem 2rem 4rem;background-color:#121212;text-align:center}.projects-section h2{font-size:2.5rem;margin-bottom:3rem;color:#f5c518}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;max-width:1200px;margin:auto}.project-card{background-color:#1e1e1e;border-radius:12px;overflow:hidden;box-shadow:0 6px 20px rgb(0 0 0 / .5);transition:transform 0.3s,box-shadow 0.3s}.project-card:hover{transform:translateY(-10px);box-shadow:0 12px 25px rgb(0 0 0 / .7)}.project-card img{width:100%;height:180px;object-fit:cover}.project-info{padding:1.5rem}.project-info h3{margin-bottom:1rem;color:#f5c518}.project-info p{font-size:.95rem;margin-bottom:1.2rem;color:#ddd}.project-link{font-weight:700;color:#f5c518;transition:0.3s}.project-link:hover{color:#fff;text-decoration:underline}.about-section{padding:6rem 2rem;max-width:1000px;margin:auto;line-height:1.8}.about-section h2{font-size:2.5rem;margin-bottom:2rem;text-align:center;color:#f5c518}.about-section p{font-size:1rem;margin-bottom:1.5rem;text-align:justify}.skills-section{padding:6rem 2rem;background-color:#121212;text-align:center}.skills-section h2{font-size:2.5rem;margin-bottom:3rem;color:#f5c518}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;max-width:1200px;margin:auto}.skill-card{background-color:#1e1e1e;border-radius:12px;padding:2rem 1rem;box-shadow:0 6px 20px rgb(0 0 0 / .5);transition:transform 0.3s,box-shadow 0.3s}.skill-card:hover{transform:translateY(-8px);box-shadow:0 12px 25px rgb(0 0 0 / .7)}.skill-card h3{margin-bottom:.8rem;color:#f5c518}.skill-card p{font-size:.9rem;color:#ddd}.contact-section{padding:6rem 2rem;text-align:center}.contact-section h2{font-size:2.5rem;margin-bottom:1.5rem;color:#f5c518}.contact-section p{font-size:1rem;margin-bottom:2rem}.footer{padding:2rem;text-align:center;background-color:#1e1e1e;border-top:1px solid #333;font-size:.9rem;color:#aaa}.music-control{position:fixed;bottom:20px;right:20px;z-index:1000}.music-control button{background-color:#f5c518;color:#1e1e1e;border:none;padding:.6rem 1rem;border-radius:50px;font-weight:700;cursor:pointer;transition:0.3s}.music-control button:hover{background-color:#e0b50f;transform:translateY(-2px)}@media (max-width:768px){.nav-links{display:none;flex-direction:column;background-color:#1e1e1e;position:absolute;top:100%;right:0;width:200px;padding:1rem;border-radius:0 0 8px 8px}.nav-links.active{display:flex}.hamburger{display:flex}}