Update static/style.css

static/style.css

@@ -75,15 +75,31 @@ button:hover {
   mix-blend-mode: overlay;
 }
 
+
+.background-container {
+    position: relative;
+    background-image: url('/static/psychedelic-pattern.png');
+    background-size: cover;
+    /* Ensure the container is large enough to display the content */
+    min-height: 100vh; /* Example height */
+}
+
 .color-overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            animation: colorChange 4s infinite;
-            mix-blend-mode: overlay;
-        }
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    animation: colorChange 10s infinite;
+    mix-blend-mode: overlay; /* Adjust blending mode as needed */
+}
+
+@keyframes colorChange {
+    0% { background-color: rgba(255, 0, 0, 0.6); } /* Red with transparency */
+    33% { background-color: rgba(0, 255, 0, 0.6); } /* Green with transparency */
+    66% { background-color: rgba(0, 0, 255, 0.6); } /* Blue with transparency */
+    100% { background-color: rgba(255, 0, 0, 0.6); } /* Back to Red */
+}
 /* Footer with wave-like pattern */
 /*footer {
   padding: 20px 0;