body { margin: 0px; padding: 0px; background: radial-gradient(circle at center, rgb(255, 255, 255) 0%, rgb(255, 150, 50) 20%, rgb(255, 40, 0) 35%, rgb(110, 0, 150) 55%, rgb(5, 10, 35) 100% ) } #game { margin: 3px auto 0px auto; padding: 0px; width: 1280px; height: 650px; } #canvas { width: 1280px; height: 650px; margin: 0px; background-color: rgb(0, 0, 0); } #startMenu { position: absolute; width: 1280px; height: 650px; top: 0; left: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; font-family: 'Poppins', Arial, sans-serif; animation: fadeIn 1s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .title { font-size: 90px; margin-bottom: 40px; color: #ffffff; letter-spacing: 4px; font-weight: 900; text-shadow: 2px 2px 0px #00bcd4, 4px 4px 0px #009bb0, 6px 6px 0px #007a8c, 8px 8px 0px #005a68, 10px 10px 12px rgba(0, 234, 255, 0.7), 0 0 25px #00eaff; animation: pixelGlow 2s infinite alternate ease-in-out; } @keyframes pixelGlow { from { text-shadow: 2px 2px 0px #00eaff, 4px 4px 0px #00bcd4, 6px 6px 0px #009bb0, 8px 8px 0px #007a8c, 10px 10px 14px rgba(0, 234, 255, 0.9), 0 0 35px #00eaff; } to { text-shadow: 2px 2px 0px #00eaff, 3px 3px 0px #00bcd4, 5px 5px 0px #009bb0, 7px 7px 0px #007a8c, 9px 9px 12px rgba(0, 234, 255, 0.7), 0 0 20px #00eaff; } } .menuButton { font-size: 28px; padding: 15px 55px; margin: 12px; cursor: pointer; background: linear-gradient(145deg, #111, #1b1b1b); color: white; border: 2px solid #00eaff; border-radius: 40px; box-shadow: 0 4px 0 #00bcd4, 0 0 12px rgba(0, 234, 255, 0.4), inset 0 0 15px rgba(0, 234, 255, 0.2); transition: 0.3ease-in-out; } .menuButton:hover { background: #00eaff; color: #000; transform: translateY(-5px) scale(1.08); box-shadow: 0 10px 20px rgba(0, 234, 255, 0.6), 0 0 30px #00eaff; }