1 files changed, 82 insertions, 7 deletions
diff --git a/src/app/globals.css b/src/app/globals.css
index a2dc41e..b8ffc86 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,26 +1,101 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
+  --background: var(--color-white);
   --foreground: #171717;
+
+  --background-gradient: radial-gradient(
+    circle at 30% -30%,
+    var(--color-red-200),
+    var(--color-white),
+    var(--color-red-400)
+  );
+
+  /* --gradient-red: var(--color-red-200); */
+
+  --accent-color: var(--color-amber-900);
 }
 
+/* @media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+
+    --background-gradient: radial-gradient(
+      circle at 30% -30%,
+      var(--color-red-900),
+      var(--color-gray-700),
+      var(--color-red-800)
+    );
+  }
+} */
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
+  --color-accent: var(--accent-color);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+html {
+  scroll-behavior: smooth;
 }
 
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+
+  /* background: radial-gradient(
+      circle at bottom left,
+      transparent 25%,
+      #f61a1a 25.5%,
+      #f61a1a 36%,
+      transparent 37%,
+      transparent 100%
+    ),
+    radial-gradient(
+      circle at top right,
+      transparent 34%,
+      #f61a1a 34.5%,
+      #f61a1a 45.5%,
+      transparent 46%,
+      transparent 100%
+    );
+  background-size: 3em 3em;
+  background-color: #f1f1f1;
+  opacity: 0.85;
+
+  /* Add texture to background 
+  background-image: url("/public/white-carbon.png");
+  background-repeat: repeat;
+  background-size: contain; */
+}
+
+@layer utilities {
+  .text-gradient {
+    @apply bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent;
+  }
+  .button-gradient {
+    @apply bg-gradient-to-r from-blue-600 to-purple-600 text-white;
+  }
+}
+
+@theme inline {
+  --animate-cell-ripple: cell-ripple var(--duration, 200ms) ease-out none 1
+    var(--delay, 0ms);
+
+  @keyframes cell-ripple {
+    0% {
+      opacity: 0.4;
+    }
+    50% {
+      opacity: 0.8;
+    }
+    100% {
+      opacity: 0.4;
+    }
+  }
 }