change the bottom bar of the page to fit the red color scheme

components/footer.js

@@ -4,11 +4,12 @@ class CustomFooter extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>
         footer {
-          background: #1f2937;
-          color: #d1d5db;
+          background: #7f1d1d;
+          color: #fecaca;
           padding: 2rem 0;
+          border-top: 1px solid #ef4444;
         }
-        .container {
+.container {
           max-width: 1280px;
           margin: 0 auto;
           padding: 0 1rem;
@@ -20,13 +21,14 @@ class CustomFooter extends HTMLElement {
         .subtext {
           margin-top: 0.5rem;
           font-size: 0.875rem;
+          letter-spacing: 0.05em;
         }
-      </style>
+</style>
       <footer>
         <div class="container">
-          <p>© ${new Date().getFullYear()} Oskar Lundmark Koblanck. All rights reserved.</p>
-          <p class="subtext">Crafting immersive gaming experiences</p>
-        </div>
+          <p class="text-lg">© ${new Date().getFullYear()} Oskar Lundmark Koblanck. All rights reserved.</p>
+          <p class="subtext text-red-200">Game Designer & Developer</p>
+</div>
       </footer>
     `;
   }