@keyframes blinker {
  0% { visibility: visible; }
  50% { visibility: hidden; }
  100% { visibility: visible; }
}

html, body, ul, li, h1, figure, p, h2, strong, i {
  margin: 0;
  border: 0;
  padding: 0;

  background: transparent;
  font: inherit;
  text-style: inherit;
}

ul {
  list-style-type: none;
}

body {
  position: relative;
  background-image: url("../assets/rock.png");
  font-family: 'Press Start 2P';
  font-size: 12px
}

h1 {
  font-size: 20px;
  margin-bottom: 5px;
}

.start {
  margin-top: 10px;
  animation: blinker steps(1) 1s infinite;

}

.header {
  display: block;
  height: 60px;
  background-image: url("../assets/ocean.png")
}

.scoreboard {

  color: white;
  padding: 10px;
  display: block;
}

.best {
  float: right;
}

.current {
  float: left;

}

.screen {
  display: block;
  width: 300px;
  background: #000080;
  color: #FFD700;
  position: relative;
  margin: auto;
  top: 20px;
  z-index: 1;
  padding: 20px;
  border: 5px solid #fff;
}


.hidden {
  display: none;
}


.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

.squares-container {
  background-image: url("../assets/grass.png");
  position: absolute;
  top: 60px;
}

.square {
  box-sizing: border-box;
  display: block;
  float: left;
  width: 60px;
  height: 60px;
}

.pikachu {
  background-image: url("../assets/pikachu-sprite.png");
}



.cherry {
  background-image: url("../assets/pokeball.png");
}

.trainer {
  background-image: url("../assets/trainer-sprite.png");
}

.S {
  background-position-y: 0;
}

.N {
  background-position-y: -60px;
}

.W {
  background-position-y: -120px;
}

.E {
  background-position-y: -180px;
}

.sprite-1 {
  background-position-x: 0px
}

.sprite-2 {
  background-position-x: -60px
}

.sprite-3 {
  background-position-x: -120px
}