improve the download cv button not aligned. Also the white theme isnt visible enough, text are mostly white and background too.

index.html

@@ -53,7 +53,7 @@
   </div>
 
   <!-- Header -->
-  <header class="fixed top-0 inset-x-0 z-50 border-b border-white/5 bg-[color:rgb(var(--bg)_/_0.6)] backdrop-blur supports-[backdrop-filter]:bg-[color:rgb(var(--bg)_/_0.5)]">
+  <header class="fixed top-0 inset-x-0 z-50 border-b border-white/5 bg-[color:rgb(var(--bg)_/_0.6)] backdrop-blur supports-[backdrop-filter]:bg-[color:rgb(var(--bg)_/_0.5)]" style="background-image: radial-gradient(circle, rgba(var(--color-primary-500), 0.1) 1px, transparent 1px); background-size: 20px 20px;">
     <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
       <div class="flex h-16 items-center justify-between">
         <a href="#" class="flex items-center gap-2 group">
@@ -62,8 +62,7 @@
           </span>
           <span class="text-sm font-semibold tracking-tight text-zinc-100">CoolDev</span>
         </a>
-
-        <nav class="hidden md:flex items-center gap-1">
+<nav class="hidden md:flex items-center gap-1">
           <a href="#about" class="nav-link">About</a>
           <a href="#projects" class="nav-link">Projects</a>
           <a href="#experience" class="nav-link">Experience</a>
@@ -113,12 +112,12 @@
             </p>
             <div class="mt-8 flex flex-wrap items-center gap-3">
               <a href="#projects" class="btn-primary">View Projects</a>
-              <a href="#" class="btn-ghost" id="download-cv">
+              <a href="#" class="btn-ghost inline-flex items-center gap-2" id="download-cv">
                 <i data-feather="download-cloud"></i>
                 Download CV
               </a>
             </div>
-            <div class="mt-8 flex flex-wrap items-center gap-2 text-sm text-zinc-400">
+<div class="mt-8 flex flex-wrap items-center gap-2 text-sm text-zinc-400">
               <span class="px-2 py-1 rounded-md bg-white/5 border border-white/10">React</span>
               <span class="px-2 py-1 rounded-md bg-white/5 border border-white/10">Next.js</span>
               <span class="px-2 py-1 rounded-md bg-white/5 border border-white/10">Vue</span>

style.css

@@ -12,13 +12,81 @@
   --primary: var(--color-primary-500);
   --secondary: var(--color-secondary-500);
 }
-
 /* Light theme overrides */
 html.light {
   --bg: 250 250 250;
   --fg: 15 23 42;
 }
 
+/* Light theme specific adjustments */
+html.light .glass-card {
+  background: rgba(255, 255, 255, 0.8);
+  border-color: rgba(15, 23, 42, 0.1);
+}
+
+html.light .text-zinc-100 {
+  color: rgb(15, 23, 42);
+}
+
+html.light .text-zinc-200 {
+  color: rgb(30, 41, 59);
+}
+
+html.light .text-zinc-300 {
+  color: rgb(71, 85, 105);
+}
+
+html.light .text-zinc-400 {
+  color: rgb(100, 116, 139);
+}
+
+html.light .border-white\/10 {
+  border-color: rgba(15, 23, 42, 0.1);
+}
+
+html.light .bg-white\/5 {
+  background: rgba(15, 23, 42, 0.05);
+}
+
+html.light .bg-white\/10 {
+  background: rgba(15, 23, 42, 0.1);
+}
+
+html.light .nav-link {
+  color: rgb(71, 85, 105);
+}
+
+html.light .nav-link:hover {
+  color: rgb(15, 23, 42);
+  background: rgba(15, 23, 42, 0.05);
+}
+
+html.light .mobile-link {
+  color: rgb(71, 85, 105);
+}
+
+html.light .mobile-link:hover {
+  color: rgb(15, 23, 42);
+  background: rgba(15, 23, 42, 0.05);
+}
+
+html.light input, 
+html.light textarea {
+  background: rgba(15, 23, 42, 0.05);
+  border-color: rgba(15, 23, 42, 0.15);
+  color: rgb(15, 23, 42);
+}
+
+html.light input::placeholder, 
+html.light textarea::placeholder {
+  color: rgb(100, 116, 139);
+}
+
+html.light .chip {
+  background: rgba(15, 23, 42, 0.05);
+  border-color: rgba(15, 23, 42, 0.1);
+  color: rgb(71, 85, 105);
+}
 * { -webkit-tap-highlight-color: transparent; }
 
 html, body {