Add 404 page

src/pages/404.astro

@@ -0,0 +1,38 @@
+---
+import Seo from '../components/seo.astro';
+import '../styles/404.css';
+---
+
+<html lang="en">
+  <head>
+    <title>Momentum Mod</title>
+    <meta charset="utf-8" />
+    <meta name="theme-color" content="#1896D3" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/png" href="/assets/favicon.png" />
+    <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
+
+    <Seo />
+  </head>
+
+  <body>
+    <header>
+      <img
+        class="logo"
+        src="/assets/images/logo.svg"
+        alt="Momentum Mod's Titlecard Logo"
+      />
+    </header>
+
+    <main>
+      <div class="not-found">404</div>
+      <div class="subheading">Returning back to main page...</div>
+    </main>
+  </body>
+</html>
+
+<script>
+  setTimeout(() => {
+    window.location.pathname = '/';
+  }, 3000);
+</script>

src/styles/404.css

@@ -0,0 +1,52 @@
+@import 'modern-normalize/modern-normalize.css';
+
+@import '../../styling/fonts/BebasNeue/700.css';
+
+@import '../../styling/colors/colors-css-vars.css';
+
+:root {
+  --font-display: 'Bebas Neue Momentum', sans-serif;
+}
+
+body {
+  margin: 0;
+  background-color: rgb(var(--gray-900));
+  color: white;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+header {
+  display: flex;
+  position: absolute;
+  width: 100%;
+  height: 4.5rem;
+
+  .logo {
+    padding: 10px 16px;
+    max-width: 100%;
+  }
+}
+
+main {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100vh;
+  flex-direction: column;
+
+  .not-found,
+  .subheading {
+    font-size: 2rem;
+    font-weight: 700;
+    font-family: var(--font-display);
+    line-height: 1;
+    -webkit-text-stroke: 8px rgb(var(--gray-700));
+    paint-order: stroke fill;
+  }
+
+  .not-found {
+    font-size: 8rem;
+  }
+}