fix: make footer sticky at viewport bottom while scrolling (#56)

- Add position:fixed to .footer so it stays visible at the bottom
- Add padding-bottom to body to prevent content hiding behind footer
- Reposition back-to-top button above the fixed footer (desktop & mobile)

Author: nishtha-agarwal-211

web-app/css/styles.css

@@ -42,6 +42,7 @@ body {
     color: var(--text-color);
     line-height: 1.6;
     transition: background-color var(--motion-duration) ease, color var(--motion-duration) ease;
+    padding-bottom: 6rem;
 }
 
 #main-content {
@@ -877,10 +878,14 @@ body {
 /* Footer */
 .footer {
     background: var(--surface-color);
-    padding: 2rem 0;
+    padding: 1rem 0;
     text-align: center;
     border-top: 2px solid var(--primary-color);
-    margin-top: 4rem;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    z-index: 1000;
 }
 
 .footer a {
@@ -897,7 +902,7 @@ body {
 .back-to-top {
     position: fixed;
     right: 1.5rem;
-    bottom: 1.5rem;
+    bottom: 6.5rem;
     width: 3.25rem;
     height: 3.25rem;
     border: none;
@@ -995,7 +1000,7 @@ body {
 
     .back-to-top {
         right: 1rem;
-        bottom: 1rem;
+        bottom: 6.5rem;
         width: 3rem;
         height: 3rem;
     }
@@ -1151,4 +1156,4 @@ body {
         transform: none;
     }
 }
-}
+}