.caja0 {
  width: 550px;
  border: 5px solid blue;
  background-image: radial-gradient(circle at -15.07% 38.53%, #fddda4 0, #f5e0a3 4.55%, #ede3a4 9.09%, #e5e5a6 13.64%, #dce7a9 18.18%, #d3eaad 22.73%, #caecb2 27.27%, #c0edb7 31.82%, #b7efbe 36.36%, #aef0c5 40.91%, #a5f1cd 45.45%, #9df2d5 50%, #95f3dd 54.55%, #8ff3e6 59.09%, #89f3ee 63.64%, #86f2f6 68.18%, #84f2fd 72.73%, #84f1ff 77.27%, #87f0ff 81.82%, #8cefff 86.36%, #92edff 90.91%, #9bebff 95.45%, #a5e9ff 100%);
  padding: 10px;
  color:blue;
  font-size:22px;
  text-align:center;
  margin:5px;
  border-radius:14px;
} 


.caja1 {
	font-size: 22px;
	text-align: center;
	padding: 3px;
	margin: 5px;
	box-shadow: 6px 6px 10px #c2c2c2; 
	width: 90%;
	background-color: hsl(250 10% 90%);
	border-radius: 10px;
	margin-left: auto;
	margin-right: auto;
}

.flota {
	float: right;
  
  margin: -12px 0 -18px -15px;
  padding: 0px;
  border: 1px solid rgba(1,1,1,0);
  text-align: center;
  width: 60%;
}

.flota2 {
	float: left;
  
  margin: -12px -15px -10px -15px;
  padding: 5px;
  border: 1px solid rgba(1,1,1,0);
  text-align: center;
  width: 100%;
}

/* Incorporación de imagen flotando a la izquierda o derecha, se diseñó para ocupar un ancho del 50%, con ancho de imagen del 100% (para valores menores, hay que poner un estilo que modifique las márgenes */
.flota_i {
	float: left;
    margin: 0px 10px -15px -5px;
	padding: 5px;
	border: 1px solid rgba(1,1,1,0);
	width: 50%;
	margin-top:-10px;
}

.flota_i .figcaption {
	text-align: center;
	margin-bottom:0px;
	color: var(--text-color);
}

.flota_d {
	float: right;
    margin: 0px -10px 0px 15px;
	padding: 5px;
	border: 1px solid rgba(1,1,1,0);
	width: 50%;
	margin-top:10px;
	
}

.flota_d .figcaption {
	text-align: center;
	color: var(--text-color);
}

body.dark .caja1 {
	background-color: hsl(250 10% 10%);
	color: #cccccc;
}

.caja2 {
	width: 60%;
	background-color: Cornsilk;
    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;
}

body.dark .caja2 {
	background-color: rgba(50,250,250,0.75);
	color: white;
}

.caja3 {
	width: 500px;
	height: 470px;
	background-image: url("../images/fondo1.jpg");
	background-repeat: no-repeat;
    box-shadow: 6px 6px 10px #000;
    border-radius: 20px;
    padding: 25px;
	padding-top:15px;
	padding-bottom:10px;
	font-size: 30px;
	color:white;
    margin-left: auto;
    margin-right: auto;
	text-align: center;
	text-shadow: 2px 1px black;
}

.caja4 {
  background: rgba(200,200,200,0.5);
  border-radius: 10px;
  overflow: hidden;
  margin: 0.65em 0;
  width:80%;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-color);
}

 .caja4 h1 {
 color:white;
 background: hsl(150 80% 40%);
 padding:5px 0px 15px 0px;
 margin:0;
 text-shadow: 2px 2px 5px black;
 text-align: center;
 }  

 .caja4 .contenido {
 padding: 0 1rem;
 
 
 }

.caja5 {
  background: hsl(250 30% 90%);
  border-radius: .6rem;
  overflow: hidden;
  margin: 0.65em 0;
  color:var(--raro-color);
  width:100%;
  margin-left:0px;
    
}
   
.caja5 h5 {
  padding: .3rem .5rem;
  margin: 0;
  background: hsl(250 80% 90%);
  color: white;
  font-size: 20px;
  text-align: center;
  
}

