@keyframes duck-fly-1 {
  0% {
    left: -80px;
    top: 58vh;
  }
  30% {
    left: 6vh;
    top: 43vh;
  }
  75% {
    left: 11vh;
    top: 46vh;
  }
  100% {
    left: 100vw;
    top: 22vh;
  }
}
@keyframes duck-fly-2 {
  0% {
    left: -80px;
    top: 4vh;
  }
  30% {
    left: 10vh;
    top: 24vh;
  }
  75% {
    left: 47vh;
    top: 17vh;
  }
  100% {
    left: 100vw;
    top: 17vh;
  }
}
@keyframes duck-fly-3 {
  0% {
    left: -80px;
    top: 72vh;
  }
  30% {
    left: 9vh;
    top: 7vh;
  }
  75% {
    left: 7vh;
    top: 7vh;
  }
  100% {
    left: 100vw;
    top: 34vh;
  }
}
@keyframes duck-fly-4 {
  0% {
    left: -80px;
    top: 8vh;
  }
  30% {
    left: 4vh;
    top: 34vh;
  }
  75% {
    left: 42vh;
    top: 30vh;
  }
  100% {
    left: 100vw;
    top: 82vh;
  }
}
.body {
  counter-reset: count;
  height: 100vh;
  margin: 0;
  background-image: url("./image/background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.duck-check {
  position: absolute;
  visibility: hidden;
  left: -9999999px;
}
.duck-check:checked {
  counter-increment: count;
}
.duck-check:checked ~ label {
  display: none;
}

.counter-info {
  position: absolute;
  top: 14px;
  right: 54px;
  font-size: 40px;
  font-family: sans-serif;
}
.counter-info::before {
  content: counter(count);
}

.duck {
  position: absolute;
}
.duck__img {
  width: 80px;
}
.duck_1 {
  animation: duck-fly-1 3s ease-in 1s both;
}
.duck_2 {
  animation: duck-fly-2 3s ease-in 2s both;
}
.duck_3 {
  animation: duck-fly-3 3s ease-in 3s both;
}
.duck_4 {
  animation: duck-fly-4 3s ease-in 4s both;
}/*# sourceMappingURL=style.css.map */