@font-face {
    font-family: "Open Sans";
    src: url(fonts/OpenSans-Regular.ttf)format("truetype");
}
body{ 
    font-family: "Open Sans", sans-serif;
     display: block;
    width: 80%;
    margin: 0px auto;
    background-color:rgb(241, 174, 174);
}
a:hover{ 
    background-color: beige;
}
 ul{
    display: flex;
    list-style-type: none;
    margin: 1px;
    padding:0% ;
    justify-content: center;
 }
 li{ flex-grow: 1;
   /* padding: 15px; */
   }
/* EJEMPLO DE CONTENEDOR*/
 
.container{ 
    background-color: ghostwhite;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
@media(min-width: 768px){
    .container{
        width: 750px;
    }
}
@media(min-width:992px){
    .container{
        width: 970px;
    }
}
@media( min-width:1200px){
    .container{
        width: 1170px;
    }
}
nav{ 
    width: 100%;
    background-color: beige;
}

li:hover{
    background-color: rgb(250, 245, 201);
    color:white;
a{
    display: block;
    padding: 1em;
    background-color: white;
    text-align: center;
    margin-bottom: 0.5em;
    text-decoration: none;
    color: beige;
} 
    }
    footer{
        height: 2em;
        background-color: beige;
    border-radius: 5px ;
    text-align: center;
    position: fixed;
    bottom: 0px;
    left: 0;
    width: 100%;
    margin-bottom: 0px;
    font-size: small;
}
img{ 
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}