html{
  max-height: 100%;
}

#cc{
  position: relative; 
  left: 600px; 
  top: 100px;
  display: block;
}

body{
  background-color: white;
  max-height: 3px;
  
}

h1{
  position: absolute; 
  left: 500px;
  font-family: "Happy Monkey";
}

h2{
  font-family: "Happy Monkey";
  position: relative; 
  top: 100px; 
  left: 420px;
  max-width: 430px;
  z-index: 12;
}

p{
  font-family: "Merriweather Sans";
  width: 500px;
  position: relative;
  top: 100px;
  left: 480px;
  z-index: 5;
}

.invasoras{

  position: relative; 
  top: 170px;
  left: 410px;
  
}
#box{
  background-color: #C8D458; 
  position: absolute; 
  top: 120px; 
  width: 600px; 
  height: 400px; 
  color: #adacaa; 
  left: 400px; 
  border-radius: 25px;
  z-index: 1;
  max-height: 800px;
  
}

a:link{
  color: black;
}

.invasoras:visited{
  color: #511308;
}

.agave:visited{
  color: #081A00;
}

.prados:visited{
  color:#220044;
}

.bibliografia:visited{
  color:#2E3900;
}

.test:hover {
  cursor: pointer;
} 

.libro:link{
  color: white; 
}

.libro:visited{
  color: #FFF8DD;
}

.test:link{
  color: white;
}

.test{
  position: absolute; 
  top: 500px; 
  left: 200px;
  background-color:  white;
  color:  white; 
  border: none;
}

.prados{
  max-width: 400px;
  max-height: 400px;
  z-index: 5;
}

a{
  z-index: 12;
  text-decoration: none;
  font-family: "Merriweather Sans";
}

.invasoras{
  background-color: #FADF30;
  width: 150px;
  padding: 50px;
  position: relative; 
  top: 250px;
  left: 390px;
  display: block;
  border-radius: 25px;
}

.agave{
  width: 220px; 
  display: block;
  padding: 60px; 
  position: relative; 
  top: 67px; 
  left: 650px;
  background-color: #95c97f;
  border-radius: 25px; 
}

.prados{
  display: block; 
  background-color: #b8e1ff;
  width: 100px;
  padding: 40px;
  border-radius: 25px;
  position: relative; 
  top: 85px;
  left: 390px;
}

.libro{
  display: block; 
  background-color: #775253; 
  width: 70px; 
  padding: 70px; 
  border-radius: 25px; 
  position: relative; 
  bottom: 100px; 
  left: 580px;

}

.bibliografia{
  display: block; 
  background-color: #C8D458; 
  text-align: center;
  width: 70px;  
  padding: 60px;
  border-radius: 25px; 
  position: relative; 
  bottom: 280px; 
  left: 800px; 
  height: 60px;
}
.happy-monkey-regular {
  font-family: "Happy Monkey", serif;
  font-weight: 400;
  font-style: normal;
}

.merriweather-sans-specs {
  font-family: "Merriweather Sans", serif;
  font-weight: 300;
  font-style: normal;
}

.merriweather-regular {
  font-family: "Merriweather", serif;
  font-weight: 400;
  font-style: normal;
}

.merriweather-bold {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-style: normal;
}

.merriweather-regular-italic {
  font-family: "Merriweather", serif;
  font-weight: 400;
  font-style: italic;
}

.merriweather-bold-italic {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-style: italic;
}



#button{
  border: none; 
  background-color: white; 
  color: white; 
}

#boar-container {  
  height: 100vh;
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: opacity 500ms;
  width: 100%;
}

.boar {
  animation: fall ease-in infinite, sway ease-in-out infinite;
  color: skyblue;
  position: absolute;
}


@keyframes fall {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    top: 100vh;
    opacity: 1;
  }
}

@keyframes sway {
  0% {
    margin-left: 0;
  }
  25% {
    margin-left: 50px;
  }
  50% {
    margin-left: -50px;
  }
  75% {
    margin-left: 50px;
  }
  100% {
    margin-left: 0;
  }
}