static/style2.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;
  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.2);
}

/* Main content with psychedelic patterns */
.main-content {
  padding: 50px;
  background-image: url('/static/IMG_3008.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/IMG_3008.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: colorAndScaleChange 10s infinite;
    mix-blend-mode: overlay; /* Adjust blending mode as needed */
    z-index: 1;
}
.background-container > *:not(.color-overlay) {
    position: relative;
    z-index: 2;
  /*  overflow: hidden;*/ /* To contain the scaling of the overlay */
}
@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%;
    }
}

@keyframes colorAndScaleChange {
    0%, 100% { 
        background-color: rgba(255, 0, 0, 0.6);
        transform: scale(1); /* Normal size */
    }
    33% { 
        background-color: rgba(0, 255, 0, 0.6);
        transform: scale(1.1); /* Slightly larger */
    }
    66% { 
        background-color: rgba(0, 0, 255, 0.6);
        transform: scale(1.2); /* Even larger */
    }
}



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 */
}