*{
    padding: 0;
    margin: 0;
}
body{
    background-color: brown;
}
footer{
    text-align: center;
    padding: 3px;
    background-color: #0b1466;
    color: azure;
    left: 0;
    bottom: 0;
    width: 100%;
    position: relative;
}
.Header {
    background-color:#5f0000;
    padding-left: 0;
    padding-right: 0;
    color: azure;
    text-align: center;
  }
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #0b1466;
    color: azure;
    text-align: center;
  }
  li a {
    display:block;
    color:azure;
    padding: 8px 16px;
    text-decoration: none;
  }
  li a:hover {
    background-color: #580000;
    color: azure;
  }
  .button{border: none;
background-color: #0b1466;
color:azure;
padding: 15px 32px;
text-align: center;
font-size: 20px;
margin: 40px 2px;
cursor: pointer;
width: 100%;
}
#centerimg{
    display: block;
    margin: auto;
    justify-content: center;
  
}
.gameSpace{
width: 1200px;
height: 500px;
/*the Game's border*/
border: 2px solid black;
/*To center the Game's border*/
margin: auto;
background-image: url('https://cdn.dribbble.com/users/1100256/screenshots/12294406/media/679e0dcabffe421e242a55ff7e372582.jpg?compress=1&resize=1200x900');
background-size: 98% 98%;
background-repeat: no-repeat;
background-attachment: fixed;
}

.superMario{
    /* Mario's position is relative to the game space*/
position: relative;
left: 50px;
top: 360px;
}
.obstacle{
        /* obstacle's position is relative to the game space*/
    position: relative;
    left: 1117px;
    top: 310px;
     /* move linearly and infinitey*/
     animation: obstacleM 2s infinite linear ;
} 
 /* Animation of obstacle*/
@keyframes obstacleM{
0%{left: 470px;}
100%{left: -20px;}
}
@keyframes marioM{
    0%{top: 190px;}
    30%{top: 150px;}
    70%{top: 150px;}
    100%{top: 350px;}
    }
    .animation{
/* Mario jumping*/
animation: marioM 500ms;
    }