DIGI

<!DOCTYPE html>
<html lang="en" >
<html>
<head>
<meta charset="UTF-8">
<title>Air Bomb Game</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    
<style>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,600);

.ip-twitter-icon:hover {
  transform: scale(1.2);
}

@-webkit-keyframes clouds_move-1 {
  0% {
    left: -150px;
  }
  100% {
    left: 100vw;
  }
}

@keyframes clouds_move-1 {
  0% {
    left: -150px;
  }
  100% {
    left: 100vw;
  }
}
@-webkit-keyframes clouds_move-2 {
  0% {
    left: -150px;
  }
  100% {
    left: 100vw;
  }
}
@keyframes clouds_move-2 {
  0% {
    left: -150px;
  }
  100% {
    left: 100vw;
  }
}
@-webkit-keyframes clouds_move-3 {
  0% {
    left: -150px;
  }
  100% {
    left: 100vw;
  }
}
@keyframes clouds_move-3 {
  0% {
    left: -150px;
  }
  100% {
    left: 100vw;
  }
}
@-webkit-keyframes clouds_move-4 {
  0% {
    left: -150px;
  }
  100% {
    left: 100vw;
  }
}
@keyframes clouds_move-4 {
  0% {
    left: -150px;
  }
  100% {
    left: 100vw;
  }
}
@-webkit-keyframes clouds_move-5 {
  0% {
    left: -150px;
  }
  100% {
    left: 100vw;
  }
}
@keyframes clouds_move-5 {
  0% {
    left: -150px;
  }
  100% {
    left: 100vw;
  }
}
@-webkit-keyframes clouds_move-6 {
  0% {
    left: -150px;
  }
  100% {
    left: 100vw;
  }
}
@keyframes clouds_move-6 {
  0% {
    left: -150px;
  }
  100% {
    left: 100vw;
  }
}
@-webkit-keyframes clouds_move-7 {
  0% {
    left: -150px;
  }
  100% {
    left: 100vw;
  }
}
@keyframes clouds_move-7 {
  0% {
    left: -150px;
  }
  100% {
    left: 100vw;
  }
}
@-webkit-keyframes clouds_move-8 {
  0% {
    left: -150px;
  }
  100% {
    left: 100vw;
  }
}
@keyframes clouds_move-8 {
  0% {
    left: -150px;
  }
  100% {
    left: 100vw;
  }
}
@-webkit-keyframes clouds_move-9 {
  0% {
    left: -150px;
  }
  100% {
    left: 100vw;
  }
}
@keyframes clouds_move-9 {
  0% {
    left: -150px;
  }
  100% {
    left: 100vw;
  }
}
@-webkit-keyframes clouds_move-10 {
  0% {
    left: -150px;
  }
  100% {
    left: 100vw;
  }
}
@keyframes clouds_move-10 {
  0% {
    left: -150px;
  }
  100% {
    left: 100vw;
  }
}
@-webkit-keyframes airplane_move-1 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@keyframes airplane_move-1 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@-webkit-keyframes airplane_move-2 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@keyframes airplane_move-2 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@-webkit-keyframes airplane_move-3 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@keyframes airplane_move-3 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@-webkit-keyframes airplane_move-4 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@keyframes airplane_move-4 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@-webkit-keyframes airplane_move-5 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@keyframes airplane_move-5 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@-webkit-keyframes airplane_move-6 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@keyframes airplane_move-6 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@-webkit-keyframes airplane_move-7 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@keyframes airplane_move-7 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@-webkit-keyframes airplane_move-8 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@keyframes airplane_move-8 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@-webkit-keyframes airplane_move-9 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@keyframes airplane_move-9 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@-webkit-keyframes airplane_move-10 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@keyframes airplane_move-10 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@-webkit-keyframes airplane_move-11 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@keyframes airplane_move-11 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@-webkit-keyframes airplane_move-12 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@keyframes airplane_move-12 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@-webkit-keyframes airplane_move-13 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@keyframes airplane_move-13 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@-webkit-keyframes airplane_move-14 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@keyframes airplane_move-14 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@-webkit-keyframes airplane_move-15 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@keyframes airplane_move-15 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@-webkit-keyframes airplane_move-16 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@keyframes airplane_move-16 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@-webkit-keyframes airplane_move-17 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@keyframes airplane_move-17 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@-webkit-keyframes airplane_move-18 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@keyframes airplane_move-18 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@-webkit-keyframes airplane_move-19 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@keyframes airplane_move-19 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@-webkit-keyframes airplane_move-20 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@keyframes airplane_move-20 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@-webkit-keyframes airplane_move-21 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@keyframes airplane_move-21 {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 100vh;
  }
}
@-webkit-keyframes intro {
  0%, 90% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-110vw);
  }
}
@keyframes intro {
  0%, 90% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-110vw);
  }
}
@-webkit-keyframes intro-timer {
  0%, 90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes intro-timer {
  0%, 90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes intro-timer-2 {
  0% {
    opacity: 0;
  }
  1%, 100% {
    opacity: 1;
  }
}
@keyframes intro-timer-2 {
  0% {
    opacity: 0;
  }
  1%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes stage_move {
  0% {
    top: 30%;
  }
  100% {
    top: 70%;
  }
}
@keyframes stage_move {
  0% {
    top: 30%;
  }
  100% {
    top: 70%;
  }
}
@-webkit-keyframes timer {
  0% {
    opacity: 0.25;
    width: 0;
  }
  100% {
    display: block;
    opacity: 1;
    width: 100%;
  }
}
@keyframes timer {
  0% {
    opacity: 0.25;
    width: 0;
  }
  100% {
    display: block;
    opacity: 1;
    width: 100%;
  }
}
@-webkit-keyframes gameover {
  0%, 99% {
    transform: translateY(-120vh);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes gameover {
  0%, 99% {
    transform: translateY(-120vh);
  }
  100% {
    transform: translateY(0);
  }
}
html, body {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex: 1 0 100%;
  font-family: "Source Sans Pro", sans-serif;
  overflow: hidden;
}

.wrapper {
  counter-reset: game;
  display: flex;
  flex: 1;
  height: 100vh;
  position: relative;
  width: 100vw;
}

.intro {
  height: 100vh;
  width: 100vw;
  -webkit-animation: intro 10s linear 1s forwards;
          animation: intro 10s linear 1s forwards;
  background-color: white;
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  left: 0;
  padding: 0 10px;
  position: fixed;
  top: 0;
  z-index: 22;
}
.intro h1 {
  align-self: center;
  border-bottom: solid 2px black;
  font-size: 3rem;
  font-weight: 600;
  margin: 30px 0;
}
.intro .instructions {
  align-self: center;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.intro .instructions div {
  margin-bottom: 10px;
}
.intro .instructions div:last-child {
  margin-bottom: 0;
}
.intro--timer {
  align-items: center;
  background-color: black;
  display: flex;
  flex-direction: column;
  height: 110px;
  margin: 0 auto;
  padding: 10px;
  width: 60px;
}
.intro--timer div {
  height: 30px;
  width: 30px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 100%;
  margin-bottom: 10px;
  opacity: 0;
}
.intro--timer div.red {
  -webkit-animation: intro-timer 1s linear 5s forwards;
          animation: intro-timer 1s linear 5s forwards;
  background-color: red;
  opacity: 1;
}
.intro--timer div.yellow {
  -webkit-animation: intro-timer 1s linear 5s forwards;
          animation: intro-timer 1s linear 5s forwards;
  background-color: yellow;
}
.intro--timer div.green {
  -webkit-animation: intro-timer-2 1s linear 6s forwards;
          animation: intro-timer-2 1s linear 6s forwards;
  background-color: #37c87b;
}
.intro--timer div:last-child {
  margin-bottom: 0;
}

.stage {
  -webkit-animation: stage_move 20s linear forwards;
          animation: stage_move 20s linear forwards;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/44572/map.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% 100%;
  display: flex;
  height: 150vh;
  left: 50%;
  margin: 0 auto;
  position: absolute;
  top: 30%;
  transform: translate(-50%, -50%);
  width: 100vw;
  z-index: 0;
}

input[type=radio] {
  height: 0;
  width: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  left: 0;
  outline: 0;
  position: absolute;
  top: 0;
}
input[type=radio]:checked {
  counter-increment: game;
}
input[type=radio]:nth-of-type(2n+2):checked {
  counter-increment: game 5;
}
input[type=radio]:nth-of-type(3n+3):checked {
  counter-increment: game 10;
}

.cloud {
  height: 40px;
  width: 100px;
  background-color: white;
  border-radius: 50%/100%;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  left: calc(-100vw - 100px);
  position: absolute;
  z-index: 1;
}
.cloud:before, .cloud:after {
  background-color: white;
  border-radius: 100%;
  content: "";
  position: absolute;
}
.cloud:before {
  height: 40px;
  left: 10%;
  top: -40%;
  width: 40px;
}
.cloud:after {
  height: 60px;
  right: 5%;
  top: -70%;
  width: 60px;
}
.cloud:nth-of-type(2n+2) {
  transform: scale(0.7);
}
.cloud:nth-of-type(2n+2):before, .cloud:nth-of-type(2n+2):after {
  box-shadow: -1px 0 10px 0 rgba(0, 0, 0, 0.1);
}
.cloud:nth-of-type(3n+3) {
  transform: scale(0.5);
}
.cloud:nth-of-type(3n+3):before, .cloud:nth-of-type(3n+3):after {
  box-shadow: -1px 0 10px 0 rgba(0, 0, 0, 0.1);
}
.cloud:nth-of-type(even):before, .cloud:nth-of-type(even):after {
  box-shadow: 1px 0 10px 0 rgba(0, 0, 0, 0.1);
}
.cloud:nth-of-type(even):before {
  z-index: 1;
}
.cloud:nth-of-type(1) {
  top: 72.9249510568vh;
  -webkit-animation: clouds_move-1 20s linear 1.5s infinite;
          animation: clouds_move-1 20s linear 1.5s infinite;
}
.cloud:nth-of-type(2) {
  top: 73.0706347923vh;
  -webkit-animation: clouds_move-2 70s linear 1.5s infinite;
          animation: clouds_move-2 70s linear 1.5s infinite;
}
.cloud:nth-of-type(3) {
  top: 19.8927220025vh;
  -webkit-animation: clouds_move-3 25s linear 1.5s infinite;
          animation: clouds_move-3 25s linear 1.5s infinite;
}
.cloud:nth-of-type(4) {
  top: 9.6512157354vh;
  -webkit-animation: clouds_move-4 100s linear 1.5s infinite;
          animation: clouds_move-4 100s linear 1.5s infinite;
}
.cloud:nth-of-type(5) {
  top: 10.6672725694vh;
  -webkit-animation: clouds_move-5 40s linear 1.5s infinite;
          animation: clouds_move-5 40s linear 1.5s infinite;
}
.cloud:nth-of-type(6) {
  top: 46.0151939595vh;
  -webkit-animation: clouds_move-6 45s linear 1.5s infinite;
          animation: clouds_move-6 45s linear 1.5s infinite;
}
.cloud:nth-of-type(7) {
  top: 42.090549527vh;
  -webkit-animation: clouds_move-7 30s linear 1.5s infinite;
          animation: clouds_move-7 30s linear 1.5s infinite;
}
.cloud:nth-of-type(8) {
  top: 65.7588723876vh;
  -webkit-animation: clouds_move-8 15s linear 1.5s infinite;
          animation: clouds_move-8 15s linear 1.5s infinite;
}
.cloud:nth-of-type(9) {
  top: 69.0846212275vh;
  -webkit-animation: clouds_move-9 70s linear 1.5s infinite;
          animation: clouds_move-9 70s linear 1.5s infinite;
}
.cloud:nth-of-type(10) {
  top: 16.9366011913vh;
  -webkit-animation: clouds_move-10 15s linear 1.5s infinite;
          animation: clouds_move-10 15s linear 1.5s infinite;
}

.airplane {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/44572/airplane-04.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
  bottom: -100px;
  height: 100px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 75px;
}
.airplane:nth-of-type(2n+2) {
  transform: translateX(-50%) scale(0.66);
}
.airplane:nth-of-type(3n+3) {
  transform: translateX(-50%) scale(0.33);
}
.airplane:hover {
  cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/44572/crosshir.png) 25 15, auto;
}
.airplane:nth-of-type(1) {
  left: 77.4549850639vw;
  -webkit-animation: airplane_move-1 14s linear 11s infinite;
          animation: airplane_move-1 14s linear 11s infinite;
}
.airplane:nth-of-type(2) {
  left: 42.3299934923vw;
  -webkit-animation: airplane_move-2 16s linear 12s infinite;
          animation: airplane_move-2 16s linear 12s infinite;
}
.airplane:nth-of-type(3) {
  left: 23.8034166117vw;
  -webkit-animation: airplane_move-3 2s linear 12s infinite;
          animation: airplane_move-3 2s linear 12s infinite;
}
.airplane:nth-of-type(4) {
  left: 84.9490667466vw;
  -webkit-animation: airplane_move-4 6s linear 11s infinite;
          animation: airplane_move-4 6s linear 11s infinite;
}
.airplane:nth-of-type(5) {
  left: 1.3939658339vw;
  -webkit-animation: airplane_move-5 20s linear 11s infinite;
          animation: airplane_move-5 20s linear 11s infinite;
}
.airplane:nth-of-type(6) {
  left: 76.8207119634vw;
  -webkit-animation: airplane_move-6 20s linear 12s infinite;
          animation: airplane_move-6 20s linear 12s infinite;
}
.airplane:nth-of-type(7) {
  left: 12.5986984569vw;
  -webkit-animation: airplane_move-7 20s linear 12s infinite;
          animation: airplane_move-7 20s linear 12s infinite;
}
.airplane:nth-of-type(8) {
  left: 14.8665914824vw;
  -webkit-animation: airplane_move-8 2s linear 11s infinite;
          animation: airplane_move-8 2s linear 11s infinite;
}
.airplane:nth-of-type(9) {
  left: 10.595776307vw;
  -webkit-animation: airplane_move-9 6s linear 12s infinite;
          animation: airplane_move-9 6s linear 12s infinite;
}
.airplane:nth-of-type(10) {
  left: 55.7087216185vw;
  -webkit-animation: airplane_move-10 2s linear 13s infinite;
          animation: airplane_move-10 2s linear 13s infinite;
}
.airplane:nth-of-type(11) {
  left: 72.9417904182vw;
  -webkit-animation: airplane_move-11 6s linear 13s infinite;
          animation: airplane_move-11 6s linear 13s infinite;
}
.airplane:nth-of-type(12) {
  left: 34.4014344335vw;
  -webkit-animation: airplane_move-12 6s linear 13s infinite;
          animation: airplane_move-12 6s linear 13s infinite;
}
.airplane:nth-of-type(13) {
  left: 61.8390023152vw;
  -webkit-animation: airplane_move-13 10s linear 13s infinite;
          animation: airplane_move-13 10s linear 13s infinite;
}
.airplane:nth-of-type(14) {
  left: 13.2197287207vw;
  -webkit-animation: airplane_move-14 8s linear 13s infinite;
          animation: airplane_move-14 8s linear 13s infinite;
}
.airplane:nth-of-type(15) {
  left: 5.3923412856vw;
  -webkit-animation: airplane_move-15 14s linear 13s infinite;
          animation: airplane_move-15 14s linear 13s infinite;
}
.airplane:nth-of-type(16) {
  left: 52.8734873023vw;
  -webkit-animation: airplane_move-16 18s linear 13s infinite;
          animation: airplane_move-16 18s linear 13s infinite;
}
.airplane:nth-of-type(17) {
  left: 34.4368952933vw;
  -webkit-animation: airplane_move-17 18s linear 12s infinite;
          animation: airplane_move-17 18s linear 12s infinite;
}
.airplane:nth-of-type(18) {
  left: 52.0244702767vw;
  -webkit-animation: airplane_move-18 12s linear 11s infinite;
          animation: airplane_move-18 12s linear 11s infinite;
}
.airplane:nth-of-type(19) {
  left: 54.5027916393vw;
  -webkit-animation: airplane_move-19 6s linear 13s infinite;
          animation: airplane_move-19 6s linear 13s infinite;
}
.airplane:nth-of-type(20) {
  left: 4.313192128vw;
  -webkit-animation: airplane_move-20 20s linear 12s infinite;
          animation: airplane_move-20 20s linear 12s infinite;
}
.airplane:nth-of-type(21) {
  left: 32.9803175654vw;
  -webkit-animation: airplane_move-21 4s linear 11s infinite;
          animation: airplane_move-21 4s linear 11s infinite;
}

.airplane_1:checked ~ .airplane-1 {
  opacity: 0;
  transform: translateX(-50%) scale(0.01);
  transition: all 0.5s linear;
}

.airplane_2:checked ~ .airplane-2 {
  opacity: 0;
  transform: translateX(-50%) scale(0.01);
  transition: all 0.5s linear;
}

.airplane_3:checked ~ .airplane-3 {
  opacity: 0;
  transform: translateX(-50%) scale(0.01);
  transition: all 0.5s linear;
}

.airplane_4:checked ~ .airplane-4 {
  opacity: 0;
  transform: translateX(-50%) scale(0.01);
  transition: all 0.5s linear;
}

.airplane_5:checked ~ .airplane-5 {
  opacity: 0;
  transform: translateX(-50%) scale(0.01);
  transition: all 0.5s linear;
}

.airplane_6:checked ~ .airplane-6 {
  opacity: 0;
  transform: translateX(-50%) scale(0.01);
  transition: all 0.5s linear;
}

.airplane_7:checked ~ .airplane-7 {
  opacity: 0;
  transform: translateX(-50%) scale(0.01);
  transition: all 0.5s linear;
}

.airplane_8:checked ~ .airplane-8 {
  opacity: 0;
  transform: translateX(-50%) scale(0.01);
  transition: all 0.5s linear;
}

.airplane_9:checked ~ .airplane-9 {
  opacity: 0;
  transform: translateX(-50%) scale(0.01);
  transition: all 0.5s linear;
}

.airplane_10:checked ~ .airplane-10 {
  opacity: 0;
  transform: translateX(-50%) scale(0.01);
  transition: all 0.5s linear;
}

.airplane_11:checked ~ .airplane-11 {
  opacity: 0;
  transform: translateX(-50%) scale(0.01);
  transition: all 0.5s linear;
}

.airplane_12:checked ~ .airplane-12 {
  opacity: 0;
  transform: translateX(-50%) scale(0.01);
  transition: all 0.5s linear;
}

.airplane_13:checked ~ .airplane-13 {
  opacity: 0;
  transform: translateX(-50%) scale(0.01);
  transition: all 0.5s linear;
}

.airplane_14:checked ~ .airplane-14 {
  opacity: 0;
  transform: translateX(-50%) scale(0.01);
  transition: all 0.5s linear;
}

.airplane_15:checked ~ .airplane-15 {
  opacity: 0;
  transform: translateX(-50%) scale(0.01);
  transition: all 0.5s linear;
}

.airplane_16:checked ~ .airplane-16 {
  opacity: 0;
  transform: translateX(-50%) scale(0.01);
  transition: all 0.5s linear;
}

.airplane_17:checked ~ .airplane-17 {
  opacity: 0;
  transform: translateX(-50%) scale(0.01);
  transition: all 0.5s linear;
}

.airplane_18:checked ~ .airplane-18 {
  opacity: 0;
  transform: translateX(-50%) scale(0.01);
  transition: all 0.5s linear;
}

.airplane_19:checked ~ .airplane-19 {
  opacity: 0;
  transform: translateX(-50%) scale(0.01);
  transition: all 0.5s linear;
}

.airplane_20:checked ~ .airplane-20 {
  opacity: 0;
  transform: translateX(-50%) scale(0.01);
  transition: all 0.5s linear;
}

.airplane_21:checked ~ .airplane-21 {
  opacity: 0;
  transform: translateX(-50%) scale(0.01);
  transition: all 0.5s linear;
}

.timer {
  height: 5px;
  width: 100%;
  background-color: #4d4d4d;
  border-bottom: solid 1px black;
  left: 0;
  position: fixed;
  top: 0;
  z-index: 3;
}
.timer span {
  height: 5px;
  width: 100%;
  -webkit-animation: timer 50s linear 12s forwards;
          animation: timer 50s linear 12s forwards;
  background-color: #37c87b;
  display: block;
  opacity: 0;
}

.gameover {
  height: 100vh;
  width: 100vw;
  align-items: center;
  -webkit-animation: gameover 50s linear 12s forwards;
          animation: gameover 50s linear 12s forwards;
  background-color: rgba(55, 200, 123, 0.75);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 3rem;
  padding: 10px;
  position: fixed;
  top: 0;
  transform: translateY(-120vh);
  z-index: 11;
}
.gameover a {
  color: white;
}

.score {
  background-color: white;
  border: solid 1px black;
  bottom: 10px;
  font-size: 1.2rem;
  left: 10px;
  padding: 10px;
  position: fixed;
  z-index: 13;
}
.score--current:after {
  content: counter(game);
  font-weight: 600;
  margin: 0 10px;
}   
</style>

</head>
<body>
<div class="wrapper">

<div class="intro">
    <h1>"Air bomb"</h1>
    <div class="instructions">
      <div>Tan pronto como este mensaje desaparezca, veran aviones volando en el cielo</div>
      <div>la mision es bombardearlos haciendo click en ellos</div>
      <div>presten atencion, el juego es con tiempo y solo tienen 15 segundos para disparar a todos los aviones</div>
      <div>la puntuacion varia segun sea el tipo de avion</div>
      <div>Disfrutenlo</div>
    </div>

<input class="airplane_1" type="radio" id="airplane_1" />
  <input class="airplane_2" type="radio" id="airplane_2"  />
  <input class="airplane_3" type="radio" id="airplane_3"  />
  <input class="airplane_4" type="radio" id="airplane_4"  />
  <input class="airplane_5" type="radio" id="airplane_5"  />
  <input class="airplane_6" type="radio" id="airplane_6"  />
  <input class="airplane_7" type="radio" id="airplane_7"  />
  <input class="airplane_8" type="radio" id="airplane_8"  />
  <input class="airplane_9" type="radio" id="airplane_9"  />
  <input class="airplane_10" type="radio" id="airplane_10"  />
  <input class="airplane_11" type="radio" id="airplane_11"  />
  <input class="airplane_12" type="radio" id="airplane_12"  />
  <input class="airplane_13" type="radio" id="airplane_13"  />

<div class="timer"><span></span></div>
  <div class="gameover">El juego ha terminado, puedes <a>intentar otra vez</a></div>
  <div class="score">tu puntaje es: <span class="score--current"></span> 100% JS free</div>
</div>
</body>
</html>