body {
  font-family: "Poppins", sans-serif;
  width: 100vw;
  height: 100vh;
background-color: rgb(209, 253, 226);
  background-image: url("./limones.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-blend-mode:screen;
}

.contenedor {
  position: absolute;
  /* overflow: auto; */
  width: 80vw;
  height: auto;
  right: 10vw;
  top: 10vh;
  background-color: #abd9ae;
  border-radius: 5px;
  box-shadow: 2.8px 2.8px 2.3px rgba(0, 0, 0, 0.02),
    8px 8px 7.4px rgba(0, 0, 0, 0.028),
    16.2px 16.2px 15.1px rgba(0, 0, 0, 0.035),
    29px 29px 26.1px rgba(0, 0, 0, 0.042), 50px 50px 42.8px rgba(0, 0, 0, 0.05),
    100px 100px 80px rgba(0, 0, 0, 0.07);
}
.linea {
  width: 25%;
  margin: 0.3em auto 0.2em auto;
  height: 0.2vh;
  background-color: darkseagreen;
}

h1,
h2 {
  width: 100%;
  text-align: center;
  letter-spacing: 0.1em;
}
h1 {
  margin-top: 4%;
  margin-bottom: 0;
  font-weight: bold;
  font-size: 1.2em;
}
h2 {
  font-weight: 400;
  font-size: 2em;
margin-top: 0.3em;
  margin-bottom: 0.3em;

}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
a:hover,
a:active {
  transition-duration: 0.2s;
  transition-timing-function: linear;
}
ul li:first-child a {
  background-color: #d69f6f;
}
ul li:first-child a:hover {
  background-color: #8f4f18;
}
ul li:first-child a:active {
  background-color: #8f4f18;
  transform: scale(0.97);
  box-shadow: -5px -5px 15px 10px rgba(0, 0, 0, 0.4) inset;
  -webkit-box-shadow: -5px -5px 15px 10px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: -5px -5px 15px 10px rgba(0, 0, 0, 0.4) inset;
}
ul li:last-child a {
  background-color: #8773c7;
  margin-bottom: 12vh;
}
ul li:last-child a:hover {
  background-color: #53477a;
}
ul li:last-child a:active {
  background-color: #53477a;
  transform: scale(0.97);
  box-shadow: -5px -5px 15px 10px rgba(0, 0, 0, 0.4) inset;
  -webkit-box-shadow: -5px -5px 15px 10px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: -5px -5px 15px 10px rgba(0, 0, 0, 0.4) inset;
}
svg {
  width: 0.8em;
  margin-left: 0.5em;
  fill: azure;
}
svg.lemon{
  width: 0.7em;
  margin-left: 0em;
  fill: darkseagreen;
}


a {
  text-decoration: none;
  color: azure;
  display: block;
  margin: auto;
  padding: 1em 0 1em 0;
  margin-top: 12vh;
  text-align: center;
  font-weight: 600;
  font-size: 1.5em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  width: 85%;
  border-radius: 0.5em;
  box-shadow: 20.5px 22.3px 5.8px -14px rgba(0, 0, 0, 0.07),
    23.1px 25.1px 14.1px -14px rgba(0, 0, 0, 0.045),
    23.7px 25.7px 25.2px -14px rgba(0, 0, 0, 0.035),
    24.2px 26.2px 40.3px -14px rgba(0, 0, 0, 0.03),
    26.7px 29px 62.7px -14px rgba(0, 0, 0, 0.026),
    47px 51px 128px -14px rgba(0, 0, 0, 0.021);
}

@media screen and (min-width: 768px) {
    h1 {
      font-size: 1.3em;
    }
    h2 {
      font-size: 2.5em;
    }
    a {
      font-size: 2em;
      width: 70%;
    }
  }
  @media screen and (min-width: 1024px) {
    h1 {
      font-size: 1.5em;
    }
    h2 {
      font-size: 2.7em;
    }
    a {
      font-size: 2em;
      width: 50%;
    }
  }
  @media screen and (min-width: 1440px) {
    h1 {
      font-size: 1.5em;
    }
    h2 {
      font-size: 3em;
    }
    a {
      font-size: 2em;
      width: 25%;
    }
  }