Fix homepage footer

src/App.css

@@ -0,0 +1,10 @@
+.Content {
+    display: flex;
+    height: 100vh;
+    justify-content: space-between;
+    flex-direction: column;
+}
+
+.Footer {
+    flex-shrink: 0;
+}

src/App.tsx

@@ -1,25 +1,34 @@
-import PageScrollProgress from "./PageScrollProgress";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
-import Footer from "./Footer";
+import PageScrollProgress from './PageScrollProgress';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Footer from './Footer';
 
-import RegistrationPage from "./RegistrationPage";
-import HistoryPage from "./HistoryPage";
-import MainPage from "./MainPage";
-import NotFoundPage from "./NotFoundPage";
+import RegistrationPage from './RegistrationPage';
+import HistoryPage from './HistoryPage';
+import MainPage from './MainPage';
+import NotFoundPage from './NotFoundPage';
+
+import './App.css';
 
 const App = () => (
-  <>
-    <PageScrollProgress />
-    <BrowserRouter>
-      <Routes basename="/2021">
-        <Route path="/registration" element={<RegistrationPage />} />
-        <Route path="/history" element={<HistoryPage />} />
-        <Route path="/" element={<MainPage />} />
-        <Route path="*" element={<NotFoundPage />} />
-      </Routes>
-    </BrowserRouter>
-    <Footer />
-  </>
+    <div className='Content'>
+        <div>
+            <PageScrollProgress />
+            <BrowserRouter>
+                <Routes basename='/2021'>
+                    <Route
+                        path='/registration'
+                        element={<RegistrationPage />}
+                    />
+                    <Route path='/history' element={<HistoryPage />} />
+                    <Route path='/' element={<MainPage />} />
+                    <Route path='*' element={<NotFoundPage />} />
+                </Routes>
+            </BrowserRouter>
+        </div>
+        <div className="Footer">
+            <Footer />
+        </div>
+    </div>
 );
 
 export default App;

src/Footer/footer.module.css

@@ -1,11 +1,7 @@
 .footer {
   background-color: var(--theme-primary);
   color: #fff;
-  margin-top: auto;
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  width: 100%;
+  margin-top: auto; 
   padding-top: 1rem;
   padding-bottom: 1rem;
 }

src/MainPage/Landing/landing.module.css

@@ -1,5 +1,5 @@
 .hero {
-  height: 100%;
+  height: 100vh;
   min-height: 750px;
   padding-top: 5%;
   /* position: relative; */