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

.contenedor {font-size: 1.3em;}
.over1{width: 250px; height:250px; border-color:red ; background-color: tomato; overflow: visible;}
.over2{width: 250px; height:250px; border-color:red ; background-color: tomato; overflow: auto;}
.over3{width: 250px; height:250px; border-color:red ; background-color: tomato; overflow: scroll;}
.over4{width: 250px; height:250px; border-color:red ; background-color: tomato; overflow-x: scroll; white-space: nowrap;}
.over5{width: 250px; height:250px; border-color:red ; background-color: tomato; overflow: hidden;}

.over6{width: 250px; height:250px; background-color: darkcyan; border: 5px solid blue;overflow: hidden;}
#ej1 {width: 250px; height:250px; position: relative; top: 90px; left: 90px; transition: 1.5s;}
.over6:hover> #ej1 {position:relative ; left: 0; top: 0%; }