body{
    /* Para agregar color de fondo */
    /* background-color: rgb(241, 241, 233); */
    background: linear-gradient(#fefae0,#faedcd,#e9edc9);

        font-family: "Poppins", sans-serif;
        
        
    /* background:url(https://t4.ftcdn.net/jpg/02/10/45/95/360_F_210459536_XmLDEcKq2DpeNLVmheuWeu9NM9aGKnih.jpg) */
   
  }


}
h3{
    font-family: "Lora", serif;
    /* COLOR DE TEXTO */
    color: rgb(63, 50, 33);
  /* CAMBIAR EL TAMAÑO DE LAS IMÁGENES (recuerda ponerle id en html y llamar con # en css */
/* Se puede trabajar con pixeles (px y %) */
} 
#banner{
  width: 50%;
border-radius: 30px;
}
h1{
    color: cornflowerblue;
    font-family: Arial, Helvetica, sans-serif;
}
img{
    boreder border: radius 5px;
}
/* PARA BORDES REDONDEADOS EN LAS IMÁGENES */

/* PARA MODIFICAR CSS DE UN ELEMENTO ESP. EN HTML SE LE ASIGNA UNA CLASS 
Y SE LE LLAMA INICIANDO CON UN PUNTO (.) ANTES DEL NOMBRE */

.gatitol{
width: 30%;
height: 300px;
border-radius: 20px;
}
/* PARA EDITAR DIV (LO PUSIMOS EN HTML) DEL MENÚ */
.menu{
    background-color: rgb(251, 242, 230);
    /* hará flexible para moverse en la página */
    display: flex;
    /* En columna */
    flex-direction: column;
    /* ALIGN ITEMS los alínea depende de lo que eligas (CENTER) */
    align-items: center;
}
 .imagenb{
    display:flex;
    background-color: rgb(245, 236, 225);
    align-items:center ;
 }
/* EDICIÓN DE LAS ANCLAS DEL MENÚ */
 a{
    color: rgb(248, 247, 250);
    text-decoration: none;
    /* EDICIÓN DE LAS VIÑETAS */
    /* ANCLAS COMO BOTONES */
    background-color: rgb(178, 140, 212);
    padding: 10px 20px;
    border-radius: 8px;
    margin-bottom: 5px;


 }
 .container{
    background-color: blanchedalmond;
    display:flex
    /*  align items -- alinear verticalmente*/
 
 }
 .logo{
    width: 50px;
    margin-right: 50px;
    margin-left: 50px;
 }