.caja5 .content {
  padding: 0 .5rem;
  text-shadow: 2px 2px 1px #c2c2c2;
  
}

body.dark .caja5 .content {
	color: black;
}

.caja5 .modo1 {
  background: hsl(170 90% 40%);
  text-shadow: 2px 2px 3px black;
  background-image: url("../images/icono1.png");
  background-repeat: no-repeat;
}

.caja5 .modo2 {
  background: #8D6E63;
  text-shadow: 2px 2px 3px  black;
  background-image: url("../images/icono1.png");
  background-repeat: no-repeat;
  
}

.caja5 .modo3 {
  background: #8DAE63;
  text-shadow: 2px 2px 3px  black;
  background-image: url("../images/icono1.png");
  background-repeat: no-repeat;
  
}

.caja5 .modo4 {
  background: #E65100;
  text-shadow: 2px 2px 3px black;
  background-image: url("../images/icono1.png");
  background-repeat: no-repeat;
}

.caja5 .modo5 {
  background: #D81B60;
  text-shadow: 2px 2px 3px black;
  background-image: url("../images/icono1.png");
  background-repeat: no-repeat;
}

.caja5 .modo6 {
  background: #5E35B1;
  text-shadow: 2px 2px 3px black;
  background-image: url("../images/icono1.png");
  background-repeat: no-repeat;
}

.caja5 .modo7 {
  background: #301400;
  text-shadow: 2px 2px 3px black;
  background-image: url("../images/rytr.png");
  background-repeat: no-repeat;
}




.caja6 {
  margin:30px 0px;
  background-image: url("../images/ejemplo.png");
  background-repeat: no-repeat; 
  background-color: rgba(250,250,250,0.15);
  box-shadow: 6px 6px 10px #000;
  border-radius: 10px;
  padding: 25px;
  padding-top: 70px;
  padding-bottom: 10px;
  font-size: 20px;
}

.caja7 {
  margin:30px 0px;
  background: linear-gradient(to top right, red,yellow, green, blue);
  box-shadow: 6px 6px 10px #000;
  border-radius: 15px;
  padding: 10px;
  font-size: 24px;
  color: white;
  text-shadow: 2px 1px 5px black;
}

.lista1 li{
	padding-top: 7px;
	padding-left: 30px;
	list-style: none;
	background-image: url("../images/sun.png");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 20px;
}


.foto {
clip-path: circle(50%);
}


.foto2 {
clip-path: circle(150px at 50% 150px);
}

.foto3 {
float: left;
background: url(../images/fondo1.jpg);
shape-outside: circle(100px at 0px 100px);
}

figcaption {
	margin-top: -10px;
	
}

img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	
}

/* Estilos para la etiqueta audio */

/* Estilos audio1 */

