<font face="OpenDyslexic"> <img src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/1.png" alt="Trulli" width="570" height="500"> <div class="grupo-botones"> <button class="button"> [[1930: el origen]] </button> </div> <div class="grupo-botones"> <button class="button"> <a href='https://1930.utec.edu.uy/wp-content/uploads/lectura_agil/' target="_blank"> Revive la historia. 1930: el viaje </button> </a> </div> [CSS] /* Estilos imágenes */ img{ border: 8px solid #A52CDA !important; border-radius: 8px !important; box-shadow: 0.25rem 0.25rem #000000; margin-bottom: 20px !important; } /* Fin estilos imágenes */ /*PRUEBA BOTÓN*/ /* Estilos botones */ .grupo-botones { position: relative; bottom: 0; width: 100%; } .button:hover { color: var(--hover-text); background: var(--bg); transform: translate(0rem,0rem); box-shadow: none; } .button:active { transform: translate(0); box-shadow: none; } .button a{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; font-family: "OpenDyslexic"; width: 100%; } .button a:hover{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; } .center { position: absolute; top: 25vh; bottom: 75vh; left: 40vw; } .button { --bg: #000; --hover-bg: #A52CDA; --hover-text: #000000; color: #ffffff !important; border: 1px solid var(--bg); border-radius: 40px; padding: 0.8em 2em; transform: translate(-0.25rem,-0.25rem); background: var(--hover-bg); box-shadow: 0.25rem 0.25rem var(--bg); transition: 0.2s; display: flex !important; justify-content: center !important; margin: auto !important; margin-bottom: 20px !important; width: 100%; font-family: OpenDyslexic; font-size: 16px; } /* Fin estilos botones */ [continued]<font color="black"> <font face="OpenDyslexic"> <h1 align="center"><i>Capítulo 1</i></h1> <h2 align="center">El reencuentro</h2> <img src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/2.png" alt="Trulli" width="570" height="500"> <div class="grupo-botones"> <button class="button"> [[Comienza el juego]] </button> </div> [CSS] /* Estilos imágenes */ img{ border: 8px solid #A52CDA !important; border-radius: 8px !important; box-shadow: 0.25rem 0.25rem #000000; margin-bottom: 20px !important; } /* Fin estilos imágenes */ /* Estilos audios */ .audio-prueba { display: flex !important; justify-content: center !important; margin: auto; margin-bottom: 20px !important; width: 100%; border: 1px solid #000000; border-radius: 4px; background-color: #56AEFF; transform: translate(-0.25rem,-0.25rem); box-shadow: 0.25rem 0.25rem #000000; margin-top: 15px; } audio::-webkit-media-controls-panel { background-color: #56AEFF; } .texto-audio { width: 100%; font-size: 14px; margin: -25px 0 10px 0; } /* Fin de estilos audio */ /* Estilos botones */ .grupo-botones { position: relative; bottom: 0; width: 100%; } .button:hover { color: var(--hover-text); background: var(--bg); transform: translate(0rem,0rem); box-shadow: none; } .button:active { transform: translate(0); box-shadow: none; } .button a{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; font-family: "OpenDyslexic"; width: 100%; } .button a:hover{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; } .center { position: absolute; top: 25vh; bottom: 75vh; left: 40vw; } .button { --bg: #000; --hover-bg: #A52CDA; --hover-text: #000000; color: #ffffff !important; border: 1px solid var(--bg); border-radius: 40px; padding: 0.8em 2em; transform: translate(-0.25rem,-0.25rem); background: var(--hover-bg); box-shadow: 0.25rem 0.25rem var(--bg); transition: 0.2s; display: flex !important; justify-content: center !important; margin: auto !important; margin-bottom: 20px !important; width: 100%; font-family: OpenDyslexic; font-size: 16px; } /* Fin estilos botones */ [continued]<font face="OpenDyslexic"> <p style="color: black;"> <span style="color:blue;">Narradora:</span>-Tomassino, Antonella, Javier y Federica por fin se encuentran. Están en 2030 y meriendan. Es un día lluvioso que no invita a hacer nada. Hace tiempo que no se ven, así que tienen mucho que contarse. ¡Pasó de todo! Javier estudia; Federica cuenta cómo es vivir en 1930 y cuánto le cuesta adaptarse a esa época. Todo es distinto: la vestimenta, el transporte, la comida, la vida en el vecindario. Antonella dice que gracias a Federica empezó a estudiar para ser maestra. Y Tomassino relata cómo es el trabajo en los talleres del ferrocarril, y que está feliz de que Federica viva con ellos y con Don Beppo. Los adoptó como nietos y se lo nota muy alegre. </p> <span style="color:magenta;">Javier </span> ─Podríamos ir al altillo… capaz que encontramos algo interesante ─propone Javier. <p style="color: black;"> <div class="grupo-botones"> <button class="button"> [[ Subir al altillo ]] </button> </div> <div class="grupo-botones"> <button class="button"> [[ Justo tocan timbre ]] </button> </div> <audio controls class="audio-prueba"> <source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\1.1.m4a"> </audio> <div class="texto-audio"> <p> Audio de lectura. </p> </div> [CSS] /* Estilos imágenes */ img{ border: 8px solid #A52CDA !important; border-radius: 8px !important; box-shadow: 0.25rem 0.25rem #000000; margin-bottom: 20px !important; } /* Fin estilos imágenes */ /* Estilos audios */ .audio-prueba { display: flex !important; justify-content: center !important; margin: auto; margin-bottom: 20px !important; width: 100%; border: 1px solid #000000; border-radius: 4px; background-color: #56AEFF; transform: translate(-0.25rem,-0.25rem); box-shadow: 0.25rem 0.25rem #000000; margin-top: 15px; } audio::-webkit-media-controls-panel { background-color: #56AEFF; } .texto-audio { width: 100%; font-size: 14px; margin: -25px 0 10px 0; } /* Fin de estilos audio */ /* Estilos botones */ .grupo-botones { position: relative; bottom: 0; width: 100%; } .button:hover { color: var(--hover-text); background: var(--bg); transform: translate(0rem,0rem); box-shadow: none; } .button:active { transform: translate(0); box-shadow: none; } .button a{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; font-family: "OpenDyslexic"; width: 100%; } .button a:hover{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; } .center { position: absolute; top: 25vh; bottom: 75vh; left: 40vw; } .button { --bg: #000; --hover-bg: #A52CDA; --hover-text: #000000; color: #ffffff !important; border: 1px solid var(--bg); border-radius: 40px; padding: 0.8em 2em; transform: translate(-0.25rem,-0.25rem); background: var(--hover-bg); box-shadow: 0.25rem 0.25rem var(--bg); transition: 0.2s; display: flex !important; justify-content: center !important; margin: auto !important; margin-bottom: 20px !important; width: 100%; font-family: OpenDyslexic; font-size: 16px; } /* Fin estilos botones */ [continued]<font face="OpenDyslexic"><p style="color: black;"> <span style="color:red;">Antonella:</span> ─¡Sí, vamos! Seguro que encontramos algo ─aplaude Antonella, que nunca estuvo en el famoso altillo donde empezó todo hace… ya no sabemos cuánto tiempo. <span style="color:blue;">Narradora:</span> Los cuatro suben la escalera, que cruje bajo los pies y entran. Javier hizo un poco de orden. Las cajas relucen y sobre el escritorio hay papeles, hojas en blanco y… ¿qué es eso? <span style="color:blue;">Narradora:</span>─ Federica señala un paquete envuelto en un papel lustrado, en el que se ve el logo del Instituto del Futuro. Javier se abalanza sobre el envoltorio y los demás lo rodean y miran cómo lo abre con sumo cuidado. ¿Qué contiene? Es una caja con una ilustración en la cubierta y a Javier se le pone la piel de gallina. Allí se ve el Instituto para el Futuro; en el horizonte la silueta del Conte Verde y en un primer plano, claramente identificables, ellos cuatro. Abre la caja. Es un juego: hay un tablero, un mazo de cartas, un papel con las instrucciones de cómo se juega. Es nuevo, sin uso. ¿Cómo llegó al altillo? <img src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/3.png" alt="Trulli" width="570" height="500"> <div class="grupo-botones"> <button class="button"> [[ Comienza el juego ]] </button> </div> <audio controls class="audio-prueba"> <source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\1.2.m4a"> </audio> <div class="texto-audio"> <p> Audio de lectura. </p> </div> [CSS] /* Estilos imágenes */ img{ border: 8px solid #A52CDA !important; border-radius: 8px !important; box-shadow: 0.25rem 0.25rem #000000; margin-bottom: 20px !important; } /* Fin estilos imágenes */ /* Estilos audios */ .audio-prueba { display: flex !important; justify-content: center !important; margin: auto; margin-bottom: 20px !important; width: 100%; border: 1px solid #000000; border-radius: 4px; background-color: #56AEFF; transform: translate(-0.25rem,-0.25rem); box-shadow: 0.25rem 0.25rem #000000; margin-top: 15px; } audio::-webkit-media-controls-panel { background-color: #56AEFF; } .texto-audio { width: 100%; font-size: 14px; margin: -25px 0 10px 0; } /* Fin de estilos audio */ /* Estilos botones */ .grupo-botones { position: relative; bottom: 0; width: 100%; } .button:hover { color: var(--hover-text); background: var(--bg); transform: translate(0rem,0rem); box-shadow: none; } .button:active { transform: translate(0); box-shadow: none; } .button a{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; font-family: "OpenDyslexic"; width: 100%; } .button a:hover{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; } .center { position: absolute; top: 25vh; bottom: 75vh; left: 40vw; } .button { --bg: #000; --hover-bg: #A52CDA; --hover-text: #000000; color: #ffffff !important; border: 1px solid var(--bg); border-radius: 40px; padding: 0.8em 2em; transform: translate(-0.25rem,-0.25rem); background: var(--hover-bg); box-shadow: 0.25rem 0.25rem var(--bg); transition: 0.2s; display: flex !important; justify-content: center !important; margin: auto !important; margin-bottom: 20px !important; width: 100%; font-family: OpenDyslexic; font-size: 16px; } /* Fin estilos botones */ [continued] <font face="OpenDyslexic"> <p style="color: black;"> <span style="color:blue;">Narradora: </span>─Suena el timbre y los cuatro amigos se miran sorprendidos. Javier no espera a nadie; abren la puerta, no hay nadie. Federica señala un paquete envuelto en un papel lustrado, en el que se ve el logo del Instituto del Futuro. Javier se abalanza sobre el envoltorio y los demás lo rodean y miran cómo lo abre con sumo cuidado. ¿Qué contiene? Es una caja con una ilustración en la cubierta y a Javier se le pone la piel de gallina. Allí se ve el Instituto para el Futuro; en el horizonte la silueta del Conte Verde y en un primer plano, claramente identificables, ellos cuatro. Abre la caja. Es un juego: hay un tablero, un mazo de cartas, un papel con las instrucciones de cómo se juega. Es nuevo, sin uso. ¿Cómo llegó hasta acá? <span style="color:green;">Federica </span>─Capaz que lo dejó Erre cuando te visitó… ─sugiere el Fede. <span style="color:red;">Antonella: </span> ─¡Vamos, a leer las instrucciones! ─propone Antonella muy excitada. Nunca vio una cosa así. <img src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/4.png" alt="Trulli" width="570" height="500"> <div class="grupo-botones"> <button class="button"> [[ Comienza el juego ]] </button> </div> <audio controls class="audio-prueba"> <source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\1.3.m4a"> </audio> <div class="texto-audio"> <p> Audio de lectura. </p> </div> [CSS] /* Estilos imágenes */ img{ border: 8px solid #A52CDA !important; border-radius: 8px !important; box-shadow: 0.25rem 0.25rem #000000; margin-bottom: 20px !important; } /* Fin estilos imágenes */ /* Estilos audios */ .audio-prueba { display: flex !important; justify-content: center !important; margin: auto; margin-bottom: 20px !important; width: 100%; border: 1px solid #000000; border-radius: 4px; background-color: #56AEFF; transform: translate(-0.25rem,-0.25rem); box-shadow: 0.25rem 0.25rem #000000; margin-top: 15px; } audio::-webkit-media-controls-panel { background-color: #56AEFF; } .texto-audio { width: 100%; font-size: 14px; margin: -25px 0 10px 0; } /* Fin de estilos audio */ /* Estilos botones */ .grupo-botones { position: relative; bottom: 0; width: 100%; } .button:hover { color: var(--hover-text); background: var(--bg); transform: translate(0rem,0rem); box-shadow: none; } .button:active { transform: translate(0); box-shadow: none; } .button a{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; font-family: "OpenDyslexic"; width: 100%; } .button a:hover{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; } .center { position: absolute; top: 25vh; bottom: 75vh; left: 40vw; } .button { --bg: #000; --hover-bg: #A52CDA; --hover-text: #000000; color: #ffffff !important; border: 1px solid var(--bg); border-radius: 40px; padding: 0.8em 2em; transform: translate(-0.25rem,-0.25rem); background: var(--hover-bg); box-shadow: 0.25rem 0.25rem var(--bg); transition: 0.2s; display: flex !important; justify-content: center !important; margin: auto !important; margin-bottom: 20px !important; width: 100%; font-family: OpenDyslexic; font-size: 16px; } /* Fin estilos botones */ [continued]<font face="OpenDyslexic"> <p style="color: black;"> <span style="color:blue;">Narradora: </span>-Sacan los papeles y los apuntes del escritorio y arman el tablero. Se ven varios caminos numerados y un espacio donde se ponen las cartas. Cuando leen las instrucciones, se sorprenden: ¡ellos son los protagonistas del juego! ¿Quién inventó semejante cosa? Javier las lee en voz alta: es para cuatro jugadores y el objetivo del juego es conocer la historia de 1930 y las aventuras de los cuatro aventureros. Javier, Federica, Tomassino y Antonella. Allí están, ellos son los avatares. Alguien los dibujó a la perfección. Se ríen a carcajadas. -Javier sigue con la lectura.- Cada jugador debe seleccionar un personaje, se tira el dado y el que saca el puntaje mayor empieza y retira una carta del mazo, que previamente se barajó. En esa carta se señala un año, una situación y la resolución de un problema. El jugador lee en voz alta la situación y los demás deben acertar el año en que ocurrió y/o la resolución del asunto. El que gana avanza las casillas que indica la carta. <img src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/2.png" alt="Trulli" width="570" height="500"> <div class="grupo-botones"> <button class="button"> [[ Instrucciones ]] </button> </div> <div class="grupo-botones"> <button class="button"> [[Avatares ]] </button> </div> <div class="grupo-botones"> <button class="button"> [[ Volver al juego ]] </button> </div> <audio controls class="audio-prueba"> <source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\1.4.m4a"> </audio> <div class="texto-audio"> <p> Audio de lectura. </p> </div> [CSS] /* Estilos imágenes */ img{ border: 8px solid #A52CDA !important; border-radius: 8px !important; box-shadow: 0.25rem 0.25rem #000000; margin-bottom: 20px !important; } /* Fin estilos imágenes */ /* Estilos audios */ .audio-prueba { display: flex !important; justify-content: center !important; margin: auto; margin-bottom: 20px !important; width: 100%; border: 1px solid #000000; border-radius: 4px; background-color: #56AEFF; transform: translate(-0.25rem,-0.25rem); box-shadow: 0.25rem 0.25rem #000000; margin-top: 15px; } audio::-webkit-media-controls-panel { background-color: #56AEFF; } .texto-audio { width: 100%; font-size: 14px; margin: -25px 0 10px 0; } /* Fin de estilos audio */ /* Estilos botones */ .grupo-botones { position: relative; bottom: 0; width: 100%; } .button:hover { color: var(--hover-text); background: var(--bg); transform: translate(0rem,0rem); box-shadow: none; } .button:active { transform: translate(0); box-shadow: none; } .button a{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; font-family: "OpenDyslexic"; width: 100%; } .button a:hover{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; } .center { position: absolute; top: 25vh; bottom: 75vh; left: 40vw; } .button { --bg: #000; --hover-bg: #A52CDA; --hover-text: #000000; color: #ffffff !important; border: 1px solid var(--bg); border-radius: 40px; padding: 0.8em 2em; transform: translate(-0.25rem,-0.25rem); background: var(--hover-bg); box-shadow: 0.25rem 0.25rem var(--bg); transition: 0.2s; display: flex !important; justify-content: center !important; margin: auto !important; margin-bottom: 20px !important; width: 100%; font-family: OpenDyslexic; font-size: 16px; } /* Fin estilos botones */ [continued]<font face="OpenDyslexic"> <div class="grilla-personajes"> <div> <img style="border: 4px solid red !important;"src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/5.png" alt="Trulli"><p  class="name-personajes" style="color:red;">Antonella</p></div> <div> <img style="border: 4px solid green !important;" src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/6.png" alt="Trulli"><p class="name-personajes"style="color:green;">Federica</p></div> <div> <img style="border: 4px solid violet !important;"src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/7.png" alt="Trulli"><p class="name-personajes"style="color:violet;">Javier</p></div> <div> <img style="border: 4px solid orange !important;" src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/8.png" alt="Trulli"><p class="name-personajes"style="color:orange;">Tomassino</p> </div> </div> <div class="grupo-botones"> <button class="button"> [[ Instrucciones ]] </button> </div> <div class="grupo-botones"> <button class="button"> [[ Volver al juego ]] </button> </div> <audio controls class="audio-prueba"> <source src=""> </audio> <div class="texto-audio"> <p> Audio de lectura. </p> </div> [CSS] /* Estilos grilla */ .grilla-personajes { display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr); gap: 16px; } <div class="grupo-botones"> <button class="button"> [[Avatares ]] </button> </div> <div class="grupo-botones"> <button class="button"> [[ Volver al juego ]] </button> </div> <audio controls class="audio-prueba"> <source src=""> </audio> <div class="texto-audio"> <p> Audio de lectura. </p> </div> [CSS] /* Estilos imágenes */ img{ border: 4px solid #A52CDA !important; border-radius: 8px !important; box-shadow: 0.25rem 0.25rem #000000; margin-bottom: 20px !important; } /* Fin estilos imágenes */ /* Estilos audios */ .audio-prueba { display: flex !important; justify-content: center !important; margin: auto; margin-bottom: 20px !important; width: 100%; border: 1px solid #000000; border-radius: 4px; background-color: #56AEFF; transform: translate(-0.25rem,-0.25rem); box-shadow: 0.25rem 0.25rem #000000; margin-top: 15px; } audio::-webkit-media-controls-panel { background-color: #56AEFF; } .texto-audio { width: 100%; font-size: 14px; margin: -25px 0 10px 0; } /* Fin de estilos audio */ /* Estilos botones */ .grupo-botones { position: relative; bottom: 0; width: 100%; } .button:hover { color: var(--hover-text); background: var(--bg); transform: translate(0rem,0rem); box-shadow: none; } .button:active { transform: translate(0); box-shadow: none; } .button a{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; font-family: "OpenDyslexic"; width: 100%; } .button a:hover{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; } .center { position: absolute; top: 25vh; bottom: 75vh; left: 40vw; } .button { --bg: #000; --hover-bg: #A52CDA; --hover-text: #000000; color: #ffffff !important; border: 1px solid var(--bg); border-radius: 40px; padding: 0.8em 2em; transform: translate(-0.25rem,-0.25rem); background: var(--hover-bg); box-shadow: 0.25rem 0.25rem var(--bg); transition: 0.2s; display: flex !important; justify-content: center !important; margin: auto !important; margin-bottom: 20px !important; width: 100%; font-family: OpenDyslexic; font-size: 16px; } /* Fin estilos botones */ [continued]<font face="OpenDyslexic"><p style="color: black;"> <p  class="name-personajes" style="color:red;">Instrucciones del Juego</p></div> <p  class="name-personajes" style="color:red;">Preparación del Juego:</p></div>Armar el tablero, asegurándose de que todos los caminos numerados y el espacio para las cartas estén visibles. <p  class="name-personajes" style="color:red;">Revisión de instrucciones:</p></div>Lean las instrucciones en voz alta. El juego admite hasta 4 jugadores. El objetivo del mismo es conocer la historia de 1930 y vivir las aventuras de los cuatro aventureros. <p  class="name-personajes" style="color:red;">Preparación de los Personajes:</p></div>Cada jugador debe seleccionar un personaje: Javier, Federica, Tomassino o Antonella. <p  class="name-personajes" style="color:red;">Inicio del Juego:</p></div>Tirar el dado. El jugador que obtenga el puntaje mayor empieza. <p  class="name-personajes" style="color:red;">Desarrollo del Juego:</p></div>El jugador que empieza retira una carta del mazo (que previamente se barajó).En la carta se indica un año, una situación y la resolución de un problema. El jugador lee en voz alta la situación. <p  class="name-personajes" style="color:red;">Resolución de la Situación:</p></div>Los demás jugadores deben adivinar el año en que ocurrió la situación y resolver el problema planteado en la carta. <p  class="name-personajes" style="color:red;">Avance en el Tablero:</p></div>El jugador que acierta avanza las casillas que indica la carta. <br> <div class="grupo-botones"> <button class="button"> [[Avatares ]] </button> </div> <div class="grupo-botones"> <button class="button"> [[ Volver al juego ]] </button> </div> [CSS] /* Estilos imágenes */ img{ border: 4px solid #A52CDA !important; border-radius: 8px !important; box-shadow: 0.25rem 0.25rem #000000; margin-bottom: 20px !important; } /* Fin estilos imágenes */ /* Estilos audios */ .audio-prueba { display: flex !important; justify-content: center !important; margin: auto; margin-bottom: 20px !important; width: 100%; border: 1px solid #000000; border-radius: 4px; background-color: #56AEFF; transform: translate(-0.25rem,-0.25rem); box-shadow: 0.25rem 0.25rem #000000; margin-top: 15px; } audio::-webkit-media-controls-panel { background-color: #56AEFF; } .texto-audio { width: 100%; font-size: 14px; margin: -25px 0 10px 0; } /* Fin de estilos audio */ /* Estilos botones */ .grupo-botones { position: relative; bottom: 0; width: 100%; } .button:hover { color: var(--hover-text); background: var(--bg); transform: translate(0rem,0rem); box-shadow: none; } .button:active { transform: translate(0); box-shadow: none; } .button a{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; font-family: "OpenDyslexic"; width: 100%; } .button a:hover{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; } .center { position: absolute; top: 25vh; bottom: 75vh; left: 40vw; } .button { --bg: #000; --hover-bg: #A52CDA; --hover-text: #000000; color: #ffffff !important; border: 1px solid var(--bg); border-radius: 40px; padding: 0.8em 2em; transform: translate(-0.25rem,-0.25rem); background: var(--hover-bg); box-shadow: 0.25rem 0.25rem var(--bg); transition: 0.2s; display: flex !important; justify-content: center !important; margin: auto !important; margin-bottom: 20px !important; width: 100%; font-family: OpenDyslexic; font-size: 16px; } /* Fin estilos botones */ [continued] <font face="OpenDyslexic"><p style="color: black;"> <span style="color:blue;">Narradora: </span>-Sonríen, entusiasmados. Cada uno tira los dados y Federica saca el puntaje más alto. Toma una carta del mazo, se aclara la voz y está a punto de leer lo que dice, pero palidece y la mano le tiembla. <span style="color:orange;">Tomassino</span>─¿Qué te pasa? ─pregunta Tomassino preocupado. <span style="color:green;">Federica </span> ─Es que me impresiona. Este juego es sobre nosotros, sobre nuestra historia. ¡Es increíble! No solo vivimos las aventuras, sino que ahora somos los personajes de un juego… ─murmura Federica, asombrada. <span style="color:violet;">Javier </span> ─Me parece que sé qué es esto. Miren el logo y la tapa de la caja. El Instituto del Futuro. Alguien se tomó el trabajo de hacer esto para nosotros. ¡Genios totales! ¡Vamos a jugar un juego que se inventó en el futuro! ¡No lo puedo creer! ─exclama Javier. ─Dale, Fede, leé lo que dice la carta que sacaste. <div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe title="1930: el orígen carta 1" frameborder="0" width="1200" height="675" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/66280a6f6568bf0014de6f68" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div> <br> <div class="grupo-botones"> <button class="button"> [[ Instrucciones ]] </button> </div> <div class="grupo-botones"> <button class="button"> [[Avatares ]] </button> </div> <div class="grupo-botones"> <button class="button"> [[Federica comienza el juego]] </button> </div> <audio controls class="audio-prueba"> <source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\1.5.m4a"> </audio> <div class="texto-audio"> <p> Audio de lectura. </p> </div> [CSS] /* Estilos imágenes */ img{ border: 4px solid #A52CDA !important; border-radius: 8px !important; box-shadow: 0.25rem 0.25rem #000000; margin-bottom: 20px !important; } /* Fin estilos imágenes */ /* Estilos audios */ .audio-prueba { display: flex !important; justify-content: center !important; margin: auto; margin-bottom: 20px !important; width: 100%; border: 1px solid #000000; border-radius: 4px; background-color: #56AEFF; transform: translate(-0.25rem,-0.25rem); box-shadow: 0.25rem 0.25rem #000000; margin-top: 15px; } audio::-webkit-media-controls-panel { background-color: #56AEFF; } .texto-audio { width: 100%; font-size: 14px; margin: -25px 0 10px 0; } /* Fin de estilos audio */ /* Estilos botones */ .grupo-botones { position: relative; bottom: 0; width: 100%; } .button:hover { color: var(--hover-text); background: var(--bg); transform: translate(0rem,0rem); box-shadow: none; } .button:active { transform: translate(0); box-shadow: none; } .button a{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; font-family: "OpenDyslexic"; width: 100%; } .button a:hover{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; } .center { position: absolute; top: 25vh; bottom: 75vh; left: 40vw; } .button { --bg: #000; --hover-bg: #A52CDA; --hover-text: #000000; color: #ffffff !important; border: 1px solid var(--bg); border-radius: 40px; padding: 0.8em 2em; transform: translate(-0.25rem,-0.25rem); background: var(--hover-bg); box-shadow: 0.25rem 0.25rem var(--bg); transition: 0.2s; display: flex !important; justify-content: center !important; margin: auto !important; margin-bottom: 20px !important; width: 100%; font-family: OpenDyslexic; font-size: 16px; } /* Fin estilos botones */ [continued] <font face="OpenDyslexic"> <p style="color: black;"> <span style="color:green;">Federica </span> ─Dice: Situación: Ley Mundial, Parlamento, Montevideo ─dice Federica con la voz clara, pero todavía impresionada. En un santiamén, los cuatro, muy entusiasmados, recuerdan lo que ocurrió. <span style="color:violet;">Javier </span>─Fue en setiembre de 2023 ─comienza Javier─ me acuerdo claramente. <span style="color:red;"> Antonella</span>─Sí, un montón de gurises y gurisas de varios liceos estaban votando y de pronto aparecieron dos viajeros del tiempo y transmitieron el mensaje de Federica en el que decía que había un complot para que el partido inaugural del mundial de 1930 no se hiciera en Montevideo ─grita Antonella. <span style="color:green;">Federica </span>─Me parece que le toca a Antonella, fue la que contestó mejor ─dice Federica y le hace una guiñada. <img src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/9.png" alt="Trulli" width="570" height="500"> <div class="grupo-botones"> <button class="button"> [[ Juega Antonella ]] </button> </div> <audio controls class="audio-prueba"> <source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\1.6.m4a"> </audio> <div class="texto-audio"> <p> Audio de lectura. </p> </div> [CSS] /* Estilos imágenes */ img{ border: 4px solid #A52CDA !important; border-radius: 8px !important; box-shadow: 0.25rem 0.25rem #000000; margin-bottom: 20px !important; } /* Fin estilos imágenes */ /* Estilos audios */ .audio-prueba { display: flex !important; justify-content: center !important; margin: auto; margin-bottom: 20px !important; width: 100%; border: 1px solid #000000; border-radius: 4px; background-color: #56AEFF; transform: translate(-0.25rem,-0.25rem); box-shadow: 0.25rem 0.25rem #000000; margin-top: 15px; } audio::-webkit-media-controls-panel { background-color: #56AEFF; } .texto-audio { width: 100%; font-size: 14px; margin: -25px 0 10px 0; } /* Fin de estilos audio */ /* Estilos botones */ .grupo-botones { position: relative; bottom: 0; width: 100%; } .button:hover { color: var(--hover-text); background: var(--bg); transform: translate(0rem,0rem); box-shadow: none; } .button:active { transform: translate(0); box-shadow: none; } .button a{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; font-family: "OpenDyslexic"; width: 100%; } .button a:hover{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; } .center { position: absolute; top: 25vh; bottom: 75vh; left: 40vw; } .button { --bg: #000; --hover-bg: #A52CDA; --hover-text: #000000; color: #ffffff !important; border: 1px solid var(--bg); border-radius: 40px; padding: 0.8em 2em; transform: translate(-0.25rem,-0.25rem); background: var(--hover-bg); box-shadow: 0.25rem 0.25rem var(--bg); transition: 0.2s; display: flex !important; justify-content: center !important; margin: auto !important; margin-bottom: 20px !important; width: 100%; font-family: OpenDyslexic; font-size: 16px; } /* Fin estilos botones */ <font face="OpenDyslexic"> <p style="color: black;"> <span style="color:blue;">Narradora: </span> Antonella se pone colorada como un tomate. Saca una carta. <span style="color:red;">Antonella: </span>─Situación: Visita inesperada. Javier espera a Federica, y recibe una sorpresa que cambia todo ─lee Antonella y frunce el ceño. <span style="color:green;">Federica: </span> ─¡Ya sé, ya sé! ─exclama Federica. ─Yo te avisé que iba a venir a verte. Escuchaste el timbre, pensaste que era yo, pero no. ¡Era Erre! <span style="color:magenta;">Javier: </span>─Sí, y me dio un sobre y le vi el logo en el pulgar…Me asusté bastante, es la verdad: me dijo que tenía que viajar a Ginebra, en 1923. Casi muero del susto. ¿Qué había pasado en Ginebra, y por qué era tan importante? ─continúa Javier como si se estuviera viendo en una peli. <div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe title="1930: el orígen carta 3" frameborder="0" width="1200" height="675" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/663a6875a5106f001403c674" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div> <br> <div class="grupo-botones"> <button class="button"> [[ ¿Qué había en el sobre que dejó Erre? ]] </button> </div> <audio controls class="audio-prueba"> <source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\1.7.m4a"> </audio> <div class="texto-audio"> <p> Audio de lectura. </p> </div> [CSS] /* Estilos imágenes */ img{ border: 4px solid #A52CDA !important; border-radius: 8px !important; box-shadow: 0.25rem 0.25rem #000000; margin-bottom: 20px !important; } /* Fin estilos imágenes */ /* Estilos audios */ .audio-prueba { display: flex !important; justify-content: center !important; margin: auto; margin-bottom: 20px !important; width: 100%; border: 1px solid #000000; border-radius: 4px; background-color: #56AEFF; transform: translate(-0.25rem,-0.25rem); box-shadow: 0.25rem 0.25rem #000000; margin-top: 15px; } audio::-webkit-media-controls-panel { background-color: #56AEFF; } .texto-audio { width: 100%; font-size: 14px; margin: -25px 0 10px 0; } /* Fin de estilos audio */ /* Estilos botones */ .grupo-botones { position: relative; bottom: 0; width: 100%; } .button:hover { color: var(--hover-text); background: var(--bg); transform: translate(0rem,0rem); box-shadow: none; } .button:active { transform: translate(0); box-shadow: none; } .button a{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; font-family: "OpenDyslexic"; width: 100%; } .button a:hover{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; } .center { position: absolute; top: 25vh; bottom: 75vh; left: 40vw; } .button { --bg: #000; --hover-bg: #A52CDA; --hover-text: #000000; color: #ffffff !important; border: 1px solid var(--bg); border-radius: 40px; padding: 0.8em 2em; transform: translate(-0.25rem,-0.25rem); background: var(--hover-bg); box-shadow: 0.25rem 0.25rem var(--bg); transition: 0.2s; display: flex !important; justify-content: center !important; margin: auto !important; margin-bottom: 20px !important; width: 100%; font-family: OpenDyslexic; font-size: 16px; } /* Fin estilos botones */ [continued]<font face="OpenDyslexic"> <p style="color: black;"> <span style="color:magenta;">Javier: </span>─Me explicó que era un viajero en el tiempo; que viajaba a través de fotografías, como nosotros. Entonces le pregunté qué pasa cuando hay que viajar a una época en la que la fotografía todavía no existe… ─recuerda Javier. <span style="color:red;">Antonella: </span>─¿Y qué te respondió? ─quiere saber Antonella y Federica cree que tal vez ella quiere viajar al tiempo de sus bisabuelos para conocer su origen. <span style="color:magenta;">Javier: </span>─Erre dijo que no sabía; que para esas épocas había otros viajeros. Me pareció que era un asunto un poco complicado y no insistí. Después dijo algo de “reparar injusticias” que habían sucedido en el pasado, que se corregían más adelante, en el presente, porque no se puede modificar el pasado. Y eso me quemó la cabeza; me pareció difícil de entender ─dice Javier con voz de duda. <img src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/11.png" alt="Trulli" width="570" height="500"> <div class="grupo-botones"> <button class="button"> [[ Ginebra ]] </button> </div> <div class="grupo-botones"> <button class="button"> [[ Sigue el juego]] </button> </div> <audio controls class="audio-prueba"> <source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\1.9.m4a"> </audio> <div class="texto-audio"> <p> Audio de lectura. </p> </div> [CSS] /* Estilos imágenes */ img{ border: 4px solid #A52CDA !important; border-radius: 8px !important; box-shadow: 0.25rem 0.25rem #000000; margin-bottom: 20px !important; } /* Fin estilos imágenes */ /* Estilos audios */ .audio-prueba { display: flex !important; justify-content: center !important; margin: auto; margin-bottom: 20px !important; width: 100%; border: 1px solid #000000; border-radius: 4px; background-color: #56AEFF; transform: translate(-0.25rem,-0.25rem); box-shadow: 0.25rem 0.25rem #000000; margin-top: 15px; } audio::-webkit-media-controls-panel { background-color: #56AEFF; } .texto-audio { width: 100%; font-size: 14px; margin: -25px 0 10px 0; } /* Fin de estilos audio */ /* Estilos botones */ .grupo-botones { position: relative; bottom: 0; width: 100%; } .button:hover { color: var(--hover-text); background: var(--bg); transform: translate(0rem,0rem); box-shadow: none; } .button:active { transform: translate(0); box-shadow: none; } .button a{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; font-family: "OpenDyslexic"; width: 100%; } .button a:hover{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; } .center { position: absolute; top: 25vh; bottom: 75vh; left: 40vw; } .button { --bg: #000; --hover-bg: #A52CDA; --hover-text: #000000; color: #ffffff !important; border: 1px solid var(--bg); border-radius: 40px; padding: 0.8em 2em; transform: translate(-0.25rem,-0.25rem); background: var(--hover-bg); box-shadow: 0.25rem 0.25rem var(--bg); transition: 0.2s; display: flex !important; justify-content: center !important; margin: auto !important; margin-bottom: 20px !important; width: 100%; font-family: OpenDyslexic; font-size: 16px; } /* Fin estilos botones */ [continued] <font face="OpenDyslexic"> <p style="color: black;"> <span style="color:magenta;">Javier: </span>─Y después de que se fue Erre, nos pusimos a buscar info sobre Ginebra en 1923 ─termina Javier. <span style="color:green;">Federica: </span>─Pasaron un montón de cosas, pero ninguna parecía relacionarse con lo nuestro, lo del mundial. Hasta que encontramos un articulito que decía que se había hecho un congreso de la FIFA en esa ciudad y en ese año. <img src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/12.png" alt="Trulli" width="570" height="500"> <div class="grupo-botones"> <button class="button"> [[ Erre ]] </button> </div> <div class="grupo-botones"> <button class="button"> [[ Sigue el juego]] </button> </div> <audio controls class="audio-prueba"> <source src=""> </audio> <div class="texto-audio"> <p> Audio de lectura. </p> </div> [CSS] /* Estilos imágenes */ img{ border: 4px solid #A52CDA !important; border-radius: 8px !important; box-shadow: 0.25rem 0.25rem #000000; margin-bottom: 20px !important; } /* Fin estilos imágenes */ /* Estilos audios */ .audio-prueba { display: flex !important; justify-content: center !important; margin: auto; margin-bottom: 20px !important; width: 100%; border: 1px solid #000000; border-radius: 4px; background-color: #56AEFF; transform: translate(-0.25rem,-0.25rem); box-shadow: 0.25rem 0.25rem #000000; margin-top: 15px; } audio::-webkit-media-controls-panel { background-color: #56AEFF; } .texto-audio { width: 100%; font-size: 14px; margin: -25px 0 10px 0; } /* Fin de estilos audio */ /* Estilos botones */ .grupo-botones { position: relative; bottom: 0; width: 100%; } .button:hover { color: var(--hover-text); background: var(--bg); transform: translate(0rem,0rem); box-shadow: none; } .button:active { transform: translate(0); box-shadow: none; } .button a{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; font-family: "OpenDyslexic"; width: 100%; } .button a:hover{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; } .center { position: absolute; top: 25vh; bottom: 75vh; left: 40vw; } .button { --bg: #000; --hover-bg: #A52CDA; --hover-text: #000000; color: #ffffff !important; border: 1px solid var(--bg); border-radius: 40px; padding: 0.8em 2em; transform: translate(-0.25rem,-0.25rem); background: var(--hover-bg); box-shadow: 0.25rem 0.25rem var(--bg); transition: 0.2s; display: flex !important; justify-content: center !important; margin: auto !important; margin-bottom: 20px !important; width: 100%; font-family: OpenDyslexic; font-size: 16px; } /* Fin estilos botones */ [continued] <font face="OpenDyslexic"> <p style="color: black;"> <span style="color:orange;">Tomassino: </span> ─Pero… ¿qué había en el sobre? ─pregunta Tomassino, que no conoce esa parte de la historia, o capaz se la olvidó. ¿Olvidarse de algo así? Imposible. <span style="color:green;">Federica: </span>─Había unas anotaciones ─intenta recordar Federica. <span style="color:red;">Antonella: </span>─Seguramente había fotografías ─aventura Antonella, no del todo segura. <span style="color:magenta;">Javier: </span>─Me parece que no avanzamos. Ninguno dijo lo que había en el sobre. Pero ¡todo un personaje Erre! Me encantó conocerlo ─dice Javier muy entusiasmado. <span style="color:orange;">Tomassino: </span>─¿Y de qué hablaron? ─pregunta Tomassino y los sorprende; nadie se imaginó que fuera un curioso. <img src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/10.png" alt="Trulli" width="570" height="500"> <div class="grupo-botones"> <button class="button"> [[ Erre ]] </button> </div> <div class="grupo-botones"> <button class="button"> [[ Ginebra ]] </button> </div> <div class="grupo-botones"> <button class="button"> [[ Sigue el juego]] </button> </div> Ilustración carta grande <audio controls class="audio-prueba"> <source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\1.8.m4a"> </audio> <div class="texto-audio"> <p> Audio de lectura. </p> </div> [CSS] /* Estilos imágenes */ img{ border: 4px solid #A52CDA !important; border-radius: 8px !important; box-shadow: 0.25rem 0.25rem #000000; margin-bottom: 20px !important; } /* Fin estilos imágenes */ /* Estilos audios */ .audio-prueba { display: flex !important; justify-content: center !important; margin: auto; margin-bottom: 20px !important; width: 100%; border: 1px solid #000000; border-radius: 4px; background-color: #56AEFF; transform: translate(-0.25rem,-0.25rem); box-shadow: 0.25rem 0.25rem #000000; margin-top: 15px; } audio::-webkit-media-controls-panel { background-color: #56AEFF; } .texto-audio { width: 100%; font-size: 14px; margin: -25px 0 10px 0; } /* Fin de estilos audio */ /* Estilos botones */ .grupo-botones { position: relative; bottom: 0; width: 100%; } .button:hover { color: var(--hover-text); background: var(--bg); transform: translate(0rem,0rem); box-shadow: none; } .button:active { transform: translate(0); box-shadow: none; } .button a{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; font-family: "OpenDyslexic"; width: 100%; } .button a:hover{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; } .center { position: absolute; top: 25vh; bottom: 75vh; left: 40vw; } .button { --bg: #000; --hover-bg: #A52CDA; --hover-text: #000000; color: #ffffff !important; border: 1px solid var(--bg); border-radius: 40px; padding: 0.8em 2em; transform: translate(-0.25rem,-0.25rem); background: var(--hover-bg); box-shadow: 0.25rem 0.25rem var(--bg); transition: 0.2s; display: flex !important; justify-content: center !important; margin: auto !important; margin-bottom: 20px !important; width: 100%; font-family: OpenDyslexic; font-size: 16px; } /* Fin estilos botones */ [continued] <font face="OpenDyslexic"> <p style="color: black;"> <span style="color:blue;">Narradora: </span> Federica mira a Tomassino. <span style="color:green;">Federica: </span>─Sacá una carta tú, que no le embocaste a nada ─propone y se pone colorada. <span style="color:blue;">Narradora: </span>Tomassino saca una carta y lee en voz alta: <span style="color:orange;">Tomassino: </span> Situación: El sobre “¿Y qué había en el sobre que dejó Erre?” <span style="color:red;">Antonella: </span>─Había una foto para que viajaras- responde Antonella <span style="color:blue;">Narradora: </span> Javier sonríe, hace que no con la cabeza y Antonella hace un puchero, desilusionada porque quiere ganar. <div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe title="1930: el orígen carta 4" frameborder="0" width="1200" height="675" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/663a6de875eb060014b9620e" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div> <br> <div class="grupo-botones"> <button class="button"> [[ Respuesta correcta ]] </button> </div> <audio controls class="audio-prueba"> <source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\1.11.m4a"> </audio> <div class="texto-audio"> <p> Audio de lectura. </p> </div> [CSS] /* Estilos imágenes */ img{ border: 4px solid #A52CDA !important; border-radius: 8px !important; box-shadow: 0.25rem 0.25rem #000000; margin-bottom: 20px !important; } /* Fin estilos imágenes */ /* Estilos audios */ .audio-prueba { display: flex !important; justify-content: center !important; margin: auto; margin-bottom: 20px !important; width: 100%; border: 1px solid #000000; border-radius: 4px; background-color: #56AEFF; transform: translate(-0.25rem,-0.25rem); box-shadow: 0.25rem 0.25rem #000000; margin-top: 15px; } audio::-webkit-media-controls-panel { background-color: #56AEFF; } .texto-audio { width: 100%; font-size: 14px; margin: -25px 0 10px 0; } /* Fin de estilos audio */ /* Estilos botones */ .grupo-botones { position: relative; bottom: 0; width: 100%; } .button:hover { color: var(--hover-text); background: var(--bg); transform: translate(0rem,0rem); box-shadow: none; } .button:active { transform: translate(0); box-shadow: none; } .button a{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; font-family: "OpenDyslexic"; width: 100%; } .button a:hover{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; } .center { position: absolute; top: 25vh; bottom: 75vh; left: 40vw; } .button { --bg: #000; --hover-bg: #A52CDA; --hover-text: #000000; color: #ffffff !important; border: 1px solid var(--bg); border-radius: 40px; padding: 0.8em 2em; transform: translate(-0.25rem,-0.25rem); background: var(--hover-bg); box-shadow: 0.25rem 0.25rem var(--bg); transition: 0.2s; display: flex !important; justify-content: center !important; margin: auto !important; margin-bottom: 20px !important; width: 100%; font-family: OpenDyslexic; font-size: 16px; } /* Fin estilos botones */ [continued] <font face="OpenDyslexic"> <p style="color: black;"> <span style="color:green;">Federica: </span>─En el sobre había una hoja con una lista que al principio no entendimos ─dice Federica y aplaude al recordar cómo se sorprendieron. <span style="color:magenta;">Javier: </span>─Era como si hubiera anotado algunas dudas, andá a saber por qué. Por ejemplo: que no se jugó un partido por el tercer puesto, que no apareció la escultura de Zorrilla de San Martín que iba a estar en la Torre de los Homenajes. Tampoco apareció el arco del Field de Pocitos, que era la cancha de Peñarol y en la que se jugaron varios partidos del primer mundial. Y la última era una pregunta: ¿por qué Alemania no participó en el primer mundial? ─dice Javier muy apurado, como si tuviera miedo de olvidarse de algo. <span style="color:green;">Federica: </span>─¡Javi, pará! ¡Hablás tan rápido como Erre cuando se entusiasma!─ se ríe Federica. <span style="color:orange;">Tomassino: </span>─Me gustaría saber cómo siguió la cosa ─dice Tomassino con curiosidad. <div class="grupo-botones"> <button class="button"> [[Consulta con su primo]] </button> </div> <div class="grupo-botones"> <button class="button"> [[ La confesión ]] </button> </div> <div class="grupo-botones"> <button class="button"> [[ Continúa el juego ]] </button> </div> <audio controls class="audio-prueba"> <source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\1.12.m4a"> </audio> <div class="texto-audio"> <p> Audio de lectura. </p> </div> [CSS] /* Estilos imágenes */ img{ border: 4px solid #A52CDA !important; border-radius: 8px !important; box-shadow: 0.25rem 0.25rem #000000; margin-bottom: 20px !important; } /* Fin estilos imágenes */ /* Estilos audios */ .audio-prueba { display: flex !important; justify-content: center !important; margin: auto; margin-bottom: 20px !important; width: 100%; border: 1px solid #000000; border-radius: 4px; background-color: #56AEFF; transform: translate(-0.25rem,-0.25rem); box-shadow: 0.25rem 0.25rem #000000; margin-top: 15px; } audio::-webkit-media-controls-panel { background-color: #56AEFF; } .texto-audio { width: 100%; font-size: 14px; margin: -25px 0 10px 0; } /* Fin de estilos audio */ /* Estilos botones */ .grupo-botones { position: relative; bottom: 0; width: 100%; } .button:hover { color: var(--hover-text); background: var(--bg); transform: translate(0rem,0rem); box-shadow: none; } .button:active { transform: translate(0); box-shadow: none; } .button a{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; font-family: "OpenDyslexic"; width: 100%; } .button a:hover{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; } .center { position: absolute; top: 25vh; bottom: 75vh; left: 40vw; } .button { --bg: #000; --hover-bg: #A52CDA; --hover-text: #000000; color: #ffffff !important; border: 1px solid var(--bg); border-radius: 40px; padding: 0.8em 2em; transform: translate(-0.25rem,-0.25rem); background: var(--hover-bg); box-shadow: 0.25rem 0.25rem var(--bg); transition: 0.2s; display: flex !important; justify-content: center !important; margin: auto !important; margin-bottom: 20px !important; width: 100%; font-family: OpenDyslexic; font-size: 16px; } /* Fin estilos botones */ [continued] <font face="OpenDyslexic"> <p style="color: black;"> <span style="color:green;">Federica: </span>─A mí se me ocurrió consultar a mi primo El Pitufo, que sabe un montón de fútbol y todo eso. Porque nos parecía que había una relación entre el fútbol y la política de aquella época ─ explica Federica y lo mira con tanta intensidad que Tomassino enrojece. <div class="grupo-botones"> <button class="button"> [[ La confesión ]] </button> </div> <div class="grupo-botones"> <button class="button"> [[ Continúa el juego ]] </button> </div> <audio controls class="audio-prueba"> <source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\1.13.m4a"> </audio> <div class="texto-audio"> <p> Audio de lectura. </p> </div> [CSS] /* Estilos imágenes */ img{ border: 4px solid #A52CDA !important; border-radius: 8px !important; box-shadow: 0.25rem 0.25rem #000000; margin-bottom: 20px !important; } /* Fin estilos imágenes */ /* Estilos audios */ .audio-prueba { display: flex !important; justify-content: center !important; margin: auto; margin-bottom: 20px !important; width: 100%; border: 1px solid #000000; border-radius: 4px; background-color: #56AEFF; transform: translate(-0.25rem,-0.25rem); box-shadow: 0.25rem 0.25rem #000000; margin-top: 15px; } audio::-webkit-media-controls-panel { background-color: #56AEFF; } .texto-audio { width: 100%; font-size: 14px; margin: -25px 0 10px 0; } /* Fin de estilos audio */ /* Estilos botones */ .grupo-botones { position: relative; bottom: 0; width: 100%; } .button:hover { color: var(--hover-text); background: var(--bg); transform: translate(0rem,0rem); box-shadow: none; } .button:active { transform: translate(0); box-shadow: none; } .button a{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; font-family: "OpenDyslexic"; width: 100%; } .button a:hover{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; } .center { position: absolute; top: 25vh; bottom: 75vh; left: 40vw; } .button { --bg: #000; --hover-bg: #A52CDA; --hover-text: #000000; color: #ffffff !important; border: 1px solid var(--bg); border-radius: 40px; padding: 0.8em 2em; transform: translate(-0.25rem,-0.25rem); background: var(--hover-bg); box-shadow: 0.25rem 0.25rem var(--bg); transition: 0.2s; display: flex !important; justify-content: center !important; margin: auto !important; margin-bottom: 20px !important; width: 100%; font-family: OpenDyslexic; font-size: 16px; } /* Fin estilos botones */ [continued] <font face="OpenDyslexic"> <p style="color: black;"> <span style="color:magenta;">Javier: </span> ─Y ya que estamos… y sin spoilear… resulta que Fede me contó que… ─suelta Javier y Federica lo mira como si quisiera matarlo. <span style="color:green;">Federica: </span>─Y bueno, sí, es cierto. Te dije que me gustaba Tomassino, pero que era un disparate, ¡porque nos separaban cien años! Vivíamos a pocas cuadras, pero él en 1930 y yo en 2030. Una locura. Parece una novela de ciencia ficción ─agrega Federica bastante colorada y sin mirar a Tomassino, que se hincha del orgullo. <span style="color:magenta;">Javier: </span>─En realidad, con esto de los viajes en el tiempo, podemos decir que a los cuatro nos gusta la ciencia ficción, ¿no? Así que podríamos ver si alguna carta nos da una respuesta. ¿A quién le toca? <img src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/13.png" alt="Trulli" width="570" height="500"> <div class="grupo-botones"> <button class="button"> [[Consulta con su primo]] </button> </div> <div class="grupo-botones"> <button class="button"> [[ Continúa el juego ]] </button> </div> <audio controls class="audio-prueba"> <source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\1.14.m4a"> </audio> <div class="texto-audio"> <p> Audio de lectura. </p> </div> [CSS] /* Estilos imágenes */ img{ border: 4px solid #A52CDA !important; border-radius: 8px !important; box-shadow: 0.25rem 0.25rem #000000; margin-bottom: 20px !important; } /* Fin estilos imágenes */ /* Estilos audios */ .audio-prueba { display: flex !important; justify-content: center !important; margin: auto; margin-bottom: 20px !important; width: 100%; border: 1px solid #000000; border-radius: 4px; background-color: #56AEFF; transform: translate(-0.25rem,-0.25rem); box-shadow: 0.25rem 0.25rem #000000; margin-top: 15px; } audio::-webkit-media-controls-panel { background-color: #56AEFF; } .texto-audio { width: 100%; font-size: 14px; margin: -25px 0 10px 0; } /* Fin de estilos audio */ /* Estilos botones */ .grupo-botones { position: relative; bottom: 0; width: 100%; } .button:hover { color: var(--hover-text); background: var(--bg); transform: translate(0rem,0rem); box-shadow: none; } .button:active { transform: translate(0); box-shadow: none; } .button a{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; font-family: "OpenDyslexic"; width: 100%; } .button a:hover{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; } .center { position: absolute; top: 25vh; bottom: 75vh; left: 40vw; } .button { --bg: #000; --hover-bg: #A52CDA; --hover-text: #000000; color: #ffffff !important; border: 1px solid var(--bg); border-radius: 40px; padding: 0.8em 2em; transform: translate(-0.25rem,-0.25rem); background: var(--hover-bg); box-shadow: 0.25rem 0.25rem var(--bg); transition: 0.2s; display: flex !important; justify-content: center !important; margin: auto !important; margin-bottom: 20px !important; width: 100%; font-family: OpenDyslexic; font-size: 16px; } /* Fin estilos botones */ [continued] <font face="OpenDyslexic"> <p style="color: black;"> <span style="color:blue;">Narradora: </span>─ Javier mira a Antonella y se da cuenta de que no sabe qué significa “ciencia ficción”. <span style="color:magenta;">Javier: </span>─En tu época no se llama así, a esas narraciones se les dicen “aventuras fantásticas”. Seguramente leyeron alguna novelita de Julio Verne, que nació en 1828. Por ejemplo, Viaje al centro de la Tierra o De la Tierra a la Luna. ¿Las conocen? <span style="color:orange;">Tomassino: </span>─Puede ser, me suena un poco ─dice Tomassino dudando ─pero no leíamos ese tipo de libros. Javier los mira un poco sorprendidos. ¿Cómo se puede no haber leído a Julio Verne? <div class="grupo-botones"> <button class="button"> [[ Julio Verne ]] </button> </div> <div class="grupo-botones"> <button class="button"> [[ Antonella saca la carta ]] </button> </div> <audio controls class="audio-prueba"> <source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\1.15.m4a"> </audio> <div class="texto-audio"> <p> Audio de lectura. </p> </div> [CSS] /* Estilos imágenes */ img{ border: 4px solid #A52CDA !important; border-radius: 8px !important; box-shadow: 0.25rem 0.25rem #000000; margin-bottom: 20px !important; } /* Fin estilos imágenes */ /* Estilos audios */ .audio-prueba { display: flex !important; justify-content: center !important; margin: auto; margin-bottom: 20px !important; width: 100%; border: 1px solid #000000; border-radius: 4px; background-color: #56AEFF; transform: translate(-0.25rem,-0.25rem); box-shadow: 0.25rem 0.25rem #000000; margin-top: 15px; } audio::-webkit-media-controls-panel { background-color: #56AEFF; } .texto-audio { width: 100%; font-size: 14px; margin: -25px 0 10px 0; } /* Fin de estilos audio */ /* Estilos botones */ .grupo-botones { position: relative; bottom: 0; width: 100%; } .button:hover { color: var(--hover-text); background: var(--bg); transform: translate(0rem,0rem); box-shadow: none; } .button:active { transform: translate(0); box-shadow: none; } .button a{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; font-family: "OpenDyslexic"; width: 100%; } .button a:hover{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; } .center { position: absolute; top: 25vh; bottom: 75vh; left: 40vw; } .button { --bg: #000; --hover-bg: #A52CDA; --hover-text: #000000; color: #ffffff !important; border: 1px solid var(--bg); border-radius: 40px; padding: 0.8em 2em; transform: translate(-0.25rem,-0.25rem); background: var(--hover-bg); box-shadow: 0.25rem 0.25rem var(--bg); transition: 0.2s; display: flex !important; justify-content: center !important; margin: auto !important; margin-bottom: 20px !important; width: 100%; font-family: OpenDyslexic; font-size: 16px; } /* Fin estilos botones */ [continued] <font face="OpenDyslexic"> <p style="color: black;"> <font face="OpenDyslexic"> <p style="color: black;"> Julio Verne nació el 8 de febrero de 1828 en Nantes, Francia. Desde niño, le encantaba imaginar viajes a lugares lejanos. De adulto, se convirtió en escritor y escribió libros maravillosos sobre aventuras increíbles. Algunas de sus historias más famosas son "Veinte mil leguas de viaje submarino", sobre un submarino que explora el fondo del mar, y "La vuelta al mundo en ochenta días", sobre un hombre que intenta dar la vuelta al mundo en ochenta días. Aunque Julio no podía viajar en el tiempo de verdad, sus historias nos llevan a mundos del futuro y del pasado, mostrando que la imaginación no tiene límites. Gracias a sus libros, todos podemos ser viajeros del tiempo y aventureros de la imaginación. <span style="color:magenta;">Javier: </span>─Después les paso algún libro, les va a encantar. Bueno, sigamos ─propone Javier ansioso por continuar el juego. <img src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/14.jpg" alt="Trulli" width="570" height="500"> <div class="grupo-botones"> <button class="button"> [[ Antonella saca la carta ]] </button> </div> <audio controls class="audio-prueba"> <source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\Julio Verne.m4a"> </audio> <div class="texto-audio"> <p> Audio de lectura. </p> </div> [CSS] /* Estilos imágenes */ img{ border: 4px solid #A52CDA !important; border-radius: 8px !important; box-shadow: 0.25rem 0.25rem #000000; margin-bottom: 20px !important; } /* Fin estilos imágenes */ /* Estilos audios */ .audio-prueba { display: flex !important; justify-content: center !important; margin: auto; margin-bottom: 20px !important; width: 100%; border: 1px solid #000000; border-radius: 4px; background-color: #56AEFF; transform: translate(-0.25rem,-0.25rem); box-shadow: 0.25rem 0.25rem #000000; margin-top: 15px; } audio::-webkit-media-controls-panel { background-color: #56AEFF; } .texto-audio { width: 100%; font-size: 14px; margin: -25px 0 10px 0; } /* Fin de estilos audio */ /* Estilos botones */ .grupo-botones { position: relative; bottom: 0; width: 100%; } .button:hover { color: var(--hover-text); background: var(--bg); transform: translate(0rem,0rem); box-shadow: none; } .button:active { transform: translate(0); box-shadow: none; } .button a{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; font-family: "OpenDyslexic"; width: 100%; } .button a:hover{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; } .center { position: absolute; top: 25vh; bottom: 75vh; left: 40vw; } .button { --bg: #000; --hover-bg: #A52CDA; --hover-text: #000000; color: #ffffff !important; border: 1px solid var(--bg); border-radius: 40px; padding: 0.8em 2em; transform: translate(-0.25rem,-0.25rem); background: var(--hover-bg); box-shadow: 0.25rem 0.25rem var(--bg); transition: 0.2s; display: flex !important; justify-content: center !important; margin: auto !important; margin-bottom: 20px !important; width: 100%; font-family: OpenDyslexic; font-size: 16px; } /* Fin estilos botones */ [continued] <font face="OpenDyslexic"> <p style="color: black;"> <span style="color:green;">Federica: </span> ─Que saque Antonella, es la que menos cartas sacó y la que habla poquísimo ─sugiere Fede, siempre solidaria. <span style="color:blue;">Narradora: </span>─A los cuatro les encanta el juego, y claramente les es fácil responder porque trata sobre su propia historia. Así que avanzan en las casillas entre risas y aplausos. Hasta que en un turno, Tomassino saca una carta que se relaciona con cuando él y Antonella conocieron al bisabuelo de Javier, el famoso Massimo Scalante. Tomassino se pone pálido. La carta dice: 1930: Italia. <br> <div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe title="1930: el orígen carta 4" frameborder="0" width="1200" height="675" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/663a6de875eb060014b9620e" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div> <br> <div class="grupo-botones"> <button class="button"> [[ Historia de la familia de Tomassino y Antonella ]] </button> </div> <div class="grupo-botones"> <button class="button"> [[ Tomassino y Antonella no son parientes de Javier ]] </button> </div> <audio controls class="audio-prueba"> <source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\1.16.m4a"> </audio> <div class="texto-audio"> <p> Audio de lectura. </p> </div> [CSS] /* Estilos imágenes */ img{ border: 4px solid #A52CDA !important; border-radius: 8px !important; box-shadow: 0.25rem 0.25rem #000000; margin-bottom: 20px !important; } /* Fin estilos imágenes */ /* Estilos audios */ .audio-prueba { display: flex !important; justify-content: center !important; margin: auto; margin-bottom: 20px !important; width: 100%; border: 1px solid #000000; border-radius: 4px; background-color: #56AEFF; transform: translate(-0.25rem,-0.25rem); box-shadow: 0.25rem 0.25rem #000000; margin-top: 15px; } audio::-webkit-media-controls-panel { background-color: #56AEFF; } .texto-audio { width: 100%; font-size: 14px; margin: -25px 0 10px 0; } /* Fin de estilos audio */ /* Estilos botones */ .grupo-botones { position: relative; bottom: 0; width: 100%; } .button:hover { color: var(--hover-text); background: var(--bg); transform: translate(0rem,0rem); box-shadow: none; } .button:active { transform: translate(0); box-shadow: none; } .button a{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; font-family: "OpenDyslexic"; width: 100%; } .button a:hover{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; } .center { position: absolute; top: 25vh; bottom: 75vh; left: 40vw; } .button { --bg: #000; --hover-bg: #A52CDA; --hover-text: #000000; color: #ffffff !important; border: 1px solid var(--bg); border-radius: 40px; padding: 0.8em 2em; transform: translate(-0.25rem,-0.25rem); background: var(--hover-bg); box-shadow: 0.25rem 0.25rem var(--bg); transition: 0.2s; display: flex !important; justify-content: center !important; margin: auto !important; margin-bottom: 20px !important; width: 100%; font-family: OpenDyslexic; font-size: 16px; } /* Fin estilos botones */ [continued] <font face="OpenDyslexic"> <p style="color: black;"> <span style="color:magenta;">Javier: </span>─¡Qué carta te tocó, Tomassino! Vamos a seguir con cómo sucedieron las cosas. Federica se dio cuenta de algo interesante: ¿cómo era posible que mis tatarabuelos, Massimo y Margherita, se hubieran conocido, si vivían en ciudades tan alejadas? Había un misterio ahí ─dice Javier y le tiembla un poco la voz. <span style="color:green;">Federica: </span> ─Resulta que cuando revisamos una de las cajas del bisabuelo, descubrimos que en realidad Margherita se había cambiado el apellido, igual que había hecho Massimo, por lo que en realidad Tomassino y Antonella no eran primos de tu bisabuelo Massimo ─continúa Federica emocionada. <span style="color:red;">Antonella: </span>─Este juego es como ir armando un rompecabezas, ¿no les parece? ─ dice Antonella dudando un poco. La timidez hace que no intervenga demasiado, pero sigue atentamente lo que comentan Tomassino, Javier y Federica con tanto entusiasmo. <img src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/15.png" alt="Trulli" width="570" height="500"> <div class="grupo-botones"> <button class="button"> [[ Árbol genealógico ]] </button> </div> <div class="grupo-botones"> <button class="button"> [[ El fin de la primera parte ]] </button> </div> <audio controls class="audio-prueba"> <source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\1.18.m4a"> </audio> <div class="texto-audio"> <p> Audio de lectura. </p> </div> [CSS] /* Estilos imágenes */ img{ border: 4px solid #A52CDA !important; border-radius: 8px !important; box-shadow: 0.25rem 0.25rem #000000; margin-bottom: 20px !important; } /* Fin estilos imágenes */ /* Estilos audios */ .audio-prueba { display: flex !important; justify-content: center !important; margin: auto; margin-bottom: 20px !important; width: 100%; border: 1px solid #000000; border-radius: 4px; background-color: #56AEFF; transform: translate(-0.25rem,-0.25rem); box-shadow: 0.25rem 0.25rem #000000; margin-top: 15px; } audio::-webkit-media-controls-panel { background-color: #56AEFF; } .texto-audio { width: 100%; font-size: 14px; margin: -25px 0 10px 0; } /* Fin de estilos audio */ /* Estilos botones */ .grupo-botones { position: relative; bottom: 0; width: 100%; } .button:hover { color: var(--hover-text); background: var(--bg); transform: translate(0rem,0rem); box-shadow: none; } .button:active { transform: translate(0); box-shadow: none; } .button a{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; font-family: "OpenDyslexic"; width: 100%; } .button a:hover{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; } .center { position: absolute; top: 25vh; bottom: 75vh; left: 40vw; } .button { --bg: #000; --hover-bg: #A52CDA; --hover-text: #000000; color: #ffffff !important; border: 1px solid var(--bg); border-radius: 40px; padding: 0.8em 2em; transform: translate(-0.25rem,-0.25rem); background: var(--hover-bg); box-shadow: 0.25rem 0.25rem var(--bg); transition: 0.2s; display: flex !important; justify-content: center !important; margin: auto !important; margin-bottom: 20px !important; width: 100%; font-family: OpenDyslexic; font-size: 16px; } /* Fin estilos botones */ [continued] <font face="OpenDyslexic"> <p style="color: black;"> <span style="color:blue;">Narradora: </span> Tomassino prefiere no pensar en eso, porque se relaciona con el asesinato del padre, en Turín, y la muerte de la madre, en Marsella. Y también, porque es una historia que ninguno tiene del todo clara. Los padres de Tomassino y Antonella y la casualidad de que Tomassino y Antonella resultaron ser primos del bisabuelo. Además, le hicieron una promesa a Javier de no decirle nunca al bisabuelo que son parientes. Y Tomassino se lo dijo y sintió que traicionaba a su amigo. Javier les dijo que debían presentarse con el apellido materno para que Massimo no sospechara nada. Todo un lío, esa es la verdad. Menos mal que se resolvió sin que Javier se enojara cuando Tomassino le contó lo que había pasado. Javier mira a sus amigos y aplaude <div class="grupo-botones"> <button class="button"> [[ Historia de la familia de Tomassino y Antonella ]] </button> </div> <audio controls class="audio-prueba"> <source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\1.17.m4a"> </audio> <div class="texto-audio"> <p> Audio de lectura. </p> </div> [CSS] /* Estilos imágenes */ img{ border: 4px solid #A52CDA !important; border-radius: 8px !important; box-shadow: 0.25rem 0.25rem #000000; margin-bottom: 20px !important; } /* Fin estilos imágenes */ /* Estilos audios */ .audio-prueba { display: flex !important; justify-content: center !important; margin: auto; margin-bottom: 20px !important; width: 100%; border: 1px solid #000000; border-radius: 4px; background-color: #56AEFF; transform: translate(-0.25rem,-0.25rem); box-shadow: 0.25rem 0.25rem #000000; margin-top: 15px; } audio::-webkit-media-controls-panel { background-color: #56AEFF; } .texto-audio { width: 100%; font-size: 14px; margin: -25px 0 10px 0; } /* Fin de estilos audio */ /* Estilos botones */ .grupo-botones { position: relative; bottom: 0; width: 100%; } .button:hover { color: var(--hover-text); background: var(--bg); transform: translate(0rem,0rem); box-shadow: none; } .button:active { transform: translate(0); box-shadow: none; } .button a{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; font-family: "OpenDyslexic"; width: 100%; } .button a:hover{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; } .center { position: absolute; top: 25vh; bottom: 75vh; left: 40vw; } .button { --bg: #000; --hover-bg: #A52CDA; --hover-text: #000000; color: #ffffff !important; border: 1px solid var(--bg); border-radius: 40px; padding: 0.8em 2em; transform: translate(-0.25rem,-0.25rem); background: var(--hover-bg); box-shadow: 0.25rem 0.25rem var(--bg); transition: 0.2s; display: flex !important; justify-content: center !important; margin: auto !important; margin-bottom: 20px !important; width: 100%; font-family: OpenDyslexic; font-size: 16px; } /* Fin estilos botones */ [continued] <font face="OpenDyslexic"> <p style="color: black;"> <span style="color:green;">Federica: </span>─Lo que pasa es que vivimos en tiempos paralelos: 1930 y 2030 ─razona Federica, que hasta ese momento no le había prestado demasiada atención a “ese detalle”. <span style="color:magenta;">Javier: </span>─Claro, porque cuando nos volvimos a ver con Tomassino y Antonella, ellos también nos contaron cosas de 1930, así que el juego es un poco complicado ─sigue Javier. <span style="color:blue;">Narradora: </span>─Todos ríen a la vez. <span style="color:orange;">Tomassino: </span>─Y bueno, si alguien más juega a este juego, comprenderá que viajar en el tiempo es complicadísimo, y si dudás… podés meter la pata ─comenta Tomassino. <span style="color:magenta;">Javier: </span>─Se nota que Federica te contagió nuestra manera de hablar en esta época ─comenta Javier cuando escucha a Tomassino. <span style="color:blue;">Narradora: </span>─Tomassino lo mira sin entender. <span style="color:magenta;">Javier: </span>─Dijiste “dudás” en lugar de “dudas” y “podés” en lugar de “puedes” ─le explica Javier. <span style="color:blue;">Narradoar: </span> ─Tomassino se sonroja. Sí, algo se le pegó desde que Federica vive con ellos y con Don Beppo. <span style="color:green;">Federica: </span>─Bueno, continuemos ─propone el Fede. ─Sacá una carta, Tomassino. <div class="grupo-botones"> <button class="button"> <a href='' target="_blank"> Parte 2 </button> </a> </div> <div class="grupo-botones"> <button class="button"> [[ Capítulo 2 ]] </button> </div> <div class="grupo-botones"> <button class="button"> [[ Revive el CapÍtulo 1 ]] </button> </div> <audio controls class="audio-prueba"> <source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\1.19.m4a"> </audio> <div class="texto-audio"> <p> Audio de lectura. </p> </div> [CSS] /* Estilos imágenes */ img{ border: 4px solid #A52CDA !important; border-radius: 8px !important; box-shadow: 0.25rem 0.25rem #000000; margin-bottom: 20px !important; } /* Fin estilos imágenes */ /* Estilos audios */ .audio-prueba { display: flex !important; justify-content: center !important; margin: auto; margin-bottom: 20px !important; width: 100%; border: 1px solid #000000; border-radius: 4px; background-color: #56AEFF; transform: translate(-0.25rem,-0.25rem); box-shadow: 0.25rem 0.25rem #000000; margin-top: 15px; } audio::-webkit-media-controls-panel { background-color: #56AEFF; } .texto-audio { width: 100%; font-size: 14px; margin: -25px 0 10px 0; } /* Fin de estilos audio */ /* Estilos botones */ .grupo-botones { position: relative; bottom: 0; width: 100%; } .button:hover { color: var(--hover-text); background: var(--bg); transform: translate(0rem,0rem); box-shadow: none; } .button:active { transform: translate(0); box-shadow: none; } .button a{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; font-family: "OpenDyslexic"; width: 100%; } .button a:hover{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; } .center { position: absolute; top: 25vh; bottom: 75vh; left: 40vw; } .button { --bg: #000; --hover-bg: #A52CDA; --hover-text: #000000; color: #ffffff !important; border: 1px solid var(--bg); border-radius: 40px; padding: 0.8em 2em; transform: translate(-0.25rem,-0.25rem); background: var(--hover-bg); box-shadow: 0.25rem 0.25rem var(--bg); transition: 0.2s; display: flex !important; justify-content: center !important; margin: auto !important; margin-bottom: 20px !important; width: 100%; font-family: OpenDyslexic; font-size: 16px; } /* Fin estilos botones */ [continued]<img src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/16.png" alt="Trulli" width="570" height="500"> <div class="grupo-botones"> <button class="button"> [[ El fin de la primera parte ]] </button> </div> <audio controls class="audio-prueba"> <source src=""> </audio> <div class="texto-audio"> <p> Audio de lectura. </p> </div> [CSS] /* Estilos imágenes */ img{ border: 4px solid #A52CDA !important; border-radius: 8px !important; box-shadow: 0.25rem 0.25rem #000000; margin-bottom: 20px !important; } /* Fin estilos imágenes */ /* Estilos audios */ .audio-prueba { display: flex !important; justify-content: center !important; margin: auto; margin-bottom: 20px !important; width: 100%; border: 1px solid #000000; border-radius: 4px; background-color: #56AEFF; transform: translate(-0.25rem,-0.25rem); box-shadow: 0.25rem 0.25rem #000000; margin-top: 15px; } audio::-webkit-media-controls-panel { background-color: #56AEFF; } .texto-audio { width: 100%; font-size: 14px; margin: -25px 0 10px 0; } /* Fin de estilos audio */ /* Estilos botones */ .grupo-botones { position: relative; bottom: 0; width: 100%; } .button:hover { color: var(--hover-text); background: var(--bg); transform: translate(0rem,0rem); box-shadow: none; } .button:active { transform: translate(0); box-shadow: none; } .button a{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; font-family: "OpenDyslexic"; width: 100%; } .button a:hover{ color: white !important; background: none !important; text-decoration-color: white !important; font-weight: bold !important; } .center { position: absolute; top: 25vh; bottom: 75vh; left: 40vw; } .button { --bg: #000; --hover-bg: #A52CDA; --hover-text: #000000; color: #ffffff !important; border: 1px solid var(--bg); border-radius: 40px; padding: 0.8em 2em; transform: translate(-0.25rem,-0.25rem); background: var(--hover-bg); box-shadow: 0.25rem 0.25rem var(--bg); transition: 0.2s; display: flex !important; justify-content: center !important; margin: auto !important; margin-bottom: 20px !important; width: 100%; font-family: OpenDyslexic; font-size: 16px; } /* Fin estilos botones */ [continued]