body {
    
    --page_color: aliceblue;
	font-size: 18px;
	font-family: 'amaranthregular','Lato', sans-serif;
	--interactive-color: rgba(1,1,1,0);
  --interactive-border-color: rgba(1,1,1,0);
	
}

p {
  
  }

h1 {
    font-size: 45px;
    color:brown;
	text-align: center

}
h2 {
    font-size: 25px;
    color:darkslatebrown;
}

.caja0 {
        font-size: 22px;
         margin-left: auto;
         margin-right: auto;
         text-align: center;
         padding: 25px;
         box-shadow: 6px 6px 10px #000; 
         width: 65%;
    
}



.caja1 {
	width: 60%;
	background-color: rgba(50,250,250,0.15);
    box-shadow: 6px 6px 10px #000;
    border-radius: 20px;
    padding: 25px;
	padding-top:15px;
	padding-bottom:10px;
	font-size: 22px;
	color:black;
    margin-left: auto;
    margin-right: auto;
}

.caja2 {
	width: 80%;
	background-color: rgba(190,190,190,0.25);
    box-shadow: 6px 6px 10px #000;
    border-radius: 10px;
    padding: 25px;
	padding-top:15px;
	padding-bottom:15px;
	font-size: 22px;
	color:black;
    text-align:center;
    margin-left: auto;
    margin-right: auto;
}

.caja3 {
	width: 65%;
	background-color: rgba(250,250,210,1);
    box-shadow: 0px 0px 0px #000;
    border-top: 20px solid rgba(210,210,170,0.6);
    padding: 30px;
	padding-top:10px;
	padding-bottom:10px;
	font-size: 15px;
	color:black;
    margin-left: auto;
    margin-right: auto;
    
    animation-name: ejemplo2;
    animation-duration: 10s;
   }
   
.caja4 {
	width:50%;
    background-image: url("../imagenes/tabla2.png");
	background-repeat: no-repeat; 
    box-shadow: 6px 6px 10px #000;
    border-radius: 10px;
    padding: 25px;
	padding-top:20px;
	font-size: 20px;
	margin-top: 25px;
	margin-left: auto;
    margin-right: auto;
    
}   

.caja5 {
    width: 85%;
	background-color: rgba(50,250,210,.2);
    box-shadow: 0px 0px 0px #000;
    border-top: 20px solid rgba(210,210,70,0.6);
    padding: 30px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 25px;
    transform: rotate(20deg);
}

.nube {
	width:85%;
    height:90%;
    background-image: url('../imagenes/nube3.png');
    background-repeat: no-repeat;
    background-size:443px 350px;
	padding: 75px;
	padding-left: 60px;
	font-size: 30px;
    text-align: center;
	margin-top: 25px;
	margin-left: auto;
    margin-right: auto;
    text-shadow: 2px 2px 5px gray;
    
}   
   

.rta {
  width: 20%; 
  text-align:center; 
  color:brown; 
  padding:5px; 
  display: inline;
}

.titulo1 {
       font-size: 45px;
        margin: auto;
        text-align: center;
        color:azure;
        text-shadow: 0px 1px 1px #ddd,
                     0px 2px 1px #d6d6d6,
                     0px 3px 1px #ccc,
                     0px 4px 1px #c5c5c5,
                     0px 5px 1px #c1c1c1,
                     0px 6px 1px #bbb,
                     0px 7px 1px #777,
                     0px 8px 3px rgba(100, 100, 100, 0.4),
                     0px 9px 5px rgba(100, 100, 100, 0.1),
                     0px 10px 7px rgba(100, 100, 100, 0.15),
                     0px 11px 9px rgba(100, 100, 100, 0.2),
                     0px 12px 11px rgba(100, 100, 100, 0.25),
                     0px 13px 15px rgba(100, 100, 100, 0.3);
    }
    
