body {
    background: linear-gradient(to bottom, #aec9f0, #ffffff);
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    position: relative; /* Ajout d'une position relative pour référencer les éléments enfants */
}







.boite1 {
    max-width: 50%; /* Ajustez la largeur de votre image selon vos préférences */
}

.pion {
    max-width: 100%;
    height: auto; /* Assurez-vous que l'image conserve son ratio */
    display: block; /* Pour centrer horizontalement */
    margin: 0 auto; /* Pour centrer horizontalement */
}

.menu-left,
.menu-right {
    position: absolute; /* Position absolue par rapport au corps de la page */
    top: 0; /* Alignement vertical au bord supérieur */
}

.menu-left {
    margin-top: 4vh;
   left: 0px; /* Positionnement à gauche */
   
}
.menu-right {
    margin-top: 1vh;
    right: 0px; /* Positionnement à droite */
}

.menu-right a img{
   transform-origin: right center;
}
.menu-left a img{
    transform-origin: left center;
 }

.menu-left a,
.menu-right a {
    display: block; /* Permet d'appliquer la marge aux liens */
    margin: 0 ; /* Espacement entre les boutons */
}

.menu-left a img,
.menu-right a img {
    width: 18vh; /* Largeur des boutons */
    height: auto; /* Hauteur automatique pour maintenir le ratio */
    transition: transform 0.2s ease;
}

.menu-left a img:hover,
.menu-right a img:hover {
    transform: scale(1.5); /* Agrandit l'image de 20% lorsqu'on passe la souris dessus */
}