/* MENUFIJO.CSS*/
body{
    margin: 0;
    padding: 0;
}

.banner{
    width: 100%;
    padding: 9rem; /*Un rm es equivalente a 20px*/
    text-align: center;
    background: url("imgfran/IMG-historia.jpg");
    background-color: rgb(0,0,0,.3); /*definimos una transparencia a la imagen*/
    background-blend-mode: soft-light; /*este atributo permite que la imagen de fondo
    y el color de fondo del elemento se deben mesclar entre si*/
    background-size: cover; /* Permite renderizar, estirar la imagen preservando su proporcion propia
     en el area de posicionamiento de fondo */
     background-position: center;
     box-sizing: border-box; /*Indica que el tamaño de la caja se va a mantener estable*/
}
.banner h1{
    color: black;
}
.container{
    width: 100%;
    height: 60px; /* alto del menu*/
    background: hwb(120 93% 5%);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 5rem;/*5rem para el lado izquierdo y derecho, quiere decir 5 a la izquierda y 5 la derecha*/
    box-sizing: border-box; /*Aqui evitamos un desborde en pantalla*/
    /* un meni sticky es un menu navegacion fija en una pagina web
    que permanece visible y en la misma posicion mientras el usuario se desplaza hacia abajo y se mueve por el sitio*/
    position: sticky;
    top: 100px; /* el 100px permite que pase por atras del navegador y desaparecer la foto, si quiero que la foto
    quede fija se le coloca "0"*/
}
.logo{
    width: 40px; /*permite mover el logo en el menu*/
    margin: 0;
}
.logoimg{
    width: 100%;
    
}
.item-options{
    font-family: arial;
    font-size: 15px;
    color: aqua;
    margin: 0 1.5rem;
    text-decoration: none;
}
.main-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.article{
    width: 70%; /*se define el ancho del texto*/

}
p{
    font-family: arial;
    font-size: 20px;
}