body {background-color: #FFCE88;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin-left: 10px;
            transition: background-color 0.5s ease; /* Para que el cambio no sea brusco */
            font-family: sans-serif;
            }
.multimedia {display: inline-block; max-width: 400px;}
#colorPicker {height: 10px;}
#btnCambiar {margin: 10px;
            height: 40px;
            padding: 10px;
            font-size: 1.2rem;
            cursor: pointer;
            border: none;
            border-radius: 8px;
            background-color: #333;
            color: white;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1); width: 100%;
            
        }

 #btnCambiar:hover {
            background-color: #5a6;
        }

#linea {background-color: whitesmoke; /* Color de fondo */
  		background-image: radial-gradient(#000 20%, transparent 20%); /* Punto negro y transparencia */
  		background-size: 20px 20px; /* Tamaño del patrón y espaciado */
		}
#secciones {text-align: center;background-color: #c4954f;margin-left: -10px;padding: 10px;}        
.seccion-container {display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; text-align: center; margin-top: 5px; }
.seccion {font-size: clamp(.8rem, 2vh, 5rem);background-color: rgb(39, 176, 204); margin: 5px; height: 120px; min-width: 140px;text-align: left;  
        word-break: break-word; border-radius: 16px; max-width: 160px; padding: 8px 12px;border: 2px solid red; color:#000;}
.seccion:hover{ border: 2px solid goldenrod; background-color: aqua;}
.seccion-container a{text-decoration: none;}

#apoyo { padding: 10px 10px;font-size: 1.2rem;
        cursor: pointer;border: none; border-radius: 8px;
        background-color: #414141;color: white; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        display: flex; align-items: center; margin-bottom: 10px; flex-wrap: wrap; justify-content: center;}   
#apoyo a{margin: 0 4px;}    
#apoyo img { height: 35px; border-radius: 8px; object-fit: fill;display: block;}

@media only screen and (max-width: 800px) {
    #apoyo {font-size: 1rem; display: inline-block;margin-bottom: 4%; margin-left: 7.5vw; justify-content: center; width: 80%; text-align: center;}
    #apoyo a {display: flex; justify-content: center; margin: 5px 0;}
}

.caja1 {width: 150px; height:150px; background-color:red ;}
.caja2{width: 150px; height:150px; background-color: yellow;}

.caja11 {width: 150px; height:150px; background-color:red ;padding: 0px;}
.caja21{width: 150px; height:150px; background-color: yellow;padding:20px;}
.caja31{width: 150px; height:150px; background-color: lightseagreen;padding:40px;}


.caja12 {width: 150px; height:150px; background-color:red ;padding: 0px; border: 20px solid blue;}
.caja22{width: 150px; height:150px; background-color: yellow;padding:0px; border: 10px solid lightblue;}


.caja13 {width: 150px; height:150px; background-color:red ;padding: 0px; border: 10px solid blue;
		margin: 0px 0px;}
.caja23{width: 150px; height:150px; background-color: yellow;padding:0px; border: 10px solid lightblue;
		margin: 0px 20px;}
.caja33{width: 150px; height:150px; background-color: lightseagreen;padding:0px; border: 10px solid lightblue;
		margin: 0px 40px;}


.caja43 {width: 150px; height:150px; background-color:red ;padding: 0px; border: 10px solid blue;
		margin: 0px 0px;}
.caja53{width: 150px; height:150px; background-color: yellow;padding:0px; border: 10px solid lightblue;
		margin: 20px 0px;}
.caja63{width: 150px; height:150px; background-color: lightseagreen;padding:0px; border: 10px solid lightblue;
		margin: 40px 0px;}



.caja14 {width: 150px; height:150px; background-color:red ;padding: 0px; border: 10px solid blue;
		margin:0;position:relative; top: 20px ; right:20px;}
.caja24{width: 150px; height:150px; background-color: yellow;padding:0px; border: 10px solid lightblue;
		margin:0;position:relative;}
.caja34 {width: 150px; height:150px; background-color:red ;padding: 0px; border: 10px solid greenyellow;
		margin:0;position:relative ;}
.caja44{width: 150px; height:150px; background-color: yellow;padding:0px; border: 10px solid lightseagreen;
		margin:0;position:relative; left:20px;bottom:20px;}


.contenedor {width : 400px; height: 400px; background-color: grey; position: relative;}
.caja15 {width: 150px; height:150px; background-color:red ;padding: 0px; border: 10px solid blue;
		margin: auto;position:absolute;left:0 }
.caja25{width: 150px; height:150px; background-color: yellow;padding:0px; border: 10px solid lightblue;
		margin: auto;position:absolute; right:0; }
.caja35 {width: 150px; height:150px; background-color:red ;padding: 0px; border: 10px solid greenyellow;
		margin: auto;position:absolute ; bottom:0; }
.caja45{width: 150px; height:150px; background-color: yellow;padding:0px; border: 10px solid lightseagreen;
		margin: auto;position:absolute; bottom:0; right:0}
.caja55{width: 60px; height:60px; background-color: yellow;padding:0px; border: 1px solid lightpink;
		margin: auto;position:absolute; top:0; left:0 ;bottom:0; right:0; margin:auto;}