@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap');
@font-face {
    font-family: newathletic;
    src: url(../font/new-athletic.ttf);
  }
/*
 * General Style
 */
body{
    background-image: url(../image/gradient.png);
    background-repeat: repeat-x;
}

main{
    width: 950px;
    height: auto;
    margin: 0 auto;
}

header{
    width: 950px;
    height: 100px;
    background: url(../image/header.png);
    background-repeat: no-repeat;
    border: 8px;
    border-style: solid;
    border-color: #21230b;
}

footer{
    width: 950px;
    height: 100px;
    background: url(../image/footer.png);
    background-repeat: no-repeat;
    border-left: 8px;
    border-right: 8px;
    border-style: solid;
    border-color: #21230b;
}

aside{
    width: 950px;
    height: 100px;
    border-left: 8px;
    border-right: 8px;
    border-style: solid;
}

.ad{
    width: 728px;
    height: 90px;
    margin: 0 auto;
    padding: 5px 0 5px 0;
}


/*
 * Main Menu Style
 */ 
.backgroundGame{
    width: 950px;
    height: 550px;
    background-image: url(../image/bg.png);
    border: solid 8px #21230b;
    background-repeat: repeat-x;
}
.start{
    width: 950px;
    height: 550px;
    background: url(../image/title.png);
}

/*
 * InGame Style
 */
#gameplay {
    width: 950px;
    height: 650px;
    overflow: hidden;   
}
.player{
    width: 60px;
    height: 69px;
    background-image: url(../image/player.png);
    animation: player-animation .5s steps(4) infinite;
    position: relative;
    z-index: 1;

    -webkit-animation: player-animation .5s steps(4) infinite;
    -moz-animation: player-animation .5s steps(4) infinite;
    -ms-animation: player-animation .5s steps(4) infinite;
    -o-animation: player-animation .5s steps(4) infinite;
}
@keyframes player-animation{
    from{background-position: 0px;}
    to{background-position: -240px;}
}

.missile{
    width: 132px;
    height: 45px;
    background-image: url(../image/missile.png);
    position: relative;
    left: 1100px;
    animation: missile-animation .5s steps(5) infinite;
    z-index: 2;

    -webkit-animation: missile-animation .5s steps(5) infinite;
    -moz-animation: missile-animation .5s steps(5) infinite;
    -ms-animation: missile-animation .5s steps(5) infinite;
    -o-animation: missile-animation .5s steps(5) infinite;
}
@keyframes missile-animation{
    from{background-position: 0px;}
    to{background-position: 660px;}
}

.obstacle{
    width: 66px;
    height: 162px;
    background-image: url(../image/obstacle.png);
    position: relative;
    left: 950px;
    animation: obstacle-animation .5s steps(10) infinite;
    z-index: 2;

    -webkit-animation: obstacle-animation .5s steps(10) infinite;
    -moz-animation: obstacle-animation .5s steps(10) infinite;
    -ms-animation: obstacle-animation .5s steps(10) infinite;
    -o-animation: obstacle-animation .5s steps(10) infinite;
}
@keyframes obstacle-animation{
    from{background-position: 0px;}
    to{background-position: -660px;}
}

.scientist{
    width: 64px;
    height: 105px;
    transform: scaleX(-1);
    background-image: url(../image/scienstist.png);
    position: relative;
    top: -60px;
    left: 620px;
    animation: scientist-animation .5s steps(4) infinite;

    -webkit-animation: scientist-animation .5s steps(4) infinite;
    -moz-animation: scientist-animation .5s steps(4) infinite;
    -ms-animation: scientist-animation .5s steps(4) infinite;
    -o-animation: scientist-animation .5s steps(4) infinite;
}
@keyframes scientist-animation{
    from{background-position: 0px;}
    to{background-position: -260px;}
}

.coin{
    width: 50px;
    height: 50px;
    background-image: url(../image/coin.png);
    position: relative;
    left: 960px;
}

.explosion{
    width: 264px;
    height: 210px;
    position: absolute;
    animation: explosion-animation .5s steps(11);
    background-image: url(../image/explosion-sheet.png);
    z-index: 2;
    -webkit-animation: explosion-animation .5s steps(11);
    -moz-animation: explosion-animation .5s steps(11);
    -ms-animation: explosion-animation .5s steps(11);
    -o-animation: explosion-animation .5s steps(11);
}

@keyframes explosion-animation{
    from{background-position: 0px;}
    to{background-position: -2904px;}
}

/** TO EDIT **/
.explosaoPlayer{
    width: 250px;
    height: 241px;
    position: absolute;
}

.score{
    font-family: 'newathletic';
    font-size: 50px;
    color: #ffffff;
    text-align: center;
    width: 100px;
    height: 60px;
    position: relative;
    left: 50px;
    top: 30px;
}
.vitoria{
    width: 300px;
    height: 300px;
    text-align: center;
    font-family: 'newathletic', cursive;
    background-color: deeppink;
    color: floralwhite;
    font-size: 30px;
    border-radius: 200px;
    padding: 10px;
    margin: 0 auto;
}
.vitoria h1{
    padding-top: 50px;
}