Initial design based off original website, some things still to do

src/styles/global.css

@@ -0,0 +1,79 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+@import "tailwindcss";
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+@theme {
+  --color-primary: #ff2d00;
+  --font-header: "Lutschine Bold", sans-serif;
+  --font-header-alt: "Lutschine Regular", sans-serif;
+  --font-body: "Roboto", sans-serif;
+
+  --animate-floaty: floaty 18s forwards linear infinite;
+
+  @keyframes floaty {
+    from {
+      transform: rotate(0deg) translateX(16px) rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg) translateX(16px) rotate(-360deg);
+    }
+  }
+
+  --animate-wiggle: wiggle 1s ease-in-out infinite;
+
+  @keyframes wiggle {
+    0%,
+    100% {
+      transform: rotate(-3deg);
+    }
+    50% {
+      transform: rotate(3deg);
+    }
+  }
+
+  --animate-scrolling-awards: scrolling-awards 24s linear infinite;
+
+  @keyframes scrolling-awards {
+    0% {
+      transform: translateY(1%);
+    }
+    1% {
+      transform: translateY(0.95%);
+    }
+    3% {
+      transform: translateY(0.7%);
+    }
+    85% {
+      transform: translateY(-50%);
+    }
+    88% {
+      transform: translateY(-50.5%);
+    }
+    89% {
+      transform: translateY(-50.4%);
+    }
+    96% {
+      transform: translateY(0.95%);
+    }
+    100% {
+      transform: translateY(1%);
+    }
+  }
+}
+
+@layer base {
+  @font-face {
+    font-family: "Lutschine Bold";
+    src: url("/fonts/lutschine-bold.otf") format("opentype");
+  }
+
+  @font-face {
+    font-family: "Lutschine Regular";
+    src: url("/fonts/lutschine-regular.otf") format("opentype");
+  }
+
+  html {
+    font-family: "Roboto", sans-serif;
+    @apply text-gray-600 dark:text-white;
+  }
+}