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

.fixed{display: flex; align-items: center; justify-content: center;width: 150px; height:150px; background-color:red ; 
        position: fixed; top: calc(80% - 80px) ; right: 20px;}
.nofixed{display: flex; align-items: center; justify-content: center;width: 150px; height:150px; background-color: yellow;}

.divsticky {display: relative; width: 100%; height:800px; background-color:  #333;}
.sticky {display: flex; align-items: center; justify-content: center;width: 150px; height:150px; background-color:red ; position: sticky; 
        top: 10px ; right: 150px;}
.nosticky{display: flex; align-items: center; justify-content: center;width: 150px; height:150px; background-color: yellow;}

.divsticky1 {display: relative; width: 100%; height:600px; background-color:  #333;}
.nosticky1{display: flex; align-items: center; justify-content: center;width: 150px; height:150px; background-color: yellow; }
.sticky1 {display: flex; align-items: center; justify-content: center;width: 150px; height:150px; background-color:red ; 
        position: sticky; bottom: 10px ; left: 20px;}
.sticky2 {display: flex; align-items: center; justify-content: center;width: 150px; height:150px; background-color:green ; 
        position: sticky; bottom: 10px ; left: 30px;}