Move footer to bottom of page with proper styling

static/style.css

@@ -11,12 +11,17 @@ body {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     min-height: 100vh;
     color: #333;
+    display: flex;
+    flex-direction: column;
 }
 
 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 20px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
 }
 
 header {
@@ -338,10 +343,18 @@ header p {
     margin-bottom: 15px;
 }
 
-footer {
+main {
+    flex: 1;
+}
+
+.footer {
     text-align: center;
-    margin-top: 40px;
+    margin-top: auto;
+    padding: 20px 0;
     color: rgba(255,255,255,0.8);
+    background: rgba(0,0,0,0.1);
+    backdrop-filter: blur(10px);
+    border-top: 1px solid rgba(255,255,255,0.1);
 }
 
 /* Responsive Design */

templates/index.html

@@ -84,7 +84,7 @@
             </section>
         </main>
 
-        <footer>
+        <footer class="footer">
             <p>&copy; 2024 Memory Module Detection Project - QA Testing Interface</p>
         </footer>
     </div>