html {
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}

body {
  margin: 0 0 0 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}

img {
  border: 0px;
  position: absolute;
  image-rendering: pixelated;
}

#container {
  margin: 0 0 0 0;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.div {
  padding: 100 0 0 0;
  margin: 0;
  float: left;
  width: 10vw;
  height: 10vw;
  box-sizing: border-box;
  background-color: white;
  border-width: 10px;
  border-style: inset;
  border-color: #e1e1e1 #e1e1e1 #b4b4b4 #b4b4b4;
  z-index: 2;
  cursor: pointer;
}

.imgHorizontal {
  margin: 0 auto;
  width: 9vw;
  height: auto;
  z-index: 3;
  overflow: hidden;
  border: 0px;
  background-repeat: no-repeat;
  background-size: cover;

  animation-duration: 1.2s;
  -webkit-animation-duration: 1.2s;
  -moz-animation-duration: 1.2s;

  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;

  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;

  filter: drop-shadow(1vw 1vw 0vw rgba(0,0,0,0.4));
  -webkit-filter: drop-shadow(1vw 1vw 0vw rgba(0,0,0,0.4));
}

.imgVertical {
  margin: 0 auto;
  width: auto;
  height: 8vh;
  z-index: 3;
  overflow: hidden;
  border: 0px;
  background-repeat: no-repeat;
  background-size: cover;

  animation-duration: 1.2s;
  -webkit-animation-duration: 1.2s;
  -moz-animation-duration: 1.2s;

  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;

  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;

  filter: drop-shadow(1vh 1vh 0vh rgba(0,0,0,0.4));
  -webkit-filter: drop-shadow(1vh 1vh 0vh rgba(0,0,0,0.4));
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#drop {
  animation-name: drop, opacity;
  -webkit-animation-name: drop, opacity;
  -moz-animation-name: drop, opacity;
}

@keyframes drop {
    0% {
        transform: translateY(0%);
    }
    100% {
        transform: translateY(60vh);
    }
}

@-moz-keyframes drop {
    0% {
        transform: translateY(0%);
    }
    100% {
        transform: translateY(60vh);
    }
}

#bird {
  animation-name: bird, opacity;
  -webkit-animation-name: bird, opacity;
  -moz-animation-name: bird, opacity;
}

@keyframes bird {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(20vh, -10vh);
    }
}

@-moz-keyframes bird {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(20vh, -10vh);
    }
}

#yuha {
  animation-name: yuha, opacity;
  -webkit-animation-name: yuha, opacity;

  animation-duration: 2s;
  -webkit-animation-duration: 2s;
}

@keyframes yuha {
    0% {
        transform: scale(0.3, 0.3) rotate(0deg);
    }
    100% {
        transform: scale(9, 9) rotate(270deg);
    }
}

#cloud {
  animation-name: cloud, opacity;
  -webkit-animation-name: cloud, opacity;
  -moz-animation-name: cloud, opacity;
}

@keyframes cloud {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(15vh, 0vh);
    }
}

#darkCloud {
  animation-name: darkCloud, opacity;
  -webkit-animation-name: darkCloud, opacity;
  -moz-animation-name: darkCloud, opacity;
}

@keyframes darkCloud {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-15vh, 0vh);
    }
}

#mouse {
  animation-name: moveToRight, opacity;
  -webkit-animation-name: moveToRight, opacity;
}

@keyframes moveToRight {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(25vh, 0vh);
    }
}

#bear {
  animation-name: bear, opacity;
  -webkit-animation-name: bear, opacity;

}

@keyframes bear {
    0% {
        transform: scale(0.8, 0.8);
    }
    100% {
        transform: scale(1.3, 1.3);
    }
}

#snail {
  animation-name: snail, opacity;
  -webkit-animation-name: snail, opacity;
}

@keyframes snail {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-10vh, 0vh);
    }
}

#fish {
  animation-name: fish, opacity;
  -webkit-animation-name: fish, opacity;
}

@keyframes fish {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(10vh, 0vh);
    }
}

#spider {
  animation-name: spider, opacity;
  -webkit-animation-name: spider, opacity;
}

@keyframes spider {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0vh, -35vh);
    }
}

#frog {
  animation-name: frog, opacity;
  -webkit-animation-name: frog, opacity;
}

@keyframes frog {
    0% {
        transform: translate(0, 0);
    }
    15% {
        transform: translate(0, 0);
    }
    33% {
        transform: translate(10vh, -6vh);
    }
    66% {
        transform: translate(20vh, 0vh);
    }
    80% {
        transform: translate(20vh, 0vh);
    }
    100% {
        transform: translate(30vh, -6vh);
    }
}

#lightning {
}

#squirrel {
  animation-name: squirrel, opacity;
  -webkit-animation-name: squirrel, opacity;
}

@keyframes squirrel {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(50vh, 0vh);
    }
}

#leaf {
  animation-name: leaf, opacity;
  -webkit-animation-name: leaf, opacity;
}

@keyframes leaf {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-20vh, 20vh);
    }
}

#leaf2 {
  animation-name: leaf, opacity;
  -webkit-animation-name: leaf, opacity;
}

#flower {
}

#mushroom {
}

#grass {
}