Add new Metal Mania font for /unauthorized + background void image

app/routes/unauthorized.tsx

@@ -1,18 +1,35 @@
-import {
-  type MetaFunction,
-} from "@remix-run/node";
+import { type MetaFunction } from "@remix-run/node";
 
 export const meta: MetaFunction = () => {
   return [
     { title: "Unauthorized • Divinity" },
-    { name: "description", content: "Whatcha doing here lil bro? You ain\'t supposed to be here! 😡" },
+    {
+      name: "description",
+      content: "Whatcha doing here lil bro? You ain't supposed to be here! 😡",
+    },
   ];
 };
 
 export default function Unauthorized() {
   return (
-    <main className="relative h-dvh">
-      test
+    <main className="relative flex h-dvh items-center justify-center bg-black">
+      <img
+        className="relative z-10 object-contain mix-blend-luminosity duration-1000 animate-in fade-in"
+        src="/unauthorized.webp"
+        alt="Unauthorized"
+        width="1920"
+        height="1080"
+      />
+
+      <div className="absolute inset-0 z-20 flex flex-col items-center justify-center gap-4 text-center font-metal_mania">
+        <h1 className="text-4xl font-bold text-white delay-500 duration-1000 animate-in fade-in slide-in-from-top-1 fill-mode-backwards">
+          Unauthorized
+        </h1>
+        <p className="max-w-md text-lg text-white delay-500 duration-1000 animate-in fade-in slide-in-from-bottom-1 fill-mode-backwards">
+          The void consumes all. You are not supposed to be here. Go back to
+          where you belong...
+        </p>
+      </div>
     </main>
   );
 }

app/tailwind.css

@@ -213,3 +213,8 @@
   font-weight: 700;
   font-style: italic;
 }
+
+@font-face {
+  font-family: "Metal Mania";
+  src: url("/fonts/MetalMania-Regular.woff2") format("woff2");
+}

tailwind.config.ts

@@ -17,6 +17,7 @@ export default {
         neue_haas_grotesk: ['"Neue Haas Grotesk"', "sans-serif"],
         atskinon_hyperlegible: ['"Atskinon Hyperlegible"', "sans-serif"],
         anta: ['"Anta"', "sans-serif"],
+        metal_mania: ['"Metal Mania"', "cursive"],
       },
       colors: {
         border: "hsl(var(--border))",