From 84cc45028b7aacf6068beba91dcb8669130d0fe4 Mon Sep 17 00:00:00 2001
From: Satria <admin@satr14.my.id>
Date: Fri, 20 Mar 2026 06:51:00 +0700
Subject: [PATCH] move styles to css file

---
 src/app.css             | 19 +++++++++++++++++++
 src/routes/+page.svelte | 31 +------------------------------
 2 files changed, 20 insertions(+), 30 deletions(-)

diff --git a/src/app.css b/src/app.css
index 2386f1e..a6c53de 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,6 +1,17 @@
 @import "tailwindcss";
 @import "@catppuccin/tailwindcss/mocha.css";
 
+@property --rainbow-hue-top {
+  syntax: '<number>';
+  initial-value: 199;
+  inherits: true;
+}
+@property --rainbow-hue-bottom {
+  syntax: '<number>';
+  initial-value: 559;
+  inherits: true;
+}
+
 @font-face {
   font-family: Stray;
   font-display: swap;
@@ -18,6 +29,14 @@
     0% { transform: translateX(100%); }
     100% { transform: translateX(0%); }
   }
+  @keyframes rainbow {
+    0% { --rainbow-hue-top: 199; --rainbow-hue-bottom: 559; }
+    100% { --rainbow-hue-top: 559; --rainbow-hue-bottom: 199; }
+  }
+  @keyframes breathing {
+    0%, 100% { opacity: 0.15; }
+    50% { opacity: 0.3; }
+  }
 }
 
 @layer base {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index dc268d0..d9f7db7 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -64,36 +64,7 @@
     duration: 1500, easing: cubicOut
 }}></div>
 
-<svelte:head>
-    <style>
-        @property --rainbow-hue-top {
-            syntax: '<number>';
-            initial-value: 199;
-            inherits: true;
-        }
-        @property --rainbow-hue-bottom {
-            syntax: '<number>';
-            initial-value: 559;
-            inherits: true;
-        }
-        @keyframes rainbow {
-            0% { --rainbow-hue-top: 199; --rainbow-hue-bottom: 559; }
-            100% { --rainbow-hue-top: 559; --rainbow-hue-bottom: 199; }
-        }
-        @keyframes breathing {
-            0%, 100% { opacity: 0.15; }
-            50% { opacity: 0.3; }
-        }
-        @keyframes marquee {
-            0% { transform: translateX(0%); }
-            100% { transform: translateX(-100%); }
-        }
-        @keyframes marquee2 {
-            0% { transform: translateX(100%); }
-            100% { transform: translateX(0%); }
-        }
-    </style>
-</svelte:head>
+
 
 <div class="fixed top-0 left-0 w-full h-full overflow-hidden flex justify-center items-center select-none" transition:blur={{
     duration: 1000, easing: cubicOut,