.titulo2 {
	background: linear-gradient(30deg, #9ED8DB 40%, #007B82 70%);
    text-align: center;
    margin: 25px;
    margin-left: auto;
    margin-right: auto;
    font-size: 30px;
    color:white;
    width:60%;
}

.titulo3  {
    text-transform: uppercase;
    text-shadow: -15px 5px 20px #11d0a3;
    color: white;
    font-family: 'Anton', Arial, sans-serif;
    font-size: 40px;
    transition: all 0.25s ease-out;
    text-align: center;
}
.titulo3:hover {
    text-shadow: -10px 6px 15px #ced0a3;
}


/* Esta es la clase que permite un fondo animado con imagen */
.desliza {
  background: url("../fondos/tierra2.jpg");
  color: #eee;
  width: 100%;
  height: 30vh;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  animation: animacion1 100s linear infinite;
}

@keyframes animacion1 {
   100%{
    background-position:0px -3000px;
  }
}

/* Esta es la clase que permite un fondo animado con colores */
.gradiente {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite; justify-content: center; display: flex; align-items: center;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* Esta es la clase que permite un fondo con vídeo */
#myVideo {
  position: fixed;
  top: 0;
  bottom: 0;
  min-height:826px;
  min-width:auto;
    transform: translateX(-3.4%)
        translateY(-0%);
   
    background-size: cover;
  }
  
  #myVideo2 {
  position: fixed;
  top: 0;
  bottom: 0;
  min-height:826px;
  min-width:auto;
    transform: translateX(-3.4%)
        translateY(-0%);
   
    background-size: cover;
  }
  
  #myVideo3 {
  position: fixed;
  top: 0;
  bottom: 0;
  min-height:826px;
  min-width:auto;
    transform: translateX(-3.4%)
        translateY(-0%);
   
    background-size: cover;
  }

/* El estilo para incluir contenido de la página con fondo vídeo */
.content {
  position:absolute;
  border-radius: 15px;
  left:55px;
  background: rgba(0, 0, 0, 0.4);
  color: #f1f1f1;
  width: 84%;
  padding-right: 40px;
    padding-left: 40px;
}

/* Estilo para incluir el botón play/pausa en el vídeo */
#myBtn {
  width: 80px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: rgba(50,50,50,0.2);
  color: #fff;
  cursor: pointer;
}

#myBtn:hover {
  background: #ddd;
  color: black;
}

.content2 {
  position:absolute;
  
  left:-5px;
  background: rgba(50,50,50,0.0);
  color: #f1f1f1;
  width: 25%;
  padding-right: 40px;
    padding-left: 40px;
}

#myBtn2 {
  width: 80px;
  font-size: 18px;
  padding: 10px;
  
  border: none;
  background: rgba(50,250,50,0.2);
  color: #fff;
  cursor: pointer;
}

#myBtn2:hover {
  background: #ddd;
  color: black;
}





.content3 {
  position:absolute;
  
  left:500px;
  background: rgba(0, 40, 200, 0.0);
  color: #f1f1f1;
  width: 25%;
  padding-right: 40px;
    padding-left: 40px;
}

#myBtn3 {
  width: 80px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: rgba(0, 40, 200, 0.2);
  color: #fff;
  cursor: pointer;
}

#myBtn3:hover {
  background: #ddd;
  color: black;
}

/* Esta es la clase que usé para el título de KaTeX  */
.caja_katex {
	display:block;
	margin: 0 auto;
	margin-top: 25px;
	max-width: 90%;
	background-color: rgb(245,245,245);
}

.caja_katex h2 {
	display:block;
	margin: 0 auto;
	font-size: 1.4em;
	color: #fff;
	background: rgb(7,92,78);
	text-align:center;
	
	
}

/* Estilo para poner la numeración de páginas en los extremos */
.page:nth-child(even) .page_number {
  text-align: right;
}
.page:nth-child(odd) .page_number {
  text-align: left;

}

.referencia {
  color: rgba(1,1,1,0);
  position: relative;
  background-color: rgba(1,1,1,0);
  float: initial;
  margin-left: 0;
  display: inline-block;
  
}

table, th, td {
	border: 2px solid black;
	border-collapse: collapse;
	
	/* Centrado de la tabla */
	margin-left:auto; 
	margin-right:auto;
	
	text-align: left;
	}
	table {
	width:60%;
	}
	th, td {
	padding: 2px 10px 2px 10px;
	}
	th {
	background: rgb(79,112,197);
	color: white;
	text-align: center;
	}
	
	/* Estilo cebra */
	tr:nth-child(even) {background-color: #d2e2ff;}
	
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted red; 
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 10px;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}