+error fix

src/routes/+error.svelte

@@ -1,16 +1,27 @@
-<!-- This page handles any error encountered by the site. -->
 <script>
 	import { page } from '$app/stores';
 </script>
 
 {#if $page.status === 404}
-	<div class="flex flex-col items-center">
+	<div class="flex flex-col items-center m-4 py-8">
 		<div
-			class="relative mb-[3.33vh] flex h-96 w-96 items-center justify-center rounded-full bg-404"
+			class="relative mb-[3.33vh] flex h-24 w-24 md:h-64 md:w-64 items-center justify-center bg-surface-800"
 		>
-			<h1 class="h1 absolute text-h1 leading-[5rem]">404</h1>
+			<img
+				class="object-fill"
+				src="/animations/travolta_confused.webp"
+				alt="Travolta Confused gif"
+			/>
+
+			<h1 class="h1 absolute leading-[5rem] text-white">404</h1>
 		</div>
-		<h2 class="h4 mb-x-small">You just hit a route that doesn't exist</h2>
+		<h2 class="h4 mb-2">
+			? My God, what are you doing here, this page doesn't exist and so on and so on.
+		</h2>
+		<p>
+			This site either never existed or just suddenly committed disappearance from this
+			universe.
+		</p>
 	</div>
 {:else}
 	<h2>{$page.status}</h2>
@@ -19,8 +30,10 @@
 		<p class="subhead">{$page.error.message}</p>
 	{/if}
 
-	<p><strong>Sorry!</strong> Maybe try one of these links?</p>
+	<p><strong>Sorry!</strong> A grave error has occured. Maybe try one of these links?</p>
 	<ul>
 		<li><a href="/">Home</a></li>
+		<li><a href="/blog">Blog</a></li>
+		<li><a href="/projects">Projects</a></li>
 	</ul>
 {/if}