Update static/css/styles.css

static/css/styles.css

@@ -2,7 +2,7 @@
 body {
     margin: 0;
     font-family: 'Comic Sans MS', 'Chalkduster', cursive;
-    background: linear-gradient(135deg, #00CED1 0%, #FFD700 50%, #FF69B4 100%); /* Vibrant gradient */
+    background: url('/static/assets/vrindavan-bg.jpg') no-repeat center center/cover; /* Use the edited image as background */
     color: #333;
     overflow-x: hidden;
     position: relative;
@@ -20,40 +20,39 @@ body {
 .welcome {
     font-size: 3em;
     color: #FF4500; /* Bright orange for the welcome text */
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), 0 0 10px #FFD700; /* Glowing effect */
-    animation: glow 2s ease-in-out infinite alternate;
+    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8); /* White shadow for readability */
+    animation: fadeIn 2s ease-in-out;
 }
 
-@keyframes glow {
-    from {
-        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), 0 0 10px #FFD700;
-    }
-    to {
-        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), 0 0 20px #FF69B4;
-    }
+@keyframes fadeIn {
+    0% { opacity: 0; transform: translateY(-20px); }
+    100% { opacity: 1; transform: translateY(0); }
 }
 
 h2 {
     font-size: 1.5em;
     color: #FF1493; /* Deep pink */
-    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
+    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8);
+    animation: fadeIn 2s ease-in-out 0.5s;
 }
 
 .countdown, .daily-message, .daily-blessing, .daily-horoscope {
-    background: rgba(255, 255, 255, 0.8);
+    background: rgba(255, 255, 255, 0.9); /* Slightly more opaque for readability */
     padding: 15px;
     margin: 10px 0;
     border-radius: 10px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    animation: fadeIn 2s ease-in-out 1s;
 }
 
 .countdown p, .daily-message p, .daily-blessing p, .daily-horoscope p {
     margin: 0;
     font-size: 1.2em;
+    color: #333;
 }
 
 .special {
-    background: rgba(255, 215, 0, 0.3); /* Gold tint for special messages */
+    background: rgba(255, 215, 0, 0.5); /* Gold tint for special messages */
 }
 
 .verse {
@@ -81,27 +80,4 @@ nav a {
 
 nav a:hover {
     color: #FF69B4; /* Pink on hover */
-}
-
-/* Particle container */
-#particles-js {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-}
-
-/* Background image with flowers and hills */
-body::before {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: url('/static/assets/vrindavan-bg.jpg') no-repeat center center/cover;
-    opacity: 0.3; /* Slight transparency to blend with gradient */
-    z-index: -1;
 }