//comments: 
    



*{
    box-shadow: 1px 1px 1px green;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);     
    border-radius: 4em;
}

img {

•     filter: blur (50px);
• animation: flicker 3s infinite;

} 

@keyframes flicker {
     0%, 100% {
         filter: none;

•     transform: translateX(0) translateY(0) scale(1); 
•     opacity: 1;
• }
•   25% {  
  • filter: hue-rotate(180deg) saturate(2) brightness(1.2);
  • transform: translateX(-5px) scale(1.02); 
  • opacity: 0.8; 
  •   } 

  10% { 
          filter: invert(1) contrast(2) blur(2px); 

•     transform: translateY(5px) scale(1.05); 
•     opacity: 0.6; 

}
    75% { 
            filter: sepia(1) hue-rotate(360deg) brightness(0.8); 
            transform: translateX(5px) scale(0.98); 
            opacity: 0.9; 
        }
    }
    

img {
  filter: blur(5px); /* Initial blur effect */
  animation: flicker 3s infinite;
  width: 100%; /* Ensures scaling works properly */
  height: auto;
  image-rendering: pixelated; /* Makes scaling appear pixelated */
}

@keyframes flicker {
  0%, 100% {
    filter: blur(5px); /* Regular blur at start and end */
    transform: scale(1); /* Normal size */
  }
  50% {
    filter: none; /* No blur during flicker */
    transform: scale(2); /* Scaled up to create pixelation */
  }
}


    
body {
  background: radial-gradient(white,aqua, white,aqua, green, blue, white, green);
  font-family: 'Jokerman'
  color: #333; 
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

header {
  background:radial-gradient(white,aqua, white,aqua, green, blue, white, green);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  padding: 1rem 2rem;
  border-radius: 0 0 20px 20px;
}

header h1 {
  font-size: 2.5rem;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Buttons */

.aqua-button {
  background: linear-gradient(145deg, #00d4ff, #0088cc);
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  padding: 15px 30px;
  border: none;
  border-radius: 50px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2), inset 0px 2px 5px rgba(255, 255, 255, 0.5);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
}

.aqua-button:hover {
  background: linear-gradient(145deg, #00b0e0, #006faa);
  box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.3), inset 0px 3px 8px rgba(255, 255, 255, 0.5);
  transform: translateY(-3px);
}

.aqua-button:active {
  background: linear-gradient(145deg, #0088cc, #00b0e0);
  box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.3), 0px 2px 5px rgba(255, 255, 255, 0.3);
  transform: translateY(2px);
}


/* Navigation Bar */
nav {
  display: flex;
  justify-content: space-around;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  border-radius: 20px;
}

nav a {
  text-decoration: none;
  font-size: 1rem;
  color: #0078d7;
  padding: 0.5rem 1rem;
  transition: color 0.2s ease, background 0.2s ease;
}

nav a:hover {
  background: #0078d7;
  color: #fff;
  border-radius: 10px;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* Typography */
h1, h2, h3 {
  font-family: 'Jokerman';
  text-shadow: 0 15px 15px rgba(0, 0, 0, 0.2);
}

p {
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
}

/* Footer */
footer {
  background: linear-gradient(to top, #88c8f4, #aad6f1);
  padding: 1rem;
  text-align: center;
  color: #fff;
  font-size: 0.9rem;
  border-radius: 20px 20px 0 0;
}

*/
*{
all: revert !important;
}
*/