shift footer to the bottom of the page

pages/_app.tsx

@@ -8,9 +8,22 @@ export default function App({ Component, pageProps }: AppProps) {
 	return (
 		<>
 			<SEO />
-			<Navigation />
+			<div
-			<Component {...pageProps} />
+				style={{
-			<Footer />
+					display: "flex",
+					flexDirection: "column",
+					justifyContent: "space-between",
+					minHeight: "100vh",
+				}}
+			>
+				<div>
+					<Navigation />
+					<Component {...pageProps} />
+				</div>
+				<div>
+					<Footer />
+				</div>
+			</div>
 		</>
 	);
 }

styles/globals.scss

@@ -26,11 +26,6 @@ body {
 	color: var(--color);
 	min-height: 100vh;
 	font-family: var(--fonts-norm);
-	display: flex;
-	flex-direction: column;
-	.footer {
-		justify-self: end;
-	}
 }
 h1,
 h2,