/* centrado */
.audio1 {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Color del fondo */
.audio1::-webkit-media-controls-panel {
  background-color: #56AEFF;
}

.audio1::-webkit-media-controls-timeline {
  background-color: #B1D4E0;
  border-radius: 25px;
  margin-left: 10px;
  margin-right: 10px;
}

/* Estilo para el botón play */	
.audio1::-webkit-media-controls-play-button {
  background-color: #B1D4E0;
  border-radius: 50%;
}
.audio1::-webkit-media-controls-play-button:hover {
  background-color: rgba(177,212,224, .7);
}

/* Estilo para el tiempo transcurrido */
.audio1::-webkit-media-controls-current-time-display {
  color: #fff;
}


/* Estilos audio2, cambiando solo el color de fondo y centrado*/

/* Centrado */
.audio2 {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Color del fondo */
.audio2::-webkit-media-controls-panel {
  background-color: orange;
}

table, th, td {
	border: 2px solid black;
	border-collapse: collapse;
	text-align: left;
	font-size:18px;
}
th, td {
	padding: 2px 3px 2px 3px;
	vertical-align: middle;
}

table {
	width:100%;
}
th {
	background: rgb(79,112,197);
	color: white;
	text-align: center;
	vertical-align:middle;
	font-weight: bold;
}
tr:nth-child(even) {background-color: rgba(20,120,240,0.2);}

.sin_boton {
	border: 0px; background-color: rgba(1,1,1,0);
	
}

.sin_boton .btn_expand {
border: 0px solid red;
background-color: rgba(1,1,1, 0);
background-image: url("img/vacio.png");
}

body.dark .sin_boton .btn_expand {
background-image: url("img/vacio.png");
}

.gpt {
	width:500px;
	background-color: #10A37F;
	border-radius:25px;
	background-image: url("../images/gpt.png");
	background-repeat: no-repeat;
	padding: 15px;
	color: white;
	background-size:40px 40px;
	background-position:10px 10px;
	padding-top:55px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 2px 1px 3px black;
	
}

.perple {
	width:500px;
	background-color: #ddd;
	border-radius:25px;
	background-image: url("../images/perple.png");
	background-repeat: no-repeat;
	padding: 15px;
	color: black;
	background-size:170px 40px;
	background-position:10px 10px;
	padding-top:55px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 2px 1px 3px black;
}

.rytr {
	width:500px;
	background-color: white;
	border-radius:25px;
	 border-style: solid;
	border-width: 5px 20px;
	border-color: #301400;
	background-image: url("../images/rytr.png");
	background-repeat: no-repeat;
	padding: 15px;
	color: black;
	background-size:109px 50px;
	background-position:10px 10px;
	padding-top:55px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 2px 1px 3px black;
}

.bing {
	width:500px;
	background-color: #005cff;
	border-radius:25px;
	background-image: url("../images/bing2.png");
	background-repeat: no-repeat;
	padding: 15px;
	color: white;
	background-size:250px 40px;
	background-position:15px 10px;
	padding-top:60px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 2px 1px 3px black;
	
}

.bing b {color: orange}
.bing a {color: yellow}
		
.you {
	width:500px;
	background-color: #b73d00;
	border-radius:25px;
	background-image: url("../images/you.svg");
	background-repeat: no-repeat;
	padding: 15px;
	color: white;
	background-size:140px 40px;
	background-position:10px 10px;
	padding-top:55px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 2px 1px 3px black;
	
}




	.preg {
		font-size: 22px;
		color: var(--h1-color);
		text-align: center;
		margin-top:10px;
	
	
	
}

	body {
	--raro-color:#000;
	--nocambia-color:#000000;
	--caja0-color:#000000;
	--caja1-color:#000000;
	--caja2-color:#000000;
	--caja3-color:#000000;
	--caja5-color:#000000;
	}

	body.dark {  
	--raro-color:#000;
	--nocambia-color:#fff;
	--caja0-color:#358cd6;	
	--caja1-color:#3525d6;
	--caja2-color:#000;
	--caja3-color:#3525d6;
	--caja5-color:#3525d6;
	}
	
	/** Texto a dos columnas **/
.doscol {
  text-height: normal;
  column-count:2;
  column-fill: auto;
  column-gap: 30px
  }

/*** Texto a tres columnas ***/
.trescol {
  column-count:3;
  text-align: left;
  column-gap: 20px;
  column-fill: auto;
  
}

.rectangular-box {
    background-color: #f0f0f0; /* Color de fondo del rectángulo */
    padding: 15px; /* Espacio alrededor del texto dentro del rectángulo */
    border: 2px solid #cccccc; /* Borde del rectángulo */
    border-radius: 5px; /* Esquinas redondeadas (opcional) */
    width: fit-content; /* El ancho se ajusta al contenido */
    display: inline-block; /* Mantiene el rectángulo ajustado al contenido */
    font-family: Arial, sans-serif; /* Estilo de fuente */
    font-size: 16px; /* Tamaño de fuente */
    color: #333333; /* Color del texto */
}
.neon2 {
	font-family: monospace;
	letter-spacing: 6px;
	margin: 0;
	font-size: 180px;
	text-shadow: 0 0 5px yellow, 0 0 15px yellow, 0 0 30px yellow;
  }
  
  .rounded-box {
    width: 200px;
    height: 200px;
    background-color: #4CAF50;
    border-radius: 15px; /* Ajusta el valor para controlar el redondeo */
    padding: 20px;
    color: white;
    text-align: center;
}