Animated text

1 files changed, 43 insertions, 0 deletions

diff --git a/themes/vapor/static/style.css b/themes/vapor/static/style.css
index 3b0f147..5cc708d 100644
--- a/themes/vapor/static/style.css
+++ b/themes/vapor/static/style.css
@@ -34,6 +34,49 @@ header h1 {
     font-family: 'Courier New', monospace;
     color: #ffe066;
     text-shadow: 3px 3px 0px #00ff99;
+    animation: float 3s ease-in-out infinite, rainbowText 8s linear infinite;
+}
+
+/* Animation to make the header float up and down */
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
+}
+
+/* Animation to change the text color through a rainbow of vaporwave neon pastels */
+@keyframes rainbowText {
+    0% {
+        color: #ffe066;
+        text-shadow: 3px 3px 0px #00ff99;
+    }
+    16% {
+        color: #ff77e9;
+        text-shadow: 3px 3px 0px #00f9ff;
+    }
+    32% {
+        color: #ff4da6;
+        text-shadow: 3px 3px 0px #ff00ff;
+    }
+    48% {
+        color: #00f9ff;
+        text-shadow: 3px 3px 0px #ff77e9;
+    }
+    64% {
+        color: #ffe066;
+        text-shadow: 3px 3px 0px #ff4da6;
+    }
+    80% {
+        color: #ff00ff;
+        text-shadow: 3px 3px 0px #00ff99;
+    }
+    100% {
+        color: #ffe066;
+        text-shadow: 3px 3px 0px #00ff99;
+    }
 }
 
 footer {