I want this to have cursive font I want the font color to be emerald green and I want the background to be dark theme black

components/footer.js

@@ -4,12 +4,12 @@ class CustomFooter extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>
         footer {
-          background: rgba(255, 255, 255, 0.98);
-color: #4b5563;
+          background: rgba(0, 0, 0, 0.98);
+          color: #10b981;
           padding: 2rem 1rem;
           text-align: center;
-          border-top: 1px solid #e5e7eb;
-        }
+          border-top: 1px solid #10b981;
+}
         .footer-content {
           max-width: 1200px;
           margin: 0 auto;
@@ -21,8 +21,8 @@ color: #4b5563;
         .footer-section h3 {
           font-weight: 600;
           margin-bottom: 1rem;
-          color: #1f2937;
-        }
+          color: #10b981;
+}
         .footer-section ul {
           list-style: none;
           padding: 0;
@@ -32,13 +32,13 @@ color: #4b5563;
           margin-bottom: 0.5rem;
         }
         .footer-section a {
-          color: #4b5563;
+          color: #10b981;
           text-decoration: none;
           transition: color 0.2s;
         }
         .footer-section a:hover {
-          color: #000;
-        }
+          color: #34d399;
+}
         .social-links {
           display: flex;
           gap: 1rem;
@@ -46,18 +46,18 @@ color: #4b5563;
           margin-top: 2rem;
         }
         .social-links a {
-          color: #6b7280;
+          color: #10b981;
           transition: color 0.2s;
         }
         .social-links a:hover {
-          color: #000;
-        }
+          color: #34d399;
+}
         .copyright {
           margin-top: 2rem;
           padding-top: 1rem;
-          border-top: 1px solid #e5e7eb;
+          border-top: 1px solid #10b981;
           font-size: 0.875rem;
-        }
+}
         @media (max-width: 768px) {
           .footer-content {
             grid-template-columns: 1fr;

components/navbar.js

@@ -4,18 +4,18 @@ class CustomNavbar extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>
         nav {
-          background: rgba(255, 255, 255, 0.98);
-backdrop-filter: blur(4px);
+          background: rgba(0, 0, 0, 0.98);
+          backdrop-filter: blur(4px);
           padding: 0.75rem 2rem;
-display: flex;
+          display: flex;
           justify-content: space-between;
           align-items: center;
-          border-bottom: 1px solid #e2e8f0;
-position: relative;
-          z-index: 50;
+          border-bottom: 1px solid #10b981;
+          position: relative;
+z-index: 50;
         }
         .logo { 
-          color: #2b6cb0;
+          color: #10b981;
           font-weight: bold;
           font-size: 1.25rem;
 display: flex;
@@ -35,7 +35,7 @@ ul {
           padding: 0;
         }
         a { 
-          color: #1a365d;
+          color: #10b981;
           text-decoration: none;
           transition: all 0.2s;
           font-weight: 600;
@@ -46,13 +46,13 @@ ul {
           border-radius: 0.5rem;
         }
         a:hover { 
-          background: #ebf8ff;
-          color: #2b6cb0;
+          background: rgba(16, 185, 129, 0.1);
+          color: #10b981;
         }
         .active {
-          background: #ebf8ff;
-          color: #2b6cb0;
-        }
+          background: rgba(16, 185, 129, 0.1);
+          color: #10b981;
+}
 @media (max-width: 768px) {
           nav {
             flex-direction: column;

create.html

@@ -12,9 +12,9 @@
     <custom-navbar></custom-navbar>
     
     <main class="flex-grow p-6">
-        <div class="max-w-md mx-auto bg-white p-6 rounded-lg shadow">
-            <h1 class="text-2xl font-bold mb-4">Create New Project</h1>
-            <form class="space-y-4">
+        <div class="max-w-md mx-auto bg-black border border-emerald-500 p-6 rounded-lg shadow">
+            <h1 class="text-2xl font-bold mb-4 text-emerald-500">Create New Project</h1>
+<form class="space-y-4">
                 <div>
                     <label class="block mb-1">Project Name</label>
                     <input type="text" class="w-full p-2 border rounded">

download.html

@@ -12,9 +12,9 @@
     <custom-navbar></custom-navbar>
     
     <main class="flex-grow flex items-center justify-center">
-        <div class="text-center p-6 bg-white rounded-lg shadow-md max-w-md mx-4">
-            <h1 class="text-3xl font-bold mb-4 text-gray-800">Download App</h1>
-            <div class="flex flex-col gap-4">
+        <div class="text-center p-6 bg-black border border-emerald-500 rounded-lg shadow-md max-w-md mx-4">
+            <h1 class="text-3xl font-bold mb-4 text-emerald-500">Download App</h1>
+<div class="flex flex-col gap-4">
                 <a href="#" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition">
                     Download for Windows
                 </a>

help.html

@@ -12,9 +12,9 @@
     <custom-navbar></custom-navbar>
     
     <main class="flex-grow p-6">
-        <div class="max-w-3xl mx-auto bg-white p-6 rounded-lg shadow">
-            <h1 class="text-2xl font-bold mb-6">Help Center</h1>
-            <div class="space-y-4">
+        <div class="max-w-3xl mx-auto bg-black border border-emerald-500 p-6 rounded-lg shadow">
+            <h1 class="text-2xl font-bold mb-6 text-emerald-500">Help Center</h1>
+<div class="space-y-4">
                 <div>
                     <h3 class="font-medium text-lg">How to create a new project?</h3>
                     <p class="text-gray-600">Click "New Project" on the homepage or in the navigation bar.</p>

index.html

@@ -14,10 +14,10 @@
     <custom-navbar></custom-navbar>
     
     <main class="flex-grow flex items-center justify-center" id="vanta-bg">
-        <div class="text-center p-6 bg-white rounded-lg shadow-md max-w-md mx-4">
-            <h1 class="text-3xl font-bold mb-4 text-gray-800">Mrs T's Funhouse</h1>
+        <div class="text-center p-6 bg-black border border-emerald-500 rounded-lg shadow-md max-w-md mx-4">
+            <h1 class="text-3xl font-bold mb-4 text-emerald-500">Mrs T's Funhouse</h1>
 <div class="flex flex-col gap-3">
-                <a href="/create.html" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition">
+<a href="/create.html" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition">
                     New Project
                 </a>
                 <a href="/projects.html" class="px-4 py-2 bg-gray-100 text-gray-800 rounded hover:bg-gray-200 transition">
@@ -50,7 +50,7 @@
         })
     </script>
 <script src="https://huggingface.co/deepsite/deepsite-plehttps://huggingface.co/deepsite/deepsite-pleasease provide a downloadable ink Link 
-badge please provide a downloadable ink Link download link 
+badge please provide a downloadable ink Link download Link k 
 .js"></script>
 </body>
 </html>mrst"funhouse

projects.html

@@ -13,10 +13,10 @@
     
     <main class="flex-grow p-6">
         <div class="max-w-3xl mx-auto">
-            <h1 class="text-2xl font-bold mb-6">My Projects</h1>
+            <h1 class="text-2xl font-bold mb-6 text-emerald-500">My Projects</h1>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div class="bg-white p-4 rounded-lg shadow border hover:shadow-md transition">
-                    <h3 class="font-medium mb-2">Project 1</h3>
+                <div class="bg-black border border-emerald-500 p-4 rounded-lg shadow hover:shadow-md transition">
+<h3 class="font-medium mb-2">Project 1</h3>
                     <p class="text-sm text-gray-600 mb-2">Last edited: Today</p>
                     <a href="#" class="text-blue-600 text-sm">Open →</a>
                 </div>

style.css

@@ -1,11 +1,12 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap');
 body {
-    font-family: 'Inter', sans-serif;
-    background-color: #f8fafc;
+    font-family: 'Dancing Script', cursive;
+    background-color: #000;
+    color: #10b981;
     margin: 0;
     padding: 0;
 }
-
 /* Ensure content takes full height */
 html, body {
     height: 100%;