/* page positionement    */
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
header,footer{
    background-color: #333;
    color: #fff;
    padding: 10px;
    justify-content: center;
    align-items: center;
    display: flex;
}
header p{
    padding:1%;
    font-size:70px;
}
footer{
    background-color: #333;
    color: #fff;
    padding: 10px;
    justify-content: space-around;
    align-items: center;
    display: flex;
}
footer p{
    padding:1%;
    font-size:20px;
}
footer a{
    text-decoration:underline;
    color:inherit;
}
section{
    display: flex;
    padding-block:1%;
    justify-content: center;
}
/* game playyyy */
.game {
    width: 84%;
    border: 15px solid #333;
    border-radius: 15px;
    height: 1300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("Assets/Img/background_duck_hunt.gif");
    position: relative; /* Important pour positionner les éléments enfants (canard) */
    cursor: crosshair;
}

.Img_background{
    width:100%;
    height:100%;
}
.event_btn{
    display:block;
    width:15%;
}
#break_btn,#start_btn,#stop_btn{
    font-size:40px;
    padding-block:8%;
    margin:2%;
    width:96%;
    border-radius:5px;
    cursor:pointer;
}
/* scoreboard */
#scoreboard {
    position: absolute;
    top:10px;
   left:10px;
    font-size: 24px;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 5px;
  }
  .duck {
    position: absolute;
    display: none;
    transition: left 0.5s, top 0.5s, transform 0.3s; /* Animation pour le déplacement de l'oie */
    pointer-events: auto;
}

.data span{
    padding:5%;
}
/* responsive */ 
@media (max-width: 800px){
    section{
        display: block;
    }
}