* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:Arial, sans-serif; line-height:1.6; transition:background 0.3s, color 0.3s; }


header { position:fixed; top:0; width:100%; background:#222; color:#fff; z-index:1000; }
nav { display:flex; justify-content:space-between; align-items:center; padding:1rem; }
nav ul { display:flex; list-style:none; }
nav ul li { margin:0 1rem; }
nav ul li a { color:#fff; text-decoration:none; transition:color 0.3s; }
nav ul li a:hover { color:#f39c12; }
#modeToggle { background:none; border:none; color:#fff; font-size:1.2rem; cursor:pointer; }


.hero { height:100vh; display:flex; justify-content:center; align-items:center; background:linear-gradient(135deg,#74ebd5,#ACB6E5); position:relative; }
.hero-text { text-align:center; color:#222; }
.hero-text h2 span { color:#f39c12; }
.btn { display:inline-block; margin-top:1rem; padding:0.5rem 1rem; background:#f39c12; color:#fff; text-decoration:none; border-radius:5px; transition:transform 0.2s; }
.btn:hover { transform:scale(1.1); }


.floating-shapes::before, .floating-shapes::after {
  content:""; position:absolute; width:80px; height:80px; background:rgba(255,255,255,0.3);
  border-radius:50%; animation:float 6s infinite ease-in-out;
}
.floating-shapes::after { left:60%; top:20%; }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-20px);} }


section { padding:5rem 2rem; text-align:center; }
.avatar { width:150px; border-radius:50%; margin-bottom:1rem; }


.skills-grid { display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; }
.skill { background:#eee; padding:1rem 2rem; border-radius:8px; transition:transform 0.3s; }
.skill:hover { transform:scale(1.1); background:#f39c12; color:#fff; }


.project-card { background:#fff; padding:2rem; margin:1rem auto; max-width:500px; border-radius:8px; transition:transform 0.3s; border:2px solid #eee; box-shadow:0 4px 8px rgba(0,0,0,0.1); }
.project-card:hover { transform:scale(1.05); }

.hobbies-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; margin-top:2rem; }
.hobby-card { background:#fafafa; padding:1.5rem; border-radius:8px; transition:transform 0.3s; }
.hobby-card:hover { transform:scale(1.05); }
.hobby-img { width:100%; height:200px; object-fit:cover; border-radius:8px; cursor:pointer; transition:transform 0.3s; }
.hobby-img:hover { transform:scale(1.08); }
.hobby-card h3 { margin-top:1rem; color:#333; }
.hobby-card p { color:#666; margin-top:0.5rem; }

body.dark .hobby-card { background:#222; }
body.dark .hobby-card h3 { color:#fff; }
body.dark .hobby-card p { color:#bbb; }


.modal { display:none; position:fixed; z-index:2000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.8); animation:fadeIn 0.3s; }
.modal.show { display:flex; justify-content:center; align-items:center; }
.modal-content { max-width:90%; max-height:90vh; border-radius:8px; animation:zoomIn 0.3s; }
.close { position:absolute; right:2rem; top:2rem; color:#fff; font-size:2rem; cursor:pointer; transition:color 0.3s; }
.close:hover { color:#f39c12; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes zoomIn { from{transform:scale(0.8);} to{transform:scale(1);} }


.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; }
.gallery-grid img { width:100%; border-radius:8px; transition:transform 0.3s; }
.gallery-grid img:hover { transform:scale(1.1); }
.gallery-grid a{
    
    color:rgb(8, 20, 181);
}

body.dark { background:#111; color:#eee;
}
body.dark header { background:#000; }
body.dark .btn { background:#3498db; }
body.dark .project-card{color:#000;}
body.dark .skill{
    color:black;
}
body.dark .gallery-grid a{
    
    color:rgb(255,255,255);
}