Crystal Maze

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51

<div className="min-h-screen w-full relative">  {/* Crystal Maze Pattern */}  <style>{`    @keyframes crystal-shimmer {      0%, 100% {         background-position: 0% 0%, 0% 0%, 0% 0%, 50% 50%;        background-size: 10px 10px, 10px 10px, 200% 200%, 200% 200%;      }      50% {         background-position: 1px 1px, -1px -1px, 100% 100%, 50% 50%;        background-size: 12px 12px, 12px 12px, 200% 200%, 180% 180%;      }    }  `}</style>  <div    className="absolute inset-0 z-0"    style={{      background: `        repeating-linear-gradient(          60deg,          transparent 0px,          transparent 1px,          rgba(255, 255, 255, 0.05) 1px,          rgba(255, 255, 255, 0.05) 2px        ),        repeating-linear-gradient(          -60deg,          transparent 0px,          transparent 1px,          rgba(255, 255, 255, 0.05) 1px,          rgba(255, 255, 255, 0.05) 2px        ),        linear-gradient(          60deg,          rgba(43, 108, 176, 0.4) 0%,          rgba(72, 126, 176, 0.4) 33%,          rgba(95, 142, 176, 0.4) 66%,          rgba(116, 157, 176, 0.4) 100%        ),        radial-gradient(          circle at 50% 50%,          rgba(255, 255, 255, 0.2) 0%,          transparent 50%        )      `,      backgroundBlendMode: "overlay, overlay, normal, screen",      animation: "crystal-shimmer 15s ease-in-out infinite",    }}  />  {/* Your Content/Components */}</div>