@font-face {
  font-family: "Pokemon";
  src: url("PokemonXandY.ttf");
}

html, body {
  margin: -5px;
  border: 0;
  padding: 0;
  font-family: Pokemon;
  background-color: black;
  background-image: url("images/background.png");
  background-position: left;
  background-repeat: no repeat;
  background-size: cover;
  overflow: none;
  min-height: 2000px;
}

.container {
  position: relative;
  top: 20px;
  text-align: center;
}

.textBoxImg {
  width: 600px;
  height: 80px;
}

.textBox {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 30px;
  top: -10px;
}

/* Pokemon cursor from cursors-4u.com */
a {
  cursor: url(http://cur.cursors-4u.net/games/gam-13/gam1282.cur), auto !important;
}

/* Snorlax part */
.bush {
  position: absolute;
  top: 495px;
  left: 175px;
  width: 90px;
  z-index: 10;
  animation-name: shake;
  animation-duration: .5s;
  animation-iteration-count: infinite;
}

.snorlax143 {
 position: absolute;
 top: 500px;
 left: 150px;
 width: 140px;
 animation-duration: 1s;
 animation-timing-function: ease-in-out;
 animation-iteration-count: infinite;
}

.snorlax143:hover {
  animation-name: bounce;
}


/* Togepi part */
.bush1 {
  position: absolute;
  top: 955px;
  left: 715px;
  width: 90px;
  z-index: 10;
  animation-name: shake;
  animation-duration: .5s;
  animation-iteration-count: infinite;
}

.togepi175 {
  position: absolute;
  top: 900px;
  left: 665px;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.togepi175:hover {
  animation-name: bounce;
}


/* Lugia part */
.tree {
  position: absolute;
  top: 1475px;
  left: 631px;
  width: 170px;
  z-index: 10;
  animation-name: shake;
  animation-duration: .5s;
  animation-iteration-count: infinite;
}


.lugia249 {
  position: absolute;
  top: 1510px;
  left: 650px;
  width: 120px;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.lugia249:hover {
  animation-name: bounce;
}


/* shake effect */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 80% {
    transform: translateX(-1px);
  }
  40%, 60% {
    transform: translateX(2px);
  }
}


/* bounce effect on mon */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}