@import url('https://fonts.googleapis.com/css?family=Macondo|Revalia|VT323');

* {
  margin: 0;
  padding: 0;
  box-sizing: padding-box;
}

body {
  font-size: 10px;
  background-color: rgb(0, 9, 38);
}

body::after{
    position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
    content:url('../img/1back0.png') url('../img/1back1.png') url('../img/1back2.png') url('../img/1forw0.png') url('../img/1forw1.png') url('../img/1forw2.png') url('../img/1left0.png') url('../img/1left1.png') url('../img/1left2.png')
    url('../img/1right0.png')
    url('../img/1right1.png')
    url('../img/mid0.png') url('../img/mid1.png') url('../img/mid2.png') url('../img/mid3.png') url('../img/mid4.png');
}

a {
  color: rgb(50, 135, 233);
}

a:hover {
  color: rgb(240, 223, 0);
}

div.hidden {
  display: none;
}

div.game-grid {
  width: 520px;
  height: 520px;
  margin: 25px auto;
  overflow: hidden;
  background-image: url('../img/grass.png');
  border: 5px solid rgb(22, 25, 47);
  position: relative;
}

div.menu {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 6;
  color: #FFFFFF;
  font-family: 'Revalia', arial;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

div.menu {
  padding-top: 7.4em;
}
div.menu h1.title {
  font-family: 'Macondo', serif;
  font-size: 4.2em;
  color: rgb(240, 223, 0);
}

div.menu h1.title span {
  color: rgb(245, 40, 0);
}

div.menu h3 {
  font-size: 1.6em;
  margin-top: -0.4em;
  margin-bottom: 0.8em;
}

div.menu h2.start {
  margin-top: 2em;
  cursor: pointer;
  animation: start 2s infinite;
  margin-bottom: 10em;
}

div.menu p {
  font-family: 'VT323', arial;
  font-size: 1.8em;
  flex-flow: wrap;
}

h2.start:hover{
  color: rgb(240, 223, 0);
  transform: scale(1.2);
  cursor: hand;
}

div.game-over, div.win {
  z-index: 5;
  position: absolute;
  width: 100%;
  height: 60vh;
  padding-top: 30vh;
  margin: 0 auto;
  text-transform: uppercase;
  color: rgb(245, 40, 0);
  background-color: rgba(0, 0, 0, 0.65);
  text-align: center;
}

.game-over h2, .game-over h3, .win h2, .win h3{
  font-family: 'VT323', serif;
  font-size: 5em;
  font-weight: 400;
}

div.win {
  height: 80vh;
  padding-top: 10vh;
}

.game-over h3 {
  font-size: 2.5em;
}

.game-over h3:hover{
  color: rgb(240, 223, 0);
  cursor: pointer;
  cursor: hand;
}

div.win h3, div.win h2 {
  max-width: 60vw;
  margin: 0 auto;
}



div.wall {
  z-index: 2;
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 2px;
  background-image: url('../img/wall.png');
  background-size: cover;
}

div.brick {
  position: absolute;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  z-index: 2;
  border-radius: 5px;
  background-image: url('../img/brick2.png');
  background-size: cover;
  box-shadow: 2px 1px 1px 0px rgba(0,0,0,0.75);
}

div.ghost, div.munmar {
  position: absolute;
  z-index: 3;
  width: 34px;
  height: 34px;
  background-image: url('../img/nuwalk.gif');
  background-size: cover;
}

div.munmar {
  background-image: url('../img/munmar.gif');
  animation: munmar 1s infinite;
}

div.player {
  position: absolute;
  z-index: 3;
  width: 34px;
  height: 36px;
  margin-top: -2px;
  margin-left: -2px;
  background-image: url('../img/1forw0.png');
  background-size: cover;
  background-position: -4px 0;
}

div.bomb {
  position: absolute;
  z-index: 2;
  width: 40px;
  height: 40px;
  background-image: url('../img/bomb.png');
  background-size: cover;
  animation: bombSet 0.7s steps(3) infinite;
}

div.powerup {
  position: absolute;
  z-index: 0;
  animation: power 0.5s steps(2) infinite;
  background-size: cover;
  width: 40px;
  height: 40px;
  border-radius: 5px;
}

div.exit {
  position: absolute;
  z-index: 0;
  animation: exit 0.5s steps(2) infinite;
  background-image: url('../img/teleporter.png');
  background-size: cover;
  width: 40px;
  height: 40px;
  border-radius: 5px;
}

.playerLeft{
  background-size: cover;
  animation: player-left 1s steps(4) infinite;
}
.playerRight{
  background-size: cover;
  animation: player-right 1s steps(4) infinite;
}
.playerUp{
  background-size: cover;
  animation: player-up 1s steps(4) infinite;
}
.playerDown{
  background-size: cover;
  animation: player-down 1s steps(4) infinite;
}

.boom {
  position: absolute;
  z-index: 4;
  width: 40px;
  height: 40px;
  background-image: url('../img/mid0.png');
  background-size: cover;
  animation: boom 0.6s steps(5) infinite;
}

@keyframes boom {
  0%{
    background-image: url('../img/mid4.png');
  }
  25%{
    background-image: url('../img/mid3.png');
  }
  50%{
    background-image: url('../img/mid2.png');
  }
  75%{
    background-image: url('../img/mid1.png');
  }
  100%{
    background-image: url('../img/mid0.png');
  }
}

@keyframes player-left {
  0%{
    background-image: url('../img/1left1.png');
  }
  34%{
    background-image: url('../img/1left0.png');
  }
  67% {
    background-image: url('../img/1left2.png');
  }
  100% {
    background-image: url('../img/1left0.png');
  }
}
@keyframes player-right {
  0%{
    background-image: url('../img/1right1.png');
  }
  34%{
    background-image: url('../img/1right0.png');
  }
  67% {
    background-image: url('../img/1right2.png');
  }
  100% {
    background-image: url('../img/1right0.png');
  }
}
@keyframes player-up {
  0%{
    background-image: url('../img/1back1.png');
  }
  34%{
    background-image: url('../img/1back0.png');
  }
  67% {
    background-image: url('../img/1back2.png');
  }
  100% {
    background-image: url('../img/1back0.png');
  }
}
@keyframes player-down {
  0%{
    background-image: url('../img/1forw1.png');
  }
  34%{
    background-image: url('../img/1forw0.png');
  }
  67% {
    background-image: url('../img/1forw2.png');
  }
  100% {
    background-image: url('../img/1forw0.png');
  }
}

@keyframes power {
  0%{
    background-image: url('../img/powerup.gif');
  }
  100%{
    background-image: url('../img/powerup1.gif');
  }
}

@keyframes exit {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 80px 0;
    }
}

@keyframes bombSet {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 120px 0;
    }
}

@keyframes start {
  0% {
    transform: scale(1.00);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1.00);
  }
}

@keyframes munmar {
    0% {
      transform: scale(1.03);
    }
    100% {
      transform: scale(0.98);
    }
}