Update styles.css

Author: Maurux01

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);
 }