Add Christmas decorations and theme styles

Introduced a ChristmasDecorations component with animated snowflakes, twinkling stars, and festive emojis. Updated global CSS and Tailwind config to include Christmas-themed animations, colors, and effects. Integrated the decorations into the main layout for a seasonal appearance.

components/christmas-decorations.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+export function ChristmasDecorations() {
+  const [snowflakes, setSnowflakes] = useState<Array<{ id: number; left: number; delay: number; duration: number }>>([])
+
+  useEffect(() => {
+    // Generate snowflakes
+    const flakes = Array.from({ length: 30 }, (_, i) => ({
+      id: i,
+      left: Math.random() * 100,
+      delay: Math.random() * 5,
+      duration: 8 + Math.random() * 4,
+    }))
+    setSnowflakes(flakes)
+  }, [])
+
+  return (
+    <div className="fixed inset-0 pointer-events-none z-50 overflow-hidden">
+      {/* Snowflakes */}
+      {snowflakes.map((flake) => (
+        <div
+          key={flake.id}
+          className="absolute top-0 text-white/60 text-xs animate-snowflake"
+          style={{
+            left: `${flake.left}%`,
+            animationDelay: `${flake.delay}s`,
+            animationDuration: `${flake.duration}s`,
+          }}
+        >
+          ❄
+        </div>
+      ))}
+      
+      {/* Twinkling stars in corners */}
+      <div className="absolute top-4 left-4 text-yellow-300 animate-twinkle text-lg">
+        ✨
+      </div>
+      <div className="absolute top-4 right-4 text-yellow-300 animate-twinkle text-lg" style={{ animationDelay: '0.5s' }}>
+        ✨
+      </div>
+      <div className="absolute bottom-4 left-4 text-yellow-300 animate-twinkle text-lg" style={{ animationDelay: '1s' }}>
+        ✨
+      </div>
+      <div className="absolute bottom-4 right-4 text-yellow-300 animate-twinkle text-lg" style={{ animationDelay: '1.5s' }}>
+        ✨
+      </div>
+
+      {/* Christmas tree emoji decorations */}
+      <div className="absolute top-8 left-1/4 text-green-500/40 animate-sparkle text-xl" style={{ animationDelay: '2s' }}>
+        🎄
+      </div>
+      <div className="absolute top-8 right-1/4 text-green-500/40 animate-sparkle text-xl" style={{ animationDelay: '3s' }}>
+        🎄
+      </div>
+    </div>
+  )
+}
+