Can you give it a darker color scheme that is easy on the eyes - Follow Up Deployment

index.html

@@ -12,14 +12,14 @@
             theme: {
                 extend: {
                     colors: {
-                        parchment: '#f5f0e1',
-                        leather: '#8b4513',
-                        mystic: '#4a235a',
-                        dragon: '#c41e3a',
-                        forest: '#228b22',
+                        parchment: '#1a1a1a',
+                        leather: '#3a2a1a',
+                        mystic: '#2a1a3a',
+                        dragon: '#9a1a2a',
+                        forest: '#1a5a1a',
                         pink: {
-                            600: '#db2777',
-                            700: '#be185d',
+                            600: '#7a1a4a',
+                            700: '#5a1a3a',
                         },
                     },
                     fontFamily: {
@@ -32,21 +32,21 @@
     </script>
     <style>
         body {
-            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%231e1e1e"/><path d="M0 0L100 100M100 0L0 100" stroke="%232a2a2a" stroke-width="1"/></svg>');
-            color: #f5f0e1;
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23101010"/><path d="M0 0L100 100M100 0L0 100" stroke="%23151515" stroke-width="1"/></svg>');
+            color: #d0d0d0;
         }
         
         .parchment-bg {
-            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><rect width="200" height="200" fill="%23f5f0e1"/><path d="M0 0L200 200M200 0L0 200" stroke="%23e8e0c9" stroke-width="1"/></svg>');
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><rect width="200" height="200" fill="%231a1a1a"/><path d="M0 0L200 200M200 0L0 200" stroke="%23222222" stroke-width="1"/></svg>');
             background-size: cover;
-            color: #3c2a21;
+            color: #d0d0d0;
             box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
             border: 2px solid #8b4513;
         }
         
         .leather-border {
             border: 8px solid transparent;
-            border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%238b4513"/><path d="M0 0L100 100M100 0L0 100" stroke="%235d3a12" stroke-width="2"/></svg>') 30 stretch;
+            border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%233a2a1a"/><path d="M0 0L100 100M100 0L0 100" stroke="%232a1a0a" stroke-width="2"/></svg>') 30 stretch;
         }
         
         .scroll-effect {
@@ -61,7 +61,7 @@
             left: -100%;
             width: 50%;
             height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
             animation: scrollEffect 3s infinite;
         }
         
@@ -188,7 +188,7 @@
     </div>
 
     <!-- Header -->
-    <header class="bg-black bg-opacity-80 py-4 px-6 border-b-4 border-dragon">
+    <header class="bg-black bg-opacity-90 py-4 px-6 border-b-4 border-dragon">
         <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
             <div class="flex items-center mb-4 md:mb-0">
                 <div class="bg-gray-800 border-2 border-dragon rounded-full w-16 h-16 flex items-center justify-center mr-4">
@@ -375,7 +375,7 @@
     </main>
 
     <!-- Footer -->
-    <footer class="bg-black bg-opacity-80 py-4 px-6 border-t-4 border-mystic">
+    <footer class="bg-black bg-opacity-90 py-4 px-6 border-t-4 border-mystic">
         <div class="container mx-auto text-center">
             <p class="text-gray-400">Fantasy Quest - AI-Powered DnD Platform | Craft your legend</p>
             <div class="flex justify-center space-x-4 mt-2">