/* Definiçoes de estilo CSS para o Game Resgate POW */

@font-face {
    font-family: Titulo;
    src: url(../fontes/ANODETONOONE.TTF);
}

h1 {
    font-family: Titulo;
    font-size: 40px;
    color: #603A03;
    text-align: center;
}

body {
    background-image: url(../img/fundo.jpg);
}

/* container */
#container {
    width: 950px;
    height: auto;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

/* Fundo do Game */
#fundoGame {
    width: 950px;
    height: 630px;
    background-image: url(../img/fundo_game_deserto.jpg);
    border-color: #FFF;
    border-style: solid;
}

/* Apache */
#jogador {
    width: 256px;
    height: 66px;
    position: absolute;
    left: 8px;
    top: 179px;
    background-image: url(../img/apache.png);
}

/* helicoptero inimigo */
#inimigo1 {
    width: 256px;
    height: 66px;
    position: absolute;
    left: 689px;
    top: 253px;
    background-image: url(../img/inimigo1.png);
}

/* Veiculo inimigo */
#inimigo2 {
    width: 165px;
    height: 70px;
    position: absolute;
    left: 775px;
    top: 447px;
    background-image: url(../img/tanque001.png);
}

/* POW */
#amigo {
    width: 44px;
    height: 51px;
    position: absolute;
    left: 10px;
    top: 464px;
    background-image: url(../img/amigo.png);
}

/* Inicio do jogo */
#inicio {
    width: 300px;
    height: 220px;
    background-color: #FFF;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    padding: 10px;
}

p {
    text-align: center;
}

ul {
    list-style: none;
}

/* Helicoptero se movimentando */
.anima1 {
    background-image: url(../img/helicoptero.png);
    animation: play .5s steps(2) infinite;
    -webkit-animation: play .5s steps(2) infinite;
    -moz-animation: play .5s steps(2) infinite;
    -ms-animation: play .5s steps(2) infinite;
    -o-animation: play .5s steps(2) infinite;
}

@keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -512px;
    }
}

@-webkit-keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -512px;
    }
}

@-moz-keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -512px;
    }
}

@-ms-keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -512px;
    }
}

@-o-keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -512px;
    }
}

/* Inimigo se movimentando na tela */
.anima2 {
    background-image: url(../img/inimigo1.png);
    animation: play .5s steps(2) infinite;
    -webkit-animation: play .5s steps(2) infinite;
    -moz-animation: play .5s steps(2) infinite;
    -ms-animation: play .5s steps(2) infinite;
    -o-animation: play .5s steps(2) infinite;
}

/* animaçao do POW */
.anima3 {
    background-image: url(../img/amigo.png);
    animation: play2 .9s steps(12) infinite;
    -webkit-animation: play2 .9s steps(12) infinite;
    -moz-animation: play2 .9s steps(12) infinite;
    -ms-animation: play2 .9s steps(12) infinite;
    -o-animation: play2 .9s steps(12) infinite;
}

@keyframes play2 {
    from {
        background-position: 0px;
    }
    to {
        background-position: -528px;
    }
}

@-webkit-keyframes play2 {
    from {
        background-position: 0px;
    }
    to {
        background-position: -528px;
    }
}

@-moz-keyframes play2 {
    from {
        background-position: 0px;
    }
    to {
        background-position: -528px;
    }
}

@-ms-keyframes play2 {
    from {
        background-position: 0px;
    }
    to {
        background-position: -528px;
    }
}

@-o-keyframes play2 {
    from {
        background-position: 0px;
    }
    to {
        background-position: -528px;
    }
}

/* Disparo do Helicoptero */
#disparo {
    width: 50px;
    height: 8px;
    position: absolute;
    background-image: url(../img/disparo.png);
}

/* Sequencia de explosao */
#explosao1 {
    width: 15px;
    height: 87px;
    position: absolute;
}

#explosao2 {
    width: 15px;
    height: 87px;
    position: absolute;
}

#explosao3 {
    width: 44px;
    height: 51px;
    position: absolute;
}

/* Exibe animaçao morte do POW */
.anima4 {
    width: 44px;
    height: 51px;
    background-image: url(../img/amigo_morte.png);
    animation: play3 .5s steps(7) infinite;
    -webkit-animation: play3 .5s steps(7) infinite;
    -moz-animation: play3 .5s steps(7) infinite;
    -ms-animation: play3 .5s steps(7) infinite;
    -o-animation: play3 .5s steps(7) infinite;
}

@keyframes play3 {
    from {
        background-position: 0px;
    }
    to {
        background-position: -308px;
    }
}

@-webkit-keyframes play3 {
    from {
        background-position: 0px;
    }
    to {
        background-position: -308px;
    }
}

@-moz-keyframes play3 {
    from {
        background-position: 0px;
    }
    to {
        background-position: -308px;
    }
}

@-ms-keyframes play3 {
    from {
        background-position: 0px;
    }
    to {
        background-position: -308px;
    }
}

@-o-keyframes play3 {
    from {
        background-position: 0px;
    }
    to {
        background-position: -308px;
    }
}


/* Score definiçao do placar*/
#placar {
    width: 450px;
    height: 50px;
    position: absolute;
    left: 5px;
    top: 590px;
}

h2 {
    font-family: Titulo;
    font-size: 20px;
    color: #FFF
}


/* Mostra a energia e as vidas */
#energia {
    width: 140px;
    height: 38px;
    position: absolute;
    left: 750px;
    top: 7px;
}

h3 {
    font-family: Titulo;
    font-size: 20px;
    color: #603A03;
}

/* Game OVer */

#fim {
    width: 350px;
    height: 200px;
    background-color: #FFF;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    text-align: center;
    padding: 10px;
}

.footer {
    position: fixed;
    left: 0;
    margin-top: 2rem;
    font-weight: bold;
    bottom: 0;
    width: 100%;
    color: yellow;
    text-align: center;
}