Update index.html

index.html

@@ -231,6 +231,7 @@
             border-bottom: 2px solid var(--card-border);
             padding-bottom: 2%;
             margin-bottom: 4%;
+            flex-shrink: 0;
         }
         .card-header h2 {
             margin: 0;
@@ -288,6 +289,31 @@
             text-align: center;
         }
 
+        .card-footer {
+            margin-top: auto; /* Pushes footer to the bottom */
+            padding-top: 2%;
+            flex-shrink: 0;
+            height: 5vh;
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            font-size: 3vh;
+            font-family: 'Playfair Display', serif;
+        }
+        .card-footer .cancan-bar {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+        }
+        .card-footer-item {
+            z-index: 1;
+            text-shadow: 0 0 5px var(--bg-color);
+        }
+
         /* Responsive adjustments for the top bar */
         @media (max-width: 900px) {
             #top-bar {