<font color="black">
<font face="OpenDyslexic">
<h1 align="center"><i>Capítulo 3</i></h1>
<h2 align="center">Instituto del Futuro</h2>
<img src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/P31.png" alt="Trulli" width="570" height="500">
<div class="grupo-botones">
<button class="button">
[[ Instituto del Futuro ]]
</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:green;">Federica: </span>─Está en la isla más chiquita del planeta, lejísimos, entre montañas altísimas. Solo se puede llegar una parte en avión y después en barco o en helicóptero. Pero como nadie sabe que existe, no se sabe mucho ─sigue Fede.
<span style="color:magenta;">Javier: </span>─Erre, el que nos dio las misiones, es un viajero del tiempo y trabaja allí. Algo nos explicó, y después fuimos una vez, Fede y yo ─sigue Javier.
<span style="color:green;">Federica: </span>─Es alucinante, de verdad. Capaz que un día, ustedes también viajan allá. Cuando fuimos, estaban en 2044, así que es el futuro de verdad ─exclama Federica.
<img src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/p3.png" alt="Trulli" width="570" height="500">
<div class="grupo-botones">
<button class="button">
[[ Conocé el Instituto del futuro ]]
</button>
</div>
<audio controls class="audio-prueba">
<source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\3.2.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]
Ilustración del IdeF
Boton conoce el Instituto del futuro
<font face="OpenDyslexic">
<p style="color: black;">
<span style="color:magenta;">Javier: </span>─Erre nos explicó un poco a qué se dedica el Instituto. Hay algunos investigadores que analizan la historia de la humanidad. Está prohibido viajar en el tiempo al pasado y querer deshacer algo que ocurrió, porque eso armaría un lío tremendo y viviríamos en un caos. Se imaginan qué pasaría si alguien cambiara la historia, y después viene otra persona y la vuelve a cambiar… la historia interminable, siempre en el mismo punto ─explica Javier y confía en que sus amigos comprendan.
<span style="color:green;">Federica: </span> ─Pero que no se pueda cambiar nada del pasado no significa que uno sepa que algunas cosas fueron injustas, por ejemplo. Cada acción humana en determinado momento, genera una acción-consecuencia en el futuro. Así que lo que se puede hacer es ir al tiempo en que está por suceder la consecuencia y evitarla. Algo así ─continúa Fede.
<div class="grupo-botones">
<button class="button">
[[ El mejor ejemplo: 1930: el viaje ]]
</button>
</div>
<div class="grupo-botones">
<button class="button">
[[ HR y Erre ]]
</button>
</div>
<audio controls class="audio-prueba">
<source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\3.3.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> ─El mejor ejemplo es el nuestro. Como vieron, las misiones que nos encomendó Erre tienen que ver con el primer mundial de fútbol. Fíjense esta “injusticia”: en la Torre de los Homenajes, cuando se inauguró el Estadio Centenario, debía incluir una hermosa escultura del gran Juan Zorrilla de San Martín, el escultor más importante de nuestro país. Esa escultura, sin embargo, nunca apareció, ni se supo qué ocurrió con ella. Hasta el día de hoy, la Torre de los Homenajes incluye esa plataforma donde algún día estará la escultura famosa… ─dice Federica en voz baja de la emoción.
<span style="color:magenta;">Javier: </span>─Entonces, si la encontráramos, que es una de las misiones, y la pusiéramos en la Torre de los Homenajes para el partido inaugural del mundial de 2030… habríamos resuelto esa injusticia y todo el mundo podría ver la escultura ─remata Javier.
<div class="grupo-botones">
<button class="button">
[[ HR y Erre ]]
</button>
</div>
<audio controls class="audio-prueba">
<source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\3.4.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> ─En el Instituto conocimos a HR, el amigo investigador de Erre. Los dos nos explicaron algunas cuestiones ─sigue Javier y toma una carta del mazo.
<img src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/P31.png" alt="Trulli" width="570" height="500">
<span style="color:blue;">Narradora: </span> Solo se ve una ilustración de un enorme edificio de cristal, y algunos barracones cerca. Hay otros edificios y se ve la pista de aterrizaje de los helicópteros, un helipuerto tan misterioso como todo lo demás.
<span style="color:green;">Federica: </span> ─Les cuento: como es de cristal y metal, enseguida me hizo acordar a la torre de las comunicaciones, seguro que la vieron ─empieza el Fede.
<span style="color:blue;">Narradora: </span> Tomassino y Antonella asienten sin decir nada, solo quieren escuchar lo que sus amigos vieron y vivieron.
<div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe title="Instituto-Twine" frameborder="0" width="1200" height="675" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genially.com/664e27479e61cf001427c664" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
<br>
<div class="grupo-botones">
<button class="button">
[[ Continúa ]]
</button>
</div>
<audio controls class="audio-prueba">
<source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\3.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 */
[continued]
<font face="OpenDyslexic">
<p style="color: black;">
<span style="color:green;">Federica: </span> ─ ¡Javier! ¡Esperá un momento! ¡Recién me doy cuenta de que nosotros cuatro somos los únicos que sabemos que existe! ¿Estaremos en peligro? ─grita Federica entre asustada y asombrada. ¡En qué lío se metieron!
<span style="color:magenta;">Javier: </span> ─Sí, amiga, también lo pensé. Pero nosotros somos viajeros del tiempo naturales, quiero decir, no trabajamos para el Instituto. Erre nos contacta para que los ayudemos. Y es claro que si llegáramos a contarle a alguien lo que hacemos y vimos, nos meterían en un manicomio, ¿no? ¿Quién nos creería? Dirían que estamos mal de la cabeza… ─reflexiona Javier en voz alta, aunque es la primera vez que piensa seriamente en el asunto.
<div class="grupo-botones">
<button class="button">
[[ Sigue ]]
</button>
</div>
<audio controls class="audio-prueba">
<source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\3.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:green;">Federica: </span> ─Dale, seguí tú, yo estoy un poco impresionada ─murmura Fede.
<span style="color:blue;">Narradora: </span>─Javier se sorprende. Cuando su amiga se impresiona… es algo serio y a tomar en cuenta.
<span style="color:magenta;">Javier: </span>─Hablando de todo un poco, vieron que se parece un poco al LATU, viste, donde queda Ceibal ─agrega Javier.
<span style="color:blue;">Narradora: </span>─¿Es que acaso habrá una relación entre Ceibal y el Instituto del Futuro? Yo creo que sí, pero no puedo decir nada más. Si no… me borran la memoria, y sin memoria no podría seguir contando esta historia.
<div class="grupo-botones">
<button class="button">
[[ La cantina del IdelF ]]
</button>
</div>
<audio controls class="audio-prueba">
<source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\3.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:green;">Federica: </span>─Contales de la cantina… ─se sonríe Fede.
<span style="color:magenta;">Javier: </span>─Sí, es increíble cómo pensaron en todo. En esa cantina hay comida de distintas partes del mundo y de distintas épocas. Porque los viajeros en el tiempo tienen que acostumbrarse a lo que se come en el destino al que los manden. Ponele: alguien viaja a 2040 y son todos veganos. O alguien viaja a 1950, y la comida es chatarra. O te toca viajar a un país en Sudamérica, donde se come mucho maíz, o papas diferentes, como en Perú, o frutas tropicales, como en Venezuela o Brasil… Los viajeros en el tiempo estudian mucho el lugar al que viajan. Es por eso. Y está el piso de los investigadores, que estudian los distintos momentos históricos a los que van los viajeros. Y lo que más te impresiona es el silencio, todos se comunican entre sí por aparatitos que decodifican lo que pensás. Es porque la IA está muy avanzada y la usan para eso, pero no sé bien ─dice Javier y duda. Eso último es una explicación que encontró para entender un poco tanto misterio.
<img src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/P32.png" alt="Trulli" width="570" height="500">
<div class="grupo-botones">
<button class="button">
[[ Normas del instituto ]]
</button>
</div>
<audio controls class="audio-prueba">
<source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\3.10.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 saca una carta y confía en que seguirán conociendo más detalles del Instituto. Tiene unas ganas enormes de ir allá y ver todo. ¿Será posible? Hmmm…
En la carta hay cuatro títulos: reglas del Instituto; leyes de la robótica; leyes del Instituto. Y con letra un poco más chica se lee: HR.
<div class="grupo-botones">
<button class="button">
[[ La ética de los viajes en el tiempo ]]
</button>
</div>
<div class="grupo-botones">
<button class="button">
[[ Leyes del IdelF ]]
</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:magenta;">Javier: </span>─El Instituto se rige por reglas. Por un lado, unas sobre la ética de los viajes en el tiempo, y por el otro, sobre las obligaciones de los viajeros en el tiempo ─explica.
<span style="color:red;">Antonella: </span>─¿Qué significa “la ética de los viajes en el tiempo”? ─pregunta Antonella.
<span style="color:magenta;">Javier: </span>─Significa que los viajeros en el tiempo deben comportarse de un modo correcto, sin violar las normas de la convivencia, sin hacer daño. Lo vas a entender cuando ponga ejemplos ─le dice Javier y le sonríe para que sienta confianza.
─Hay tres leyes escritas y dos que recibís oralmente. Son las que deben respetar los viajeros en el tiempo y que deben cumplir, sí o sí ─continúa.
<span style="color:blue;">Narradora: </span> Federica lo interrumpe:
<span style="color:green;">Federica: </span> ─¿Y si no las cumplen?
<span style="color:magenta;">Javier: </span>─Pasa eso que ya dije: les borran la memoria y deben volver a su tiempo. Y no pueden viajar nunca más ─explica Javier muy concentrado.
<div class="grupo-botones">
<button class="button">
[[ Leyes del IdelF ]]
</button>
</div>
<div class="grupo-botones">
<button class="button">
[[ Asimov ]]
</button>
</div>
<div class="grupo-botones">
<button class="button">
[[ Los viajeros ]]
</button>
</div>
<audio controls class="audio-prueba">
<source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\3.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:blue;">Narradora: </span> Es que el Instituto del Futuro es un asunto serio, muy serio.
<span style="color:magenta;">Javier: </span> ─Las leyes del Instituto se basan en las leyes de la robótica, que inventó Asimov.
<span style="color:red;">Antonella: </span>─¿Y cómo son las leyes del Instituto? ¿Hay robots allá? ─quiere saber Antonella que no es capaz de imaginar uno.
<span style="color:magenta;">Javier: </span>─No, no hay robots en el Instituto para el Futuro, hay otras cosas un poco más actuales y complejas, como hologramas, inteligencia artificial y otros aparatitos que no sé para qué sirven. Pero tomaron las leyes de la robótica como guía. La primera, que es la más importante, dice que un viajero en el tiempo no puede interferir nunca en un asunto del pasado, incluso si cree que es por el bien general. La segunda dice que un viajero en el tiempo siempre debe cumplir la orden que le da su superior, salvo que contradiga la primera. La tercera, que un viajero en el tiempo debe proteger su existencia y su misión, salvo que no contradiga las otras leyes.
<img src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/P33.png" alt="Trulli" width="570" height="500">
<div class="grupo-botones">
<button class="button">
[[ La ética de los viajes en el tiempo ]]
</button>
</div>
<div class="grupo-botones">
<button class="button">
[[ Asimov ]]
</button>
</div>
<div class="grupo-botones">
<button class="button">
[[ Los viajeros ]]
</button>
</div>
<audio controls class="audio-prueba">
<source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\3.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:magenta;">Javier: </span> Fue un escritor importantísimo de ciencia ficción y además se dedicó a la divulgación científica. Eso quiere decir que explicó muchos fenómenos científicos en un lenguaje sencillo y con ejemplos clarísimos para que las personas los entendieran. Un genio total. Sigo. Las leyes de la robótica son cuatro. Pero en concreto, dicen que un robot no le hará daño a un ser humano; que si encuentra uno en problemas, lo va a ayudar. Además, siempre debe cumplir las órdenes que le dé un ser humano, siempre y cuando no le causan daño a una persona. La última dice que un robot debe proteger su existencia, siempre que no contradiga las otras leyes. Aclaro que Asimov las escribió en 1942… y siguen vigentes. ¡Un adelantado a su época! ─exclama Javier como si estuviera dando una charla.
<div class="grupo-botones">
<button class="button">
[[ Los viajeros ]]
</button>
</div>
<audio controls class="audio-prueba">
<source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\3.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:red;">Antonella: </span>:─Pero entonces, los viajeros en el tiempo son personas bastante solitarias, ¿no? Me dan un poco de pena. Sin familia, sin casa… Peor que nosotros ─comenta Antonella.
<span style="color:green;">Federica: </span>─Es cierto. En el Instituto son muy exigentes. Sin embargo, nosotros, Javier y yo, nos hicimos amigos de ustedes, cuando nos conocimos en el Conte Verde, hace cien años ─dice Fede y entrecierra los ojos al recordar la primera vez que vio a los gemelos.
<span style="color:orange;">Tomassino: </span>─No solo nos hicimos amigos… ejem, nos enamoramos, ¿no? ─se ríe Tomassino y mira con ternura a Fede que se pone coloradísima.
<span style="color:magenta;">Javier: </span> ─Es decir… hicimos dos cosas que están prohibidas ─agrega Javier.
<span style="color:red;">Antonella: </span>─¡Y no les borraron la memoria! ─aplaude Antonella, feliz.
<div class="grupo-botones">
<button class="button">
[[ HR ]]
</button>
</div>
<audio controls class="audio-prueba">
<source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\3.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:magenta;">Javier: </span> ─Es que… nosotros no somos del Instituto del Futuro, pero no sé por qué. En algún momento se lo preguntaré a Erre o a HR ─dice Javier.
<span style="color:blue;">Narradora: </span> Realmente, es un tema pendiente.
<span style="color:green;">Federica: </span> ─Y ya que mencionaste a HR, Javi, ¿por qué no nos contás quién es y qué hace? A mí me cae re bien ─propone Federica.
<font face="OpenDyslexic">
<p style="color: black;">
<span style="color:magenta;">Javier: </span>─HR es un investigador de historia, y encontró algunos datos curiosos. Así que se puso a pensar en la ética de los viajes en el tiempo. Y también pensó en la ley que dice que no se puede modificar el pasado. El asunto es cómo resolver algo que no salió bien en el pasado, sin modificarlo. Me lo explicó y lo entendí. Podemos imaginar qué problemas surgen a partir de eso que no salió bien y tratar de corregirlos en el futuro. No sé si me entienden ─dice Javier dudando.
<img src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/P34.png" alt="Trulli" width="570" height="500">
<span style="color:magenta;">Javier: </span>─¿Qué les parece si hacemos un recreo y tomamos una cocoa con bizcochos? ─propone Javier.
<span style="color:blue;">Narradora: </span>Todos están de acuerdo. Hace horas que están sumergidos en el juego y el tiempo se pasa volando.
<div class="grupo-botones">
<button class="button">
[[ Capítulo 4 ]]
</button>
</div>
<div class="grupo-botones">
<button class="button">
[[ Revive el CapÍtulo 3 ]]
</button>
</div>
<audio controls class="audio-prueba">
<source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\3.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;">
<span style="color:red;">Antonella: </span>─¿Qué significa, Javier? ¡Vamos, no seas malo! ─protesta Antonella con la tapa entre las manos. El logo la fascina, realmente, y se imagina que sería un lindo adorno para la cadenita que heredó de la madre.
<span style="color:magenta;">Javier: </span>─Les vamos a explicar, porque no es tan sencillo. Es el logo del Instituto del Futuro. Es una organización súper secreta, tan secreta que nadie, pero nadie, sabe que existe. Solo los que trabajan y viven allí, y bueno, nosotros, porque viajamos en el tiempo ─comienza Javier.
<div class="grupo-botones">
<button class="button">
[[¿Qué es el Instituto del Futuro?]]
</button>
</div>
<audio controls class="audio-prueba">
<source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios\3.1.m4a">
</audio>
<div class="texto-audio">
<p>
Audio de lectura.
</p>
</div>
[CSS]
[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]