static/style.css

/* 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('/static/psychedelic-pattern.png'); /* Replace with the actual path to your psychedelic pattern image */
  background-size: cover;
  text-align: center;
}

.color-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            animation: colorChange 4s infinite;
            mix-blend-mode: overlay;
        }
/* 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 */
}