/*Esto es para quitar los valores de margen y padding que ponen los navegadores*/
   *{ padding: 0;margin: 0;}
   body{font-family: cursive, Arial, Helvetica, sans-serif;
   background-image: url('../imgs/madera1.jpg') ;}
   .Titulo{display: flex; width: 100%; padding: 10px 25%; background-color: black;}
   .Titulo h1{font-size: 1.5em; bottom: 50%;padding: 30px ; color: antiquewhite;;}
   .Titulo img{width: 5%;margin-left:  22%;}
   .menu{list-style: none; padding: 0;  width: 100%; margin: auto;}
   .menu li a{text-decoration: none; color: white; padding: 20px;display: block;}
   .menu li{display: inline-block;text-align: center; font-size: 1.4em;}
   .menu li a:hover{background-color: #e07066 ;}
   footer{position: fixed;bottom: 0;background-color: #e07066 ; text-align: center;width: 100%;padding: 30px;}
    .contenido{display: flex;}
    

    .Tienda{width: 60%; margin-left: 18%;}

   main{padding: 80px; text-align: justify;line-height: 1.6em ;font-size: 1.3em;}
   main h1{text-align: center;font-size: 2em; text-decoration: underline;}
   main li{list-style: circle ;}

   /*A todas las palabras que vayan en negrita o subrayadas se les añade una clase de estas dos para que el subrayado 
   y la negrita vaya en estilos css*/
   .negrita{font-weight: bold;}
   .subrayado{text-decoration: underline;}
  

   /*Para un tamaño de pantalla inferior a 1070px, el menu de navegación se verá con disposición en columnas,
   no colocandose asi el menu de navegación en dos lineas cuando la pantalla se va reduciendo*/
   @media screen and (max-width:1070px) {
       .menu{flex-direction: column;}
       li{width: 60%;padding: 10px;border-bottom: solid 1px grey;}
   }
       /*Esto no me funciona bien, era para que en el titulo del trabajo, no me aplicara padding, porque si no
       hay un momento que al minimizar la pantalla hay texto que no se*/
   @media screen and (max-width:4000px) {
       .Titulo{padding: 0; }
   }