* { margin: 0; padding: 0; box-sizing: border-box; } body, html { height: 100%; font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; background-color: #000; color: white; overflow: hidden; } .landing-page { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .game-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */ backdrop-filter: blur(8px); /* Apply blur effect to the background */ z-index: -1; /* Ensures it's in the background */ pointer-events: none; /* Prevent interaction with the blurred background */ } .content { text-align: center; z-index: 1; /* Ensure content appears above the game background */ padding: 20px; max-width: 600px; /* Limit the width of the content */ position: relative; color: white; backdrop-filter: blur(8px); /* Ensure content has some blur as well for contrast */ } h1 { font-size: 2rem; margin-bottom: 20px; } p { font-size: 1.2rem; margin-bottom: 30px; } button { padding: 12px 24px; background-color: #ffcc00; color: black; border: none; font-size: 18px; cursor: pointer; border-radius: 5px; text-transform: uppercase; transition: background-color 0.3s ease; } button:hover { background-color: #ff9900; }