diff --git a/styles.css b/styles.css index 78902e4..6737128 100644 --- a/styles.css +++ b/styles.css @@ -10,102 +10,50 @@ body { color: #0F0; } -#gameContainer { - position: relative; - width: 100%; - max-width: 1600px; - height: 0; - padding-bottom: 50%; /* Aspect ratio of 2:1 */ -} - #gameCanvas { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: 4px solid #0F0; + border: 4px solid #0F0; } #gameOver { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 24px; - text-align: center; - display: none; - background-color: rgba(0, 0, 0, 0.8); - padding: 20px; - border-radius: 10px; - z-index: 10; /* Ensure game over screen is on top */ - animation: pulse 2s infinite; + position: absolute; + font-size: 24px; + text-align: center; + display: none; + background-color: rgba(0, 0, 0, 0.8); + padding: 20px; + border-radius: 10px; + animation: pulse 2s infinite; } #gameOverHeader { - font-size: 48px; - margin-bottom: 10px; - color: #FF0000; - text-shadow: 0 0 10px #FF0000; + font-size: 48px; + margin-bottom: 10px; + color: #FF0000; + text-shadow: 0 0 10px #FF0000; } #gameOverSubheader { - font-size: 24px; - color: #FFA500; - text-shadow: 0 0 5px #FFA500; + font-size: 24px; + color: #FFA500; + text-shadow: 0 0 5px #FFA500; } #controls { - text-align: center; - margin-top: 20px; -} - -#controls h1 { - font-size: 24px; - color: #FFA500; - margin-bottom: 10px; -} - -#controls p { - font-size: 18px; - color: #FFF; - margin-bottom: 20px; -} - -#controls .center { - display: flex; - justify-content: center; - align-items: center; - gap: 10px; + margin-top: 20px; } @keyframes pulse { - 0% { transform: scale(1); } - 50% { transform: scale(1.05); } - 100% { transform: scale(1); } + 0% { transform: scale(1); } + 50% { transform: scale(1.05); } + 100% { transform: scale(1); } } #flashOverlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(255, 0, 0, 0.3); - display: none; -} - -footer { - text-align: center; - margin-top: 20px; - color: #FFF; -} - -footer a { - color: #0F0; - text-decoration: none; -} - -footer a:hover { - text-decoration: underline; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(255, 0, 0, 0.3); + display: none; }