@charset "utf-8";
	.ani1 {
    	animation: animacion1 2s linear infinite alternate;
    	position: relative;
	}

	.ani2 {
    	animation: animacion2 2s linear infinite alternate;
    	position: relative;
	}

	@keyframes animacion1 {
    	0%   { left: 0px; }
    	100% { left: 100px; }
	}

	@keyframes animacion2 {
    	0%   { right: 0px; }
    	100% { right: 100px; }
	}


    @media screen and (max-width: 480px), screen and (width: 480px)
    {
	    body {background-image: url(images/background.png); font-family: "Azeret Mono"; font-size: 12px;}

		img.width {width: 100%; height: 230px;}

		div.center {text-align: center;} /* Centra la imagen */

		img.cabecera {width: 100%;}

		img.ancho {width: 100%;}

		nav {display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 20px; margin-left: auto; margin-right: auto; width: 100%;}

		section {display: grid; grid-template-rows: auto; row-gap: 3px; padding-bottom: 10px;}

		article {background-color: #cccccc; border-radius: 16px; padding: 3px; margin-top: 30px; font-size: 18px; border: 2px solid blue; height: fit-content;}

		aside {background-color: #cccccc; border-radius: 16px; padding: 3px; margin-top: 20px; font-size: 18px; border: 2px solid blue; height: fit-content;}

		h1 {text-align: center; text-decoration: underline;}

		.back {background-color: #002CE5; color: white;}

		.subrayado {text-decoration: underline; display: block;}

		.line {text-decoration: underline; display: block;}

		.salto {display: block;}

		div.line2 {margin-top: 8px;} /* Exclusivo para pantalla mediana y chica. Espacea los div en pantallas chicas. */

		.esconder1 {display: none;} /* Esconde las flechas animadas en pantallas chicas */

		.esconderBotones1 {display: none;} /* Esconde los botones grandes en pantallas chicas */

	    .flechas {width: 120px; height: 60px; margin-top: 30px;} /* Posiciona más abajo las flechas en esta pantalla */
	}

	@media only screen and (min-width: 481px) and (max-width: 1024px)
	{
	    body {background-image: url(images/background.png); font-family: "Azeret Mono"; font-size: 12px;}

		img.width {width: 100%; height: 290px;}

		div.center {text-align: center;} /* Centra la imagen */

		nav {display: flex; justify-content: space-evenly; margin-top: 20px; margin-left: auto; margin-right: auto; width: 100%; text-align: center;}

		section {display: grid; grid-template-rows: auto; padding-bottom: 8px;}

		article {background-color: #cccccc; border-radius: 16px; padding: 5px; padding-bottom: 15px; margin-top: 30px; font-size: 18px; border: 2px solid blue; height: fit-content;}

		aside {background-color: #cccccc; border-radius: 16px; padding: 5px; padding-bottom: 10px; margin-top: 25px; font-size: 18px; border: 2px solid blue; height: fit-content;}

		h1 {text-align: center; text-decoration: underline;}

		.back {background-color: #002CE5; color: white;}

		.subrayado {text-decoration: underline; display: block;}

		.line {text-decoration: underline; display: block;}

		.salto {display: block;}

		div.line2 {margin-top: 2px;} /* Exclusivo para pantalla mediana y chica */

		.move1 {margin-left: 100px; margin-top: 50px; width: 106px; height: 60px;} /* Posiciona la flecha1 y redimensiona */

		.move2 {margin-right: 100px; margin-top: 50px; width: 106px; height: 60px;} /* Posiciona la flecha2 y redimensiona */

		.esconder2 {display: none;}  /* Esconde las flechas no animadas en esta pantalla */

		.esconderBotones1 {display: none;} /* Esconde los botones grandes en pantallas chicas */
	}

	@media only screen and (min-width: 1025px)
	{
	    body {background-image: url(images/background.png); font-family: "Azeret Mono"; font-size: 12px;}

		img.width {width: 100%; height: 620px; margin: 0;} /* Antes y en las otras páginas la altura del header era de 547px */

		div.center {text-align: center;}  /* Centra la imagen */

		nav {display: flex; justify-content: space-evenly; margin-top: 25px; margin-left:auto; margin-right: auto; width: 60%;}

		/*div.line {width: 200px; height: 25px; border: 2px solid black; color: white; background-color: blue; border-radius: 10px;
			      text-align: center; padding-top: 2px; font-weight: bold; transition: background-color 2s ease;}*/

        /*div.line:hover {background-color: dodgerblue;}*/

		section {display: grid; grid-template-columns: 70% 30%; column-gap: 3px;}

		article {background-color: #dddddd; border-radius: 16px; padding: 6px; padding-bottom: 15px; margin-top: 30px; font-size: 18px; border: 2px solid blue; height: fit-content;}

		aside {background-color: #dddddd; border-radius: 16px; padding: 3px; padding-bottom: 15px; margin-top: 30px; font-size: 18px; border: 2px solid blue; height: fit-content;}

		h1 {text-align: center; text-decoration: underline;}

		.back {background-color: #002CE5; color: white;}

		.subrayado {text-decoration: underline; display: block;}

		.line {text-decoration: underline; display: block;}

		.salto {display: block;}

		.move1 {margin-left: 100px; margin-top: 50px;} /* Posiciona la flecha1 */

		.move2 {margin-right: 100px; margin-top: 50px;} /* Posiciona la flecha2 */

		.esconder2 {display: none;} /* Esconde las flechas no animadas en esta pantalla */

		.esconderBotones2 {display: none;} /* Esconde los botones chicos en pantallas grandes */
	}