change footer

src/App.css

@@ -52,7 +52,7 @@ body {
 .last-update {
   width: 100%;
   font-size: small;
-  text-align: end;
+  text-align: center;
   font-weight: 200;
 }
 
@@ -99,10 +99,6 @@ body {
   align-items: center;
 }
 
-.last-update {
-  margin-right: 10vw;
-}
-
 @media screen and (min-width: 320px) {
   .numeric-card {
     height: 200px;
@@ -305,7 +301,7 @@ body {
     text-align: center;
     align-self: center;
     font-size: xx-large;
-    background-color: rgb(215, 192, 252);
+    background-color: rgb(207, 235, 250);
   }
 
   .title-text {
@@ -405,4 +401,14 @@ div.bar {
   padding-right: 1em;
   margin-bottom: 2px;
   text-align: right;
+}
+
+.footer {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background-color: rgb(185, 181, 181);
+  color: black;
+  text-align: center;
 }

src/App.js

@@ -138,8 +138,9 @@ function App() {
           <Card title={"Trait"} counter={traits} backgroundColor={'rgb(237, 190, 190)'} />
           <Card title={"Disease"} counter={diseases} backgroundColor={'rgb(249, 195, 195)'} />
         </div>
+      </div>
 
-        <div className='footer'>
+      <div className='footer'>
           <div className='last-update'>
             Updated At: {Date(lastUpdate).toLocaleString()}
           </div>
@@ -148,7 +149,6 @@ function App() {
             Developed by <img className="dev-logo" src={require('./smi-logo-120x120.webp')} /> ShanMukha
           </div>
         </div>
-      </div>
     </div>
   );
 }