:root {
  --zerox: 100px;
  --zeroy: 5px;
  --twenty5x: 75px;
  --twenty5y: -25px;
  --fiftyx: 50px;
  --fiftyy: 5px;
  --seventy5x: 25px;
  --seventy5y: -25px;
  --hundredx: 0px;
  --hundredy: 5px;
  --angle: 60deg;
  --one: 0.32;
  --two: 0.45;
  --three: 0.63;
  --four: 0.53;
}

.alive {
  width: 100px;
  position: absolute;
  top: 200px;
  left: 700px;
  animation: alive 3s
    cubic-bezier(var(--one), var(--two), var(--three), var(--four)) infinite;
  opacity: 0.5;
}
.alive2 {
  width: 100px;
  position: absolute;
  top: 200px;
  left: 400px;
  animation: alive2 4s
    cubic-bezier(var(--one), var(--two), var(--three), var(--four)) infinite;
  opacity: 0.7;
}
#land {
  position: relative;
  left: 130px;
  width: 1300px;
  height: 650px;
  margin: 0 auto;
  background: url("tank.png");
  z-index: 1;
  background-size: 81%;
  background-repeat: no-repeat;
}
#pond {
  position: relative;
  top: 104px;
  left: -124px;
  margin: 0 auto;
  width: 938px;
  height: 500px;
  background: linear-gradient(to bottom, rgb(1, 136, 158), rgb(0, 58, 78));
  z-index: -1;
  background-repeat: no-repeat;
}

@keyframes alive {
  0% {
    margin-left: 0;
    opacity: 0.2;
    transform: translate3d(var(--zerox), var(--zeroy), 0);
  }
  25% {
    transform: translate3d(var(--twenty5x), var(--twenty5y), 0);
    opacity: 0.3;
  }
  50% {
    transform: translate3d(var(--fiftyx), var(--fiftyy), 0);
    opacity: 0.5;
  }
  75% {
    transform: translate3d(var(--seventy5x), var(--seventy5y), 0);
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    margin-left: 0px;
    transform: translate3d(var(--hundredx), var(--hundredy), 0);
  }
}
@keyframes alive2 {
  0% {
    opacity: 0.3;
    margin-left: 0;
    transform: translate3d(var(--hundredx), var(--hundredy), 0);
  }
  25% {
    opacity: 0.7;
    transform: translate3d(var(--seventy5x), var(--seventy5y), 0);
  }
  50% {
    transform: translate3d(var(--fiftyx), var(--fiftyy), 0);
    opacity: 0.5;
  }
  75% {
    transform: translate3d(var(--twenty5x), var(--twenty5y), 0);
    opacity: 0.3;
  }
  100% {
    margin-left: 0px;
    transform: translate3d(var(--zerox), var(--zeroy), 0);
    opacity: 0;
  }
}

.btns {
  width: 300px;
  margin: 0px auto;
  text-align: center;
}

.btn {
  padding: 10px 20px;
  border-radius: 5px;
}
#healthy {
  background-color: green;
  margin-right: 10px;
  color: whitesmoke;
}
#harmful {
  background-color: red;
  margin-left: 10px;
  color: whitesmoke;
}
#healthy:hover {
  color: green;
  background-color: whitesmoke;
}
#harmful:hover {
  color: red;
  background-color: whitesmoke;
}
.slider {
  width: 700px;
  margin: 0 auto;
}
.die {
  position: absolute;
  width: 100px;
  opacity: 0.7;
  animation: die 4s
    cubic-bezier(var(--one), var(--two), var(--three), var(--four));
  animation-fill-mode: forwards;
}
@keyframes die {
  0% {
    transform: translate3d(0px, 80px, 0px);
  }
  50% {
    transform: translate3d(0px, 150px, 0px);
  }
  100% {
    transform: translate3d(0px, 210px, 0px);
  }
}