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;}

.divpadre1 {border: 5px solid black;background-color: lightcoral;height:150px;display: flex; flex-wrap: wrap; justify-content: space-evenly;align-items: stretch;}
.hijo1 { display:flex ;justify-content: center;width:15vw; background-color: rgb(138, 66, 183); margin: 5px;}

.divpadre2 {border: 5px solid black;background-color: lightcoral; height:150px; display: flex; flex-wrap: wrap; justify-content: space-evenly;align-items: flex-start;}
.hijo2 { display:flex ;justify-content: center;width:15vw; background-color: rgb(138, 66, 183); margin: 5px;}

.divpadre3 {border: 5px solid black;background-color: lightcoral ;height:150px;display: flex; flex-wrap: wrap; justify-content: space-evenly;align-items: center;}
.hijo3 { display:flex ;justify-content: center;width:15vw; background-color: rgb(138, 66, 183); margin: 5px;}

.divpadre4 {border: 5px solid black;background-color: lightcoral; height:150px;display: flex; flex-wrap: wrap; justify-content: space-evenly;align-items: flex-end;}
.hijo4 { display:flex ;justify-content: center;width:15vw; background-color: rgb(138, 66, 183); margin: 5px;}

.divpadre5 {border: 5px solid black;background-color: lightcoral; height:200px;display: flex; flex-wrap: wrap-reverse; justify-content:space-evenly;align-items:baseline;}
.hijo5 { display:flex ;justify-content: center;width:15vw; background-color: rgb(138, 66, 183); margin: 5px;}

.divpadre6 {border: 5px solid black;background-color: lightcoral; display: flex; flex-wrap: wrap; justify-content:space-evenly;align-content: flex-start;}
.hijo6 { display:flex ;justify-content: center; height: 100px;width:200px; background-color: rgb(138, 66, 183); margin: 5px;}

.divpadre7 {border: 5px solid black;background-color: lightcoral; display: flex; flex-wrap: wrap; justify-content:space-evenly;align-content: flex-end;}
.hijo7 { display:flex ;justify-content: center; height: 100px;width:200px; background-color: rgb(138, 66, 183); margin: 5px;}

.divpadre8 {border: 5px solid black;background-color: lightcoral; display: flex; flex-wrap: wrap-reverse; justify-content:space-evenly;align-content: baseline;}
.hijo8 { display:flex ;justify-content: center; height: 100px;width:200px; background-color: rgb(138, 66, 183); margin: 5px;}