/* * Whole  Page styling */

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  height: 100vh;
  background-color: rgb(38, 44, 50);
  font-family: 'Creepster', cursive;
  font-size: 20px;
  color: white;
}

/* * Header styling */

header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border: solid grey 1px;
  border-radius: 5px;
  width: 700px;
  padding: 0.5%;
  box-shadow: 0 0 5px white;
}

#logo {
  width: 320px;
  margin-bottom: 50px;
}

#life-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#life-icons {
  padding: 0px 5px;
}

.one-life {
  width: 25px;
}

#start {
  background: rgb(255, 0, 0);
  color: white;
  border: none;
  border-radius: 5px;
}

#reset {
  background: rgb(255, 0, 0);
  color: white;
  border: none;
  border-radius: 5px;
}

/* * Main styling */

#grid {
  display: flex;
  flex-flow: row wrap;
  width: 700px;
  height: 700px;
}

#grid div {
  font-size: 10px;
  font-family: sans-serif;
  color: transparent;
}

#display-result {
  display: none;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 700px;
  height: 700px;
  text-align: center;
}

#display-result h2 {
  font-size: 40px;
}

#display-result img {
  height: 300px;
}

/* * Items */

.stone {
  background-image: url("../images/tomb-stone.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}

.dot {
  background-image: url("../images/dot.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}

.moon {
  background-image: url("../images/full-moon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}

.pop-corn {
  background-image: url("../images/pop-corn.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}

/* * Characters */

.mj {
  background-image: url("../images/mj.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}

.mj-werewolf {
  background-image: url("../images/mj-werewolf.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}

.mexican-zombie {
  background-image: url("../images/mexican-zombie.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}

.news-zombie {
  background-image: url("../images/news-zombie.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}

.office-zombie {
  background-image: url("../images/office-zombie.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}

.pirate-zombie {
  background-image: url("../images/pirate-zombie.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}

.zombie-hand {
  background-image: url("../images/zombie-hand.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}

.zombie-scared {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

@media only screen and (max-height: 1000px) {
  body {
    display: flex;
    flex-direction: row;
  }
  header {
    align-self: flex-start;
  }
  #grid {
    display: flex;
    flex-flow: row wrap;
    width: 600px;
    height: 600px;
  }

  #logo{
    margin-top: 100px;
  }

  nav {
    width: 600px;
  }
}