diff --git a/styles.css b/styles.css index e4e78fb..49feca4 100644 --- a/styles.css +++ b/styles.css @@ -1,109 +1,126 @@ /* Estilos generales */ body { - font-family: 'Arial', sans-serif; + font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #eef3f7, #cfd9df); margin: 0; padding: 0; display: flex; flex-direction: column; - align-items: center; /* Centers children horizontally */ - justify-content: center; /* Centers children vertically */ + align-items: center; + justify-content: center; min-height: 100vh; color: #333; } -/* Header */ +/* Header y título */ #header { - margin: 20px auto; /* Changed margin-top to margin auto */ + margin: 20px auto; width: 100%; max-width: 800px; text-align: center; - padding: 0 20px; + padding: 20px; box-sizing: border-box; } #header h1 { - font-size: 2.5rem; + font-size: 2.8rem; color: #222; - margin-bottom: 15px; + margin-bottom: 30px; text-transform: uppercase; - letter-spacing: 1.2px; - text-align: center; /* Ensure heading is centered */ + letter-spacing: 1.5px; + font-weight: 700; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } -/* Centrar los botones en la parte inferior */ -#header-buttons { - display: flex; - justify-content: center; - align-items: center; - gap: 10px; - margin: 20px auto; /* Changed margin-top to margin auto */ - width: 100%; /* Added width */ +/* Contenedor del juego */ +.game-container { + background-color: white; + padding: 30px; + border-radius: 15px; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); + width: 90%; + max-width: 700px; + margin: 20px auto; } -/* Estilos para los botones */ -#header-buttons button { - background-color: #4CAF50; - color: white; - padding: 10px 20px; - border: none; - border-radius: 5px; - cursor: pointer; - font-size: 1rem; - transition: background-color 0.3s ease; +/* Á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; } -#header-buttons button:hover { - background-color: #45a049; +.text-input:focus { + outline: none; + border-color: #4CAF50; + box-shadow: 0 0 5px rgba(76, 175, 80, 0.3); } -/* Footer styles */ -.footer { - width: 100%; - padding: 20px 0; - background-color: #333; - color: white; - text-align: center; - position: fixed; - bottom: 0; - left: 0; +/* Estadísticas */ +.stats { + display: flex; + justify-content: space-around; + margin: 20px 0; + font-size: 1.2rem; + color: #555; } -.footer a { - color: #4CAF50; - text-decoration: none; - font-weight: bold; - transition: color 0.3s ease; +.stat-item { + background-color: #f5f5f5; + padding: 10px 20px; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } -.footer a:hover { - color: #45a049; - text-decoration: underline; +/* Botones */ +.button-container { + display: flex; + justify-content: center; + gap: 15px; + margin: 25px 0; } -/* Skip button styles */ -.skip-button { - background-color: #e74c3c; /* Red color to differentiate from green buttons */ - color: white; - padding: 10px 20px; +.game-button { + padding: 12px 25px; border: none; - border-radius: 5px; - cursor: pointer; + border-radius: 8px; font-size: 1rem; + font-weight: 600; + cursor: pointer; transition: all 0.3s ease; - margin: 10px; + text-transform: uppercase; + letter-spacing: 0.5px; } -.skip-button:hover { - background-color: #c0392b; /* Darker red on hover */ - transform: scale(1.05); /* Slight grow effect on hover */ +.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; } -.skip-button:active { - transform: scale(0.95); /* Slight shrink effect when clicked */ +.game-button:hover { + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } -/* If you want to add an icon (optional) */ -.skip-button i { - margin-right: 5px; +.game-button:active { + transform: translateY(0); }