Improve 404 page.

src/pages/404.astro

@@ -1,15 +1,17 @@
 ---
-import styles from "../styles/NotFound.module.css"
+import styles from "../styles/404.module.css"
 import Layout from "../layouts/Layout.astro"
+import Divider from "../components/Divider.astro"
 ---
 
 <Layout page="Not Found">
 	<div id={styles.notFound}>
-		<h1 id={styles.header}>Page not found.</h1>
+		<h1 id={styles.header}>Page Not Found</h1>
+		<Divider />
 		<span id={styles.description}>
-			We couldn't find that page. Please return to our <a href="/">
-				home page
-			</a>.
+			We couldn't find that page. Please return to our <a href="/"
+				>home page</a
+			>.
 		</span>
 	</div>
 </Layout>

src/styles/404.module.css

@@ -0,0 +1,34 @@
+#notFound {
+	margin: 50px 20px;
+	display: flex;
+	padding: 60px 30px;
+	border-radius: 20px;
+	background: #1d2e3d;
+	align-items: center;
+	gap: 5px;
+	justify-content: center;
+	text-align: center;
+	flex-direction: column;
+	box-shadow: rgba(0, 0, 0, 0.5) 2px 10px 15px;
+}
+
+#notFound a {
+	color: var(--text-primary);
+}
+
+#header {
+	font-size: 3em;
+}
+
+#description {
+	font-size: 1.3em;
+	width: 50%;
+}
+
+@media (min-width: 800px) {
+	.notFound {
+		width: 60vw;
+		border-radius: 20px;
+		height: 65vh;
+	}
+}

src/styles/Jumbo.module.css

@@ -14,5 +14,6 @@
 }
 
 #jumbo #shortAbout {
-	padding: 20px 0;
+	display: block;
+	padding: 20px 10px;
 }

src/styles/NotFound.module.css

@@ -1,33 +0,0 @@
-#notFound {
-    display: flex;
-    padding: 50px 0px;
-    border-radius: 20px;
-    background: #161f27;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-    text-align: center;
-    flex-direction: column;
-    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
-}
-
-#notFound a {
-    color: var(--text-primary);
-}
-
-#header {
-    font-size: 2.5em;
-}
-
-#description {
-    font-size: 1.2em;
-    width: 50%;
-}
-
-@media (min-width: 800px) {
-    .notFound {
-        width: 60vw;
-        border-radius: 20px;
-        height: 65vh;
-    }
-}