add footer, improve style

client/src/App.css

@@ -1,7 +1,7 @@
 #root {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 0.5rem;
+  padding: 0px;
   text-align: center;
 }
 

client/src/Components/Css/Footer.css

@@ -0,0 +1,37 @@
+.footer {
+    display: flex;
+    justify-content: space-around;
+    width: 100%;
+    background-color: #1c1c1c;
+}
+
+.footer > * {
+    width: 150px;
+    padding: 50px;
+    color: #777;
+}
+
+.footer .left {
+    text-align: left;
+}
+.footer .left a {
+    color: #777;
+}
+.footer .left a:hover {
+    color: #aaa;
+}
+
+.footer .mid {
+    text-align: center;
+    color: #777;
+}
+
+.footer .right {
+    text-align: right;
+}
+.footer .right a {
+    color: #777;
+}
+.footer .right a:hover {
+    color: #aaa;
+}

client/src/Components/Footer.tsx

@@ -0,0 +1,15 @@
+import './Css/Footer.css'
+
+export default function Footer() {
+    return (
+        <div className="footer">
+            <div className="left">
+                <a href='https://mnrva.dev'>view the source code on github</a>
+            </div>
+            <div className="mid">&copy; MNRVA 2023</div>
+            <div className="right">
+                <a href='https://twitter.com/owltierdotcom'>follow owltier on twitter</a>
+            </div>
+        </div>
+    )
+}

client/src/Pages/Css/Main.css

@@ -9,5 +9,5 @@
 } */
 
 .full-container {
-    height: 900px;
+    min-height: calc(100vh - 182px);
 }

client/src/Pages/Home.tsx

@@ -1,11 +1,15 @@
 import { Outlet } from 'react-router-dom'
 import Header from '../Components/Header'
+import Footer from '../Components/Footer'
 
 export default function Home() {
     return (
+        <>
         <div className='full-container'>
-        <Header />
+            <Header />
-        <Outlet />
+            <Outlet /> 
         </div>
+        <Footer />
+        </>
     )
 }

client/src/index.css

@@ -28,7 +28,6 @@ body {
   display: flex;
   place-items: center;
   min-width: 320px;
-  min-height: 100vh;
 }
 
 h1 {