/*-------------------------------*/
/*------------RESET--------------*/
/*-------------------------------*/
html, body{
    margin: 0px;
    font-size: 100%;
    font-family: 'Verdana';
    height: 100%;
    background-color: darkgrey;
    font-family: 'Arcade';

}


*, *::before,*::after{
    box-sizing: border-box;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}


@font-face
{
    font-family: 'Arcade';
    src: url('../font/arcadeclassic.regular.ttf') format('truetype');
}




@font-face
{
    font-family: 'clock';
    src: url('../font/digital-7.ttf') format('truetype');
}
/*------------Menu--------------*/

header{
    width: 100%;
    height: 100px;
}

h1{
    text-align: center;
    font-size: 6rem;
}




footer{
    position: fixed;
    width: 100%;
    height: 100px;
    bottom: 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    padding-left: 10%;
    padding-right: 10%;
    z-index: 100;
}



#nav_menu {
    position:fixed;
    z-index:10;
    right:-30%;
    top:40px;
    background-color: rgb(255, 196, 0);
    border-radius: 30px;
    border : 10px ridge red;
    width:30%;
    font-size: 2rem;
    height: 80%;
    list-style-type: none;
    text-align:center;
    padding-inline-start: 0px;
    display: flex;
    flex-direction: column;
    align-content: space-around;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}
#nav.right{
    right:0%
}

#nav_menu.inactive{
    animation:.5s slideRight ease-in forwards;
    transition-delay:0;
    -webkit-animation:.5s slideRight ease-in forwards;
}
#nav_menu.active {
    animation:1s slideLeft ease-out forwards;
    transition-delay:0;
    -webkit-animation:1s slideLeft ease-out forwards;
}

/* Animations pour le menu slide */
@keyframes slideRight {
    from {right:10%;}
    to {right:-30%;}
}
@-webkit-keyframes slideRight {
    from {right:10%;}
    to {right:-30%;}
}

@keyframes slideLeft {
    from {right:-30%;}
    to {right:10%;}
}
@-webkit-keyframes slideLeft {
    from {right:-30%;}
    to {right:10%;}
}

legend{
    font-size: 5rem;
}

form .title{
    font-size: 3rem;
}

form p{
    margin-bottom: 20px;
    padding-top: 20px;
}

fieldset{
    border:none;
    display: flex;
    height: 100%;
    flex-direction: column;

    justify-content: space-between;
    align-items :center;
}


#setting{
    width:250px;
    height:80px;
    background-color: rgb(255, 0, 0);
    border : 10px ridge red;
    font-size: 2.5rem;
    font-family: 'Arcade';
    color:white;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    position: relative;
    margin: auto;
}

#homepage {
    position:fixed;
    z-index:5;
    top:-100%;
    left:0px;
    background-color: darkgrey;
    width:100%;
    padding-top: 8rem;
    font-size: 8rem;
    height: 100%;
    list-style-type: none;
    text-align:center;
    padding-inline-start: 0px;
    display: flex;
    flex-direction: column;
    align-content: space-around;
}
#homepage.down{
    top:0%;
}


#homepage.active{
    animation:.5s  slideUp ease-in forwards;
    transition-delay:0;
    -webkit-animation:.5s  slideUp ease-in forwards;
}
#homepage.inactive {
    animation:1s slideDown ease-out forwards;
    transition-delay:0;
    -webkit-animation:1s slideDown ease-out forwards;
}

/* Animations pour le menu slide */
@keyframes slideUp {
    from {top:0%;}
    to {top:-100%;}
}
@-webkit-keyframes slideUp {
    from {top:0%;}
    to {top:-100%;}
}

@keyframes slideDown {
    from {top:-100%;}
    to {top:0%;}
}
@-webkit-keyframes slideDown {
    from {top:-100%;}
    to {top:0%;}
}













footer button{
    width:250px;
    height:80px;

    font-size: 2.5rem;
    font-family: 'Arcade';
    color:white;

    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    background-color: rgb(255, 0, 0);
    border : 10px ridge red;
}


footer button.inactive{
    background-color: darkgray;
    border : 10px ridge darkgray;
}

/*------------Plateau--------------*/


main{
    display: flex;
    justify-content: center;


}

#life{
    position:fixed;
    left:5%;
    top:150px;
    width: 150px;
    font-size:1.8rem;
    font-weight: 10;
}
#enemy{
    position:fixed;
    left:5%;
    top:300px;
    width: 150px;
    font-size:1.8rem;
    font-weight: 10;
}


#score{
    position:fixed;
    right:5%;
    top:150px;
    width: 250px;
    height: 120px;
    font-size:2.5rem;
    font-weight: 10;
    color : red;
    background-color: black;
    border : 10px ridge darkgray;
    font-family: "clock";
    text-align: right;
}


#timer{
    position:fixed;
    right:5%;
    top:400px;
    width: 150px;
    font-size:1.8rem;
    font-weight: 10;

}


.gameboard{

    height: 700px;
    width: 700px;
    background-color: rgb(66, 211, 86);
    background: url("../img/terrain.png") center;
    background-size: 20px 20px ;
    border :20px rgba(58, 58, 58, 0.6);
    position: relative;
    outline: ridge 20px rgb(148, 148, 148);

}


.player{
    height:20px;
    width: 20px;
    background-size: cover;
    position:absolute;
    top:200px;
    left:200px;
    border-radius: 50%;
    background-color: rgba(168, 162, 76, 0.5);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.walkdown{

    animation-name: walkdown;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

@keyframes walkdown {
    0%   { background: url("../img/player1.png") no-repeat center ;}
    50%  { background: url("../img/player2.png") no-repeat center ;}
    100%  { background: url("../img/player3.png") no-repeat center ;}

}


.walkright{

    animation-name: walkright;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

@keyframes walkright {
    0%   { background: url("../img/player4.png") no-repeat center ;}
    50%  { background: url("../img/player5.png") no-repeat center ;}
    100%  { background: url("../img/player6.png") no-repeat center ;}

}



.walkup{

    animation-name: walkup;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

@keyframes walkup {
    0%   { background: url("../img/player7.png") no-repeat center ;}
    50%  { background: url("../img/player8.png") no-repeat center ;}
    100%  { background: url("../img/player9.png") no-repeat center ;}

}


.walkleft{

    animation-name: walkleft;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

@keyframes walkleft {
    0%   { background: url("../img/player10.png") no-repeat center ;}
    50%  { background: url("../img/player11.png") no-repeat center ;}
    100%  { background: url("../img/player12.png") no-repeat center ;}

}


.enemy{
    height:50px;
    width: 50px;

    position:absolute;
    top:0px;
    left:0px;
    animation-name: enemyanimation;
    animation-duration: 1.5s;
    animation-timing-function: linear;

    animation-iteration-count: infinite;
    animation-direction: normal;
}


@keyframes enemyanimation {
    0%   { background: url("../img/enemy1.png") no-repeat center ;background-size:  contain ;}
    25%  { background: url("../img/enemy2.png") no-repeat center ;background-size:  contain ;}
    50%   { background: url("../img/enemy3.png") no-repeat center ;background-size:  contain ;}
    75%  { background: url("../img/enemy4.png") no-repeat center ;background-size:  contain ;}
    100%  { background: url("../img/enemy5.png") no-repeat center ;background-size:  contain ;}

}



.bomb {
    width: 50px;
    height: 50px;
    position: absolute;
    top:0px;
    left:0px;
    animation-name: exploded;
    animation-duration: 2s;
    animation-timing-function: linear;

    animation-iteration-count: initial;
    animation-direction: normal;

}



@keyframes exploded {
    0%   {  background: url("../img/bomb_circle.png") no-repeat; background-size:  contain ;}
    40%   {  background: url("../img/bomb_circle.png") no-repeat; background-size:  contain ;}
    50%  { background: url("../img/explosion1.png") no-repeat; background-size:  cover ; transform:scale(1) ; -webkit-transform:scale(1) ; -moz-transform:scale(1) ; -ms-transform:scale(1) ; -o-transform:scale(1) ; }
    53%  {  background: url("../img/explosion2.png") no-repeat; background-size:  cover ;transform:scale(2) ; -webkit-transform:scale(2) ; -moz-transform:scale(2) ; -ms-transform:scale(2) ; -o-transform:scale(2) ; }
    56%  {  background: url("../img/explosion3.png") no-repeat; background-size:  cover ;}
    59%  {  background: url("../img/explosion4.png") no-repeat; background-size:  cover ;}
    62%  {  background: url("../img/explosion5.png") no-repeat; background-size:  cover ;}
    65%  {  background: url("../img/explosion6.png") no-repeat; background-size:  cover ;}
    68%  {  background: url("../img/explosion7.png") no-repeat; background-size:  cover ;}
    71%  {  background: url("../img/explosion8.png") no-repeat; background-size:  cover ;}
    74%  {  background: url("../img/explosion9.png") no-repeat; background-size:  cover ;}
    77%  {  background: url("../img/explosion10.png") no-repeat; background-size:  cover ;}
    80%  {  background: url("../img/explosion11.png") no-repeat; background-size:  cover ;}
    83%  {  background: url("../img/explosion12.png") no-repeat; background-size:  cover ;}
    86%  {  background: url("../img/explosion13.png") no-repeat; background-size:  cover ;}
    89%  {  background: url("../img/explosion14.png") no-repeat; background-size:  cover ;}
    92%  {  background: url("../img/explosion15.png") no-repeat; background-size:  cover ;}
    94%  {  background: url("../img/explosion16.png") no-repeat; background-size:  cover ;}
    95% { background-color:rgba(0, 0, 0, 0.5); transform:scale(2) ; -webkit-transform:scale(2) ; -moz-transform:scale(2) ; -ms-transform:scale(2) ; -o-transform:scale(2) ; }
    100% { background-color:rgba(0, 0, 0, 0.5); transform:scale(2) ; -webkit-transform:scale(2) ; -moz-transform:scale(2) ; -ms-transform:scale(2) ; -o-transform:scale(2) ; }

}



/****MOBILE VERSION***/

@media all and (max-width: 500px){

    html, body{
        font-size: 45%;
        height: 100%;
    }

    #menu{
        display: none;
    }


    #life{
        position:fixed;
        left:15%;
        top:50px;
        width: 50px;
        font-size:1.8rem;
        font-weight: 10;
    }
    #enemy{
        position:fixed;
        left:15%;
        top:80px;
        width: 50px;
        font-size:1.8rem;
        font-weight: 10;
    }


    #score{
        position:fixed;
        right:5%;
        top:40px;
        width: 120px;
        height: 70px;
        font-size:2.5rem;
        font-weight: 10;
        color : red;
        background-color: black;
        border : 10px ridge darkgray;
        font-family: "clock";
        text-align: right;
    }


    #timer{
        position:fixed;
        right:45%;
        top:80px;
        width: 50px;
        font-size:1.8rem;
        font-weight: 10;

    }

    .gameboard{

        height: 300px;
        width: 300px;
        background-color: rgb(66, 211, 86);
        background: url("../img/terrain.png") center;
        background-size: 20px 20px ;
        border :20px rgba(58, 58, 58, 0.6);
        position: fixed;
        margin:auto;
        top:25%;
        outline: ridge 20px rgb(148, 148, 148);

    }


    footer button{
        width:250px;
        height:60px;
        margin-top:20px;

    }






    .bomb {
        width: 40px;
        height: 40px;
        position: absolute;
        top:0px;
        left:0px;
        animation-name: exploded;
        animation-duration: 2s;
        animation-timing-function: linear;
        border-radius: 50%;
        animation-iteration-count: initial;
        animation-direction: normal;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
    }



    @keyframes exploded {
        0%   {  background-color: red; background-size:  contain ;}
        40%   {  background-color: red; background-size:  contain ;}
        50%  { background-color: red; background-size:  cover ; transform:scale(2) ; -webkit-transform:scale(2) ; -moz-transform:scale(2) ; -ms-transform:scale(2) ; -o-transform:scale(2) ; }
        68%  { background-color: red; background-size:  cover ;}
        83%   { background-color: red; background-size:  cover ; transform:scale(1) ; -webkit-transform:scale(1) ; -moz-transform:scale(1) ; -ms-transform:scale(1) ; -o-transform:scale(1) ; }
        90%  { background-color: red; background-size:  cover ;}
        95% { background-color:rgba(0, 0, 0, 0.5); transform:scale(2) ; -webkit-transform:scale(2) ; -moz-transform:scale(2) ; -ms-transform:scale(2) ; -o-transform:scale(2) ; }
        100% { background-color:rgba(0, 0, 0, 0.5); transform:scale(2) ; -webkit-transform:scale(2) ; -moz-transform:scale(2) ; -ms-transform:scale(2) ; -o-transform:scale(2) ; }

    }



}