/* base */
:root {
  --bg: #ffffff;
  --text: #222;
  --muted: #666;
  --accent: #0070f3;
  --accent-2: #00c4ff;
}

* { box-sizing: border-box; }
html,body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin:0;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background .25s, color .25s;
}

/* dark theme applied when root has .dark */
.dark {
  --bg: #0f1113;
  --text: #e8e8e8;
  --muted: #bbb;
  --accent: #59a6ff;
  --accent-2: #00a6d6;
}

/* header/nav */
header { background: #111; color: #fff; }
.dark header { background:#151617; }
.navbar{
  max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:1rem;
}
.logo a { color:inherit; text-decoration:none; font-weight:700; }
.nav-links { list-style:none; display:flex; gap:1rem; margin:0; padding:0; }
.nav-links a { color:inherit; text-decoration:none; font-weight:600; opacity:.95; }
.nav-links a:hover { color: var(--accent-2); }

/* hero */
.hero { padding:4rem 1.25rem; text-align:center; background: linear-gradient(135deg, var(--accent-2), var(--accent)); color:#fff; }
.dark .hero { background: linear-gradient(135deg, #2b3946, #0f2a44); color:#fff; }
.highlight { color:#ffeb3b; }

/* buttons */
button { font:inherit; }
#themeToggle { background: transparent; border: none; font-size:1.1rem; cursor:pointer; color: inherit; }
#clickMe { background: #fff; color: var(--accent); border:none; padding:.6rem 1rem; border-radius:8px; cursor:pointer; }
#clickMe:hover { background:#ffeb3b; color:#111; }

/* sections */
.about, .projects { max-width:900px; margin:0 auto; padding:3rem 1.25rem; text-align:center; color:var(--text); }

/* cards */
.card-container { display:flex; gap:1.25rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }
.card { width:250px; padding:1.25rem; border-radius:10px; background: #fff; box-shadow:0 6px 16px rgba(0,0,0,0.08); transition:transform .18s, box-shadow .18s; color:var(--text); }
.card:hover { transform: translateY(-6px) scale(1.03); box-shadow:0 12px 30px rgba(0,0,0,0.12); }
.dark .card { background:#172028; }

/* footer */
footer { padding:1rem; text-align:center; background:#f4f4f4; color:var(--muted); }
.dark footer { background:#111; color:var(--muted); }

/* top button */
#topBtn { position:fixed; right:20px; bottom:20px; border:none; background:var(--accent); color:#fff; padding:.6rem .8rem; border-radius:50%; display:none; cursor:pointer; }

/* small responsive niceties */
@media (max-width:640px){
  .nav-links { display:none; } /* keep it simple: you can add a mobile menu later */
  .hero h1 { font-size:1.8rem; }
}