* {
  -webkit-tap-highlight-color: transparent;
}

html {
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

body {
  margin: auto;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: black;
  overflow: hidden;
}

.instructions {
  position: absolute;
  width: 100%;
  height: 403px;
  left: 0; right: 0; bottom: 34px;
  margin: 0 auto;
  line-height: 30px;
  font-size: 16px;
  text-align: center;
  font-family: Courier New;
  font-weight: bold;
  color: whitesmoke;
  opacity: 0;
  z-index: 10;
  pointer-events: none;
  transition: opacity 500ms ease-in-out;
}

.instructions.show {
  opacity: 1;
}

.score {
  position: absolute;
  top: 2px;
  right: 9px;
  width: 71px;
  height: 90px;
  line-height: 110px;
  background-image:  url("./img/counter.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 22px;
  text-align: center;
}


.background {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: auto;
  width: 1024px;
  height: 748px;
  background-image: url("./img/background.png");
  background-size: cover;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

.hero {
  position: absolute;
  bottom: 80px;
  left: 400px;
  width: 300px;
  height: 300px;
  background-image: url("./img/idling-sprite.png");
  animation-name: spriteSheet;
  animation-duration: 1000ms;
  animation-timing-function: steps(2); /* number of frames in sprite (not counting the final blank space) */
  background-position: 0 center;
  background-size: cover;
  transition-property: left, margin-bottom;
  transition-timing-function: linear, ease-in-out;
  pointer-events: none;
  animation-iteration-count: infinite;
}

.hero.walking {
  background-image: url("./img/walking-sprite.png");
  animation-name: spriteSheet;
  animation-duration: 300ms;
  animation-timing-function: steps(4); /* number of frames in sprite (not counting the final blank space) */
}

.hero.left {
  transform: scale(-1, 1);
}

.hero.jumping {
  background-image: url("./img/jumping-sprite.png");
  animation-name: spriteSheet;
  animation-duration: 1000ms;
  animation-timing-function: steps(4); /* number of frames in sprite (not counting the final blank space) */
}

.hero.doing-action {
  background-image: url("./img/action-sprite.png");
  animation-name: spriteSheet;
  animation-duration: 600ms;  /* set to same number in initialize() as well or it will look weird */
  animation-timing-function: steps(4); /* number of frames in sprite (not counting the final blank space) */
}

.collectable {
 position: absolute;
  bottom: 370px;
  left: 70px;
  width: 100px;
  height: 380px;
  background-image: url("./img/milk.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position:  center;
}

.collectable-0 {
 bottom: 370px;
}

.collectable-1 {
 bottom: 70px;
}

.collectable-2 {
 bottom: 70px;
   left: 750px;
}

.collectable.was-collected {
  opacity: 0;
}


.npc {
  position: absolute;
  width: 200px;
  height: 200px;
  z index: 6;
  bottom: 90px;
  background-image: url("./img/mouse-sprite.png");
  background-size: cover;
  animation-name: spriteSheet;
  animation-duration: 280ms;
  animation-timing-function: steps(2); /* number of frames in sprite (not counting the final blank space) */
  animation-iteration-count: infinite;  
  pointer-events: none;
}

.npc-type-0 {
 bottom:  400px;
}

.npc-type-1 {
 bottom: 70px;
}

.npc-type-2 {
 bottom: 190px;
}

.npc.was-interacted {
  background-image: url("./img/npc-sprite-after.png");
  opacity: 0;
  transition: opacity 400ms linear;
}



.preload-image {
  position: absolute;
  left: -99999px;
  top: -99999px;
  opacity: 0;
  pointer-events: none;
}

@keyframes spriteSheet {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 100% center;
  }
}