RAINBOWS

Need I say more?

resources/css/app.css

@@ -108,3 +108,66 @@ main a:not(.mod-list-component):not(.tab):not([role="menuitem"]) {
     transform-origin: 100% 100%;
     background-color: #0e7490;
 }
+
+.rainbow {
+    height: 100%;
+    width: 100%;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
+    background-size: 1800% 1800%;
+    -webkit-animation: rainbow 18s ease infinite;
+    -o-animation: rainbow 18s ease infinite;
+    animation: rainbow 18s ease infinite;
+}
+
+@-webkit-keyframes rainbow {
+    0% {
+        background-position: 0 82%
+    }
+    50% {
+        background-position: 100% 19%
+    }
+    100% {
+        background-position: 0 82%
+    }
+}
+
+@-moz-keyframes rainbow {
+    0% {
+        background-position: 0 82%
+    }
+    50% {
+        background-position: 100% 19%
+    }
+    100% {
+        background-position: 0 82%
+    }
+}
+
+@-o-keyframes rainbow {
+    0% {
+        background-position: 0 82%
+    }
+    50% {
+        background-position: 100% 19%
+    }
+    100% {
+        background-position: 0 82%
+    }
+}
+
+@keyframes rainbow {
+    0% {
+        background-position: 0 82%
+    }
+    50% {
+        background-position: 100% 19%
+    }
+    100% {
+        background-position: 0 82%
+    }
+}

resources/views/components/warning.blade.php

@@ -1,3 +1,4 @@
-<div class="items-center justify-between gap-x-6 text-gray-200 bg-gray-900 dark:text-gray-900 dark:bg-gray-100 px-6 py-2.5 sm:pr-3.5 lg:pl-8">
+<div class="relative items-center justify-between gap-x-6 text-gray-900 px-6 py-2.5 sm:pr-3.5 lg:pl-8">
-    <p class="text-center text-sm leading-6">Notice: The Forge is currently under <em class="font-bold">heavy</em> construction. Expect nothing to work. Data is reset every hour.</p>
+    <div class="rainbow z-0"></div>
+    <p class="relative z-10 text-center text-sm leading-6 font-bold" style="text-shadow: 0 0 15px white;">{!! __('The Forge is currently under <em>heavy</em> construction. Expect nothing to work. Data is reset every hour.') !!}</p>
 </div>

tailwind.config.js

@@ -2,7 +2,7 @@ import defaultTheme from "tailwindcss/defaultTheme";
 import forms from "@tailwindcss/forms";
 import typography from "@tailwindcss/typography";
 
-/** @type {import('tailwindcss').Config} */
+/** @type {import("tailwindcss").Config} */
 export default {
     darkMode: "selector",