body {
    background-color: black;
}

.titulo2 {
  font-family: 'Anton', sans-serif;
  color: white;
  font-size:220px;
  text-align: center;
}

.titulo2:hover{
    color:rgb(0, 30, 130);
}

.fondo-imagen {
  background-image: url("https://images.pexels.com/photos/281260/pexels-photo-281260.jpeg?_gl=1*1tdz3tq*_ga*MTMzNDYzNjEyMS4xNzcyMDM5NDk2*_ga_8JE65Q40S6*czE3NzIwMzk0OTUkbzEkZzEkdDE3NzIwMzk0OTckajU4JGwwJGgw");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  margin: 0;
}

.colina {
  width: 100vw;
  position: fixed;
  bottom: 0px;
  z-index: -1;
}

.flor1{
    width: 20vw;
    position: fixed;
    bottom: 197px;
    left: 80vw;
}

.FLORES {
    position: fixed;
}

.flor2{
  width: 16vw;
  height: auto;
    position: fixed;
    bottom: 70px;
    left: -1vw;
}

.flor3{
    width: 13vw;
    height: auto;
    position: fixed;
    bottom: 40px;
    left: 30vw;
    cursor: pointer;
}

.flor4 {
    width: 13vw;
    height: auto;
    position: fixed;
    bottom: 60px;
    left: 65vw;
    cursor: pointer;
}

.flor2{
    cursor: pointer;
}

.pajaro1{
    width: 10vw;
    height: auto;
    position: fixed;
    bottom: 43vw;
    left: 0vw;
    animation: mover 8s linear infinite;
}

@keyframes mover {
    0% {
        left: -15vw;
    }

    50% {
        left: 100vw;
    }

    100% {
        left: 0;
    }
}

#mariposa1 {
  width: 8vw;
  position: fixed;
  left: 60vw;
  bottom: 20vh;
  animation: volar1 6s infinite linear;
}

#mariposa1{
  position: absolute;
  width: 8vw;
  animation: volar 12s infinite linear;
}

@keyframes volar{
  0%{
    top: 10vh;
    left: 0vw;
  }

  25%{
    top: 40vh;
    left: 30vw;
  }

  50%{
    top: 5vh;
    left: 60vw;
  }

  75%{
    top: 50vh;
    left: 80vw;
  }

  100%{
    top: 20vh;
    left: 100vw;
  }
}

.mariposa2{
width:8vw;
position:relative;
left:40vw;
bottom:10vh;
opacity:0;
}

.mariposa2-volar{
opacity:1;
animation: volar2 4s linear;
}

@keyframes volar2{

0%{
transform: translate(0,0);
}

100%{
transform: translate(500px,-300px);
}

}

.dark{
  filter: brightness(40%);
  transition: 0.5s;
}

#libelula{
  position: absolute;
  width: 7vw;
  animation: vueloLibelula 10s infinite linear;
}

@keyframes vueloLibelula{

  0%{
    top: 0vh;
    left: 20vw;
  }

  20%{
    top: 60vh;
    left: 90vw;
  }

  40%{
    top: 30vh;
    left: 50vw;
  }

  60%{
    top: 80vh;
    left: 30vw;
  }

  80%{
    top: 20vh;
    left: 100vw;
  }

  100%{
    top: 60vh;
    left: 40vw;
  }

}

.pajaro2{
    width: 15vw;
    height: auto;
    position: fixed;
    bottom: 18vw;
    left: 0vw;
    z-index: -1;
    animation: mover 8s ease infinite;
}

@keyframes mover {
    0% {
        left: -20vw;
    }

    50% {
        left: 100vw;
    }

    100% {
        left: -20;
    }
}