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/Divider.module.css

@@ -1,35 +1,35 @@
 .container {
-    width: 100%;
-    display: flex;
-    justify-content: center;
+	width: 100%;
+	display: flex;
+	justify-content: center;
 }
 
 .dividerIcon {
-    margin: 10px 0 15px;
-    position: relative;
+	margin: 10px 0 15px;
+	position: relative;
 }
 
 .dividerIcon svg {
-    height: 2rem;
-    width: 2rem;
-    color: inherit;
+	height: 2rem;
+	width: 2rem;
+	color: inherit;
 }
 
 .dividerIcon::before,
 .dividerIcon::after {
-    border-bottom: 0.5rem solid var(--text-primary);
-    border-radius: 5em;
-    content: "";
-    margin: 0 1em;
-    position: absolute;
-    top: 50%;
-    width: 7rem;
+	border-bottom: 0.5rem solid var(--text-primary);
+	border-radius: 5em;
+	content: "";
+	margin: 0 1em;
+	position: absolute;
+	top: 50%;
+	width: 7rem;
 }
 
 .dividerIcon::before {
-    right: 100%;
+	right: 100%;
 }
 
 .dividerIcon::after {
-    left: 100%;
+	left: 100%;
 }

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;
-    }
-}