/* Cargado automáticamente desde : */ /* Estilos generales */ *{ text-decoration: none; } body { background-color: #f0f4f8; font-family: 'Baloo 2'; color:#006064; display: flex; justify-content: center; padding: 30px; } /* Contenedor principal */ .container { max-width: 400px; width: 100%; padding: 20px; border-radius: 16px; box-shadow: 0 0 20px #00000050; text-align: center; font-weight: 900; background-color: #fff; } /* Caja de imagen */ .image-box { text-align: center; margin: 10px 0; } .image-box img { width: 50%; height: auto; border-radius: 8px; } /* Texto instrucción */ .instruction { font-size: 1.1em; margin-bottom: 10px; } /* Pronombre mostrado */ .word-card { display: flex; justify-content: center; align-items: center; margin: auto; border-radius: 10px; padding: 10px; margin-top:-20px; font-size: 14px; width: 100px; margin-bottom: 10px; font-weight: 900; color: #333; } #word-display { margin-right: 10px; } /* Botón para reproducir audio */ .audio-button { position: absolute; margin-left:-150px ; border: 1px solid #006064; border-radius: 10px; color: #ede7e7; box-shadow: 0 1px 0 #006064; background-color: #006064; } #start-btn { background-color: transparent; border: none; cursor: pointer; outline: none; } #start-btn .big-icon { font-size: 28px; border: 1px solid #006164ce; border-radius: 10px; color: #ede7e7; box-shadow: 0 1px 0 #006164ce; background-color: #006064; padding: 5px; transition: transform 0.2s ease; } #start-btn.listening .big-icon { color: green; animation: pulse 1s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } /* Mensaje de resultado */ /* Botones “Saltar” y “Reintentar” */ .actions button, #restart-btn { border: 1px solid #006064; border-radius: 10px; color: #ede7e7; box-shadow: 0 1px 0 #006064; background-color: #006164ce; padding: 10px 20px; margin: 5px 5px; border-radius: 8px; cursor: pointer; font-size: 1em; } #Siguiente { border: 1px solid #006064; border-radius: 10px; color: #ede7e7; box-shadow: 0 1px 0 #006064; background-color: #006164ce; padding: 10px 20px; margin: 5px 5px; border-radius: 8px; cursor: pointer; font-size: 1em; } #Siguiente a{ color: #fff; } h1{ font-size: 20px; } /* Oculto */ .hidden { display: none; } .close-btn { position: fixed; top: 10px; left: 10px; z-index: 10; } .close-btn a { text-decoration: none; color: #666; font-size: 28px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background-color: #e0e0e0; transition: background-color 0.3s ease, color 0.3s ease; } .close-btn a:hover { background-color: #006064; color: white; } .Exercise{ text-decoration: none; border: 1px solid #2196f3; border-radius: 10px; color: #ede7e7; box-shadow: 0 1px 0 #2196f3; background-color: #2195f3c3; padding: 10px; font-size: 1em; font-weight: lighter; }