Update to tailwind V4

src/styles/global.css

@@ -1,11 +1 @@
-@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
 
-* {
-  color: white;
-  font-family: 'Rubik', Sans-serif;
-}
-
-hr {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}

src/styles/tailwind.css

@@ -0,0 +1,45 @@
+@import 'tailwindcss';
+@theme {
+  --breakpoint-*: initial;
+  --breakpoint-md: 880px;
+
+  --color-dark: #212529;
+  --color-dark-hover: #2b3035;
+  --color-gold: #ffdb37;
+  --color-btn-gray: rgb(108, 117, 125);
+  --color-btn-disabled: rgba(108, 117, 125, 0.65);
+  --color-gray: #3f3f3f;
+  --color-gray-hover: #4f4f4f;
+  --color-soc-green: #4b7667;
+  --color-soc-green-dark: rgba(17, 17, 17, 0.7);
+  --color-link: rgb(110, 168, 254);
+  --color-hover-link: #00d4ff;
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+
+  * {
+    color: white;
+    font-family: 'Rubik', Sans-serif;
+  }
+
+  hr {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+}