diff --git a/styles.css b/styles.css index 1adde58..53b2877 100644 --- a/styles.css +++ b/styles.css @@ -1,137 +1,61 @@ -/* General body styles */ +/* General styles */ body { + font-family: Arial, sans-serif; margin: 0; - font-family: Arial, Helvetica, sans-serif; - background-color: #1e1e1e; - color: #ffffff; + padding: 0; overflow: hidden; + background-color: #f4f4f4; } -/* Container styles */ -#quiz-container { +/* Contenedor de la escena 3D */ +#scene-container { position: absolute; - top: 10%; - left: 10%; - background-color: rgba(255, 255, 255, 0.95); - color: #333333; - padding: 20px; - border-radius: 10px; - box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); - max-width: 400px; - overflow-y: auto; - max-height: 80vh; -} - -h3, h4 { - margin-top: 0; - color: #444444; -} - -label { - font-size: 0.9em; - margin-bottom: 5px; - display: block; - color: #666666; -} - -input[type="number"] { + top: 0; + left: 0; width: 100%; - padding: 8px; - margin-bottom: 15px; - border: 1px solid #ccc; - border-radius: 5px; + height: 100%; } -button { - background-color: #007bff; - color: white; - padding: 10px 20px; - border: none; - border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s ease; -} - -button:hover { - background-color: #0056b3; -} - -/* Lobby styles */ +/* Estilo del lobby */ #lobby-container { position: absolute; - top: 50%; + top: 20%; left: 50%; - transform: translate(-50%, -50%); + transform: translateX(-50%); text-align: center; - background-color: rgba(0, 0, 0, 0.8); - padding: 40px; - border-radius: 10px; - box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.4); + color: #333; } #lobby-container h1 { - color: #ffffff; - margin-bottom: 20px; - font-size: 2em; + font-size: 32px; + margin-bottom: 30px; } #lobby-container button { - margin: 10px 0; + font-size: 18px; padding: 12px 24px; - font-size: 1em; - background-color: #28a745; + margin: 10px; + cursor: pointer; + background-color: #4CAF50; + color: white; border: none; border-radius: 5px; - color: white; - cursor: pointer; - transition: background-color 0.3s ease; } #lobby-container button:hover { - background-color: #218838; + background-color: #45a049; } -/* Cube and Stats Panel */ -#stats-panel { +/* Estilo del cuestionario */ +#quiz-container { position: absolute; - top: 10px; - right: 10px; - background-color: rgba(255, 255, 255, 0.9); - color: #333; + top: 15%; + left: 50%; + transform: translateX(-50%); + text-align: center; + display: none; + max-width: 500px; + width: 100%; padding: 20px; - border-radius: 10px; - max-width: 200px; - box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); -} - -#stats-panel ul { - list-style-type: none; - padding: 0; -} - -#stats-panel li { - margin: 5px 0; - font-size: 0.9em; -} - -/* Responsive Design */ -@media (max-width: 768px) { - #quiz-container { - left: 5%; - right: 5%; - width: auto; - max-width: none; - } - - #lobby-container { - width: 90%; - padding: 20px; - } - - #stats-panel { - top: auto; - bottom: 10px; - right: 10px; - max-width: 150px; - } -} + background-color: white; + box-shadow: 0 4px 10px rgba(0, 0,