diff --git a/styles.css b/styles.css index 49feca4..5e48714 100644 --- a/styles.css +++ b/styles.css @@ -10,6 +10,7 @@ body { justify-content: center; min-height: 100vh; color: #333; + box-sizing: border-box; } /* Header y título */ @@ -19,7 +20,6 @@ body { max-width: 800px; text-align: center; padding: 20px; - box-sizing: border-box; } #header h1 { @@ -30,97 +30,15 @@ body { letter-spacing: 1.5px; font-weight: 700; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); + line-height: 1.2; } /* Contenedor del juego */ .game-container { - background-color: white; + background-color: #ffffff; padding: 30px; border-radius: 15px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); width: 90%; max-width: 700px; - margin: 20px auto; -} - -/* Área de texto */ -.text-input { - width: 100%; - padding: 15px; - margin: 20px 0; - border: 2px solid #e0e0e0; - border-radius: 8px; - font-size: 1.1rem; - transition: border-color 0.3s ease; -} - -.text-input:focus { - outline: none; - border-color: #4CAF50; - box-shadow: 0 0 5px rgba(76, 175, 80, 0.3); -} - -/* Estadísticas */ -.stats { - display: flex; - justify-content: space-around; - margin: 20px 0; - font-size: 1.2rem; - color: #555; -} - -.stat-item { - background-color: #f5f5f5; - padding: 10px 20px; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); -} - -/* Botones */ -.button-container { - display: flex; - justify-content: center; - gap: 15px; - margin: 25px 0; -} - -.game-button { - padding: 12px 25px; - border: none; - border-radius: 8px; - font-size: 1rem; - font-weight: 600; - cursor: pointer; - transition: all 0.3s ease; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.start-button { - background-color: #4CAF50; - color: white; -} - -.language-button { - background-color: #2196F3; - color: white; -} - -.pause-button { - background-color: #FFA000; - color: white; -} - -.reset-button { - background-color: #f44336; - color: white; -} - -.game-button:hover { - transform: translateY(-2px); - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); -} - -.game-button:active { - transform: translateY(0); -} + margin: