Upload style.css

static/style.css

@@ -0,0 +1,88 @@
+/* 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;
+  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;
+  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('psychedelic-pattern.png'); /* Replace with the actual path to your psychedelic pattern image */
+  background-size: cover;
+  text-align: center;
+}
+
+/* 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;
+}
+
+/* Media queries for responsiveness */
+@media (max-width: 768px) {
+  /* Adjust styles for smaller screens */
+}