@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

body {
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin: 0;
 }
 
 /* -------------------- header -------------------- */
 a{
   text-decoration: none;
 }
#header {
   justify-content: center;
   align-items: center;
   display: flex;
   flex-direction: column; 
   background-color: rgb(34, 32, 32); /*#ADE6D0 */
}
#titulo{
   display: flex;
   justify-content: center;
   align-items: center;
}
h1{
   color: #44a36f;
   font-family: 'Courgette','Arial';
   margin:0;
}
#titulo_logo{
   width: 100%;
   max-width: 100px;
   margin:0 1em;
}

/*--------------Acciones------------------*/
.acciones{
   display: flex;
   flex-direction: row;
   align-items: center;
   background-color: rgb(34, 32, 32);
   margin: 5px auto 20px auto;
   width: 80%;
   padding: 10px 10px 10px 10px;
   border: 10px 10px 10px 10px;
}

#vender a:link, a:visited{
   font-size: 20px;
   display:inline;
   color:rgb(34, 32, 32);
   margin: 25px;
   padding: 10px;
   text-align: center;
   font-weight: bold;
   background-color: rgb(22, 160, 133);
}

#vender a:hover{
   background-color: rgb(72, 68, 68);
   color: rgb(22, 160, 133);
}

/* --------------ROBADOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO -----------------*/
@import url(http://fonts.googleapis.com/css?family=Montserrat+Alternates);
.field {
  display:flex;
  position:relative;
  margin:1em auto;
  width:70%;
  flex-direction:row;
  box-shadow:
   1px 1px 0 rgb(22, 160, 133),
   2px 2px 0 rgb(22, 160, 133),
   3px 3px 0 rgb(22, 160, 133),
   4px 4px 0 rgb(22, 160, 133),
   5px 5px 0 rgb(22, 160, 133),
   6px 6px 0 rgb(22, 160, 133),
   7px 7px 0 rgb(22, 160, 133)
  ;
}

.field>input[type=text],
.field>button {
  display:block;
  font:1.2em 'Montserrat','Arial';
}

.field>input[type=text] {
  flex:1;
  padding:0.6em;
  border:0.2em solid #44a36f;
}

.field>button {
  padding:0.6em 0.8em;
  background-color:rgb(26, 188, 156);
  color:white;
  border:none;
}
/* --------------ROBADOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO -----------------*/



/* Boton carrito de compras */
.icon-carrito{
   background-color: black;
   width: 3em;
   height: 3em;
   margin: 0.5em;
   position: fixed;
   bottom:0;
   right: 0;
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 100%;
}

/* ----------------------- Menú ------------------------*/
#menu {
   display: flex;
   justify-content: center;
   width: 50%;
}
#menu a{
   font-family: 'Montserrat';
   padding: 0.5em 0;
   display: flex;
   justify-content: center;
   color: #44a36f;
   margin: 0;
   width: 25%;
   border-right:white 1px solid ;
}

a:hover {
     transform: scale(1.10);
 }


 /* -------------------- productos -------------------- */
 #cuerpo{
   background-color: #44a36f;
   padding-top: 1em;
 }
 .productos-container{
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 #productos {
    display: flex;
    justify-content: center;
    width: 60%;
    flex-wrap: wrap;
 }
 
 .producto {
   text-align: center;
   border-radius: 10px;
   box-sizing: border-box;
   margin: 2px;
   padding: 0.5em;
   background-color: rgb(34, 32, 32) ;
   width: 30%;
 }
 .producto img{
   border-radius: 10PX;
   width: 100%;
 }
 .producto img:hover{
   transform: scale(1.10);
   
}
 .producto p{
   font-family: 'Montserrat','Arial';
 }
 

 
.producto-descripcion{
   color:white;
 }

 .producto-precio{
   color:#44a36f;
   font-weight: bold;
   font-size: 20px;
 }
 
 /* -------------------- contacto -------------------- */
 #contacto{

 }
 
/* Son cambios para teléfonos */ 
 @media (max-width: 600px) {
   #menu {
     width:100%;
   }
   #productos{
      width: 100%;
   }
   .acciones {
      width: 95%;
      justify-content: space-around;
   }
   #vender a {
      margin: 5px !important;
   }
   .field {
      margin: 5px 5px 5px 0px;
   }
   .field input {
      width: 70%;
   }
}