Upload style 2.css

static/style 2.css

@@ -0,0 +1,145 @@
+/* Psychedelic Styles */
+@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
+
+/* Reset CSS */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Kaushan Script', cursive;
+  text-align: center;
+  background-color: #000;
+  color: #FFF;
+  overflow-x: hidden;
+}
+
+/* Gradient animation for backgrounds */
+@keyframes gradient-animation {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+/* Header styles with a dynamic gradient */
+header {
+  padding: 20px 0;
+  background-image: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00ab, #ff0000);
+  background-size: 300% 300%;
+  animation: gradient-animation 10s ease infinite;
+  color: white;
+  text-align: center;
+}
+
+/* Nav bar links with a glow effect */
+nav a {
+  text-decoration: none;
+  color: #FFF;
+  background-color: #000;
+  padding: 10px;
+  border-radius: 5px;
+  transition: background-color 0.3s ease-in-out;
+}
+
+nav a:hover {
+  box-shadow: 0 0 10px #FFF, 0 0 40px #FFF, 0 0 80px #FFF;
+}
+
+/* Psychedelic button styles */
+button {
+  background: #8518f2; /* Fallback for browsers that do not support gradients */
+  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00ab);
+  border: none;
+  color: white;
+  padding: 10px 20px;
+  cursor: pointer;
+  border-radius: 5px;
+  animation: gradient-animation 15s ease infinite;
+  font-family: 'Kaushan Script', cursive;
+  font-size: 1.1em;
+  transition: transform 0.2s ease;
+}
+
+button:hover {
+  transform: scale(1.05);
+}
+
+/* Main content with psychedelic patterns */
+.main-content {
+  padding: 50px;
+  background-image: url('/static/psychedelic-pattern.png'); /* Replace with the actual path to your psychedelic pattern image */
+  background-size: cover;
+  text-align: center;
+  animation: colorChange 4s infinite;
+  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 10s infinite;
+    mix-blend-mode: overlay; /* Adjust blending mode as needed */
+    z-index: 1;
+}
+.background-container > *:not(.color-overlay) {
+    position: relative;
+    z-index: 2;
+}
+@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;
+  background-image: linear-gradient(45deg, #ff00ab, #002bff, #00ffd5, #48ff00, #fffb00, #ff7300, #ff0000);
+  background-size: 300% 300%;
+  animation: gradient-animation 15s ease infinite;
+  text-align: center;
+  color: white;
+}
+*/
+@keyframes gradient-and-color-animation {
+    0% {
+        background-color: blue; /* Example color */
+        background-position: 0% 50%;
+    }
+    50% {
+        background-color: green; /* Example color */
+        background-position: 100% 50%;
+    }
+    100% {
+        background-color: red; /* Example color */
+        background-position: 0% 50%;
+    }
+}
+
+footer {
+    padding: 20px 0;
+    background-image: linear-gradient(45deg, #ff00ab, #002bff, #00ffd5, #48ff00, #fffb00, #ff7300, #ff0000);
+    background-size: 300% 300%;
+    animation: gradient-and-color-animation 15s ease infinite;
+    text-align: center;
+    color: white;
+}
+
+/* Media queries for responsiveness */
+@media (max-width: 768px) {
+  /* Adjust styles for smaller screens */
+}