body {
    background-image: url('Background/fond.png'); /* Remplacez par le chemin de votre image */
    background-size: cover; /* Adapte l'image pour couvrir toute la page */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    background-position: center; /* Centre l'image sur la page */
    margin: 0; /* Supprime les marges par défaut du body */
    padding: 0; /* Supprime les marges internes */
}


/* Style du conteneur de l'image */
.container {
    position: relative;  /* Permet de positionner des éléments à l'intérieur de ce conteneur */
    display: flex;
    justify-content: center;  /* Centrer horizontalement */
    align-items: center;  /* Centrer verticalement */
    height: 100%;  /* Prendre toute la hauteur de la page */  
  }

.hidden{
  display: none;
}

.slot {
  width: 50px;
  height: 50px;
  margin: 70px;
  position: relative;  /* Pour positionner le bouton à l'intérieur du slot */
  left: 0%; /* Centre horizontalement */
}

.slot img {
  width: 150px;
  height: 150px;
  margin: -110px; 
  justify-content: center;  /* Centrer horizontalement */
}
  

 /* Style de l'image Knight */
 #knightImage {
   max-width: 26%;  /* Limiter la largeur de l'image à % de la largeur de la fenêtre */  
   height: auto;  /* Garder les proportions de l'image */
   z-index: 2; /* S'assure que la bannière est au-dessus */
 }


 /* Style pour l'image Banner */
#bannerImage {
    position: absolute; /* Positionne l'image par rapport au conteneur */
    top: -55%; /* Ajuste la hauteur de la bannière pour qu'elle soit au-dessus */
    left: 51%; /* Centre horizontalement */
    transform: translateX(-50%); /* Centre horizontalement */
    max-width: 26%; /* Ajustez la taille de la bannière */
    z-index: 1; /* Place la bannière derrière les autres éléments */
    height: auto;
  }

   /* Style pour l'image Banner */
#chestImage {
    position: absolute; /* Positionne l'image par rapport au conteneur */
    top: 16%; /* Ajuste la hauteur de la bannière pour qu'elle soit au-dessus */
    left: 20%; /* Centre horizontalement */
    transform: translateX(-50%); /* Centre horizontalement */
    max-width: 26%; /* Ajustez la taille de la bannière */
    z-index: 1; /* Place la bannière derrière les autres éléments */
    height: auto;
  }

     /* Style pour l'image Banner */
#tabImage {
  position: absolute; /* Positionne l'image par rapport au conteneur */
  top: -4%; /* Ajuste la hauteur de la bannière pour qu'elle soit au-dessus */
  left: 81.8%; /* Centre horizontalement */
  transform: translateX(-50%); /* Centre horizontalement */
  max-width: 30%; /* Ajustez la taille de la bannière */
  z-index: -2; /* Place la bannière derrière les autres éléments */
  height: auto;
}




 /* Style du bouton */
#claimButton {
  
    position: absolute;  /* Positionner le bouton par rapport au conteneur de l'image */
    background-color: transparent;  /* Supprime l'arrière-plan du bouton */
    border: none;  /* Supprime la bordure du bouton */
    cursor: pointer;  /* Change le curseur pour indiquer qu'il est cliquable */
    display: flex;  /* Utiliser flexbox pour aligner l'image au centre du bouton */
    align-items: center;  /* Aligner l'image verticalement */
    justify-content: center;  /* Centrer l'image horizontalement */
    z-index: 2; /* S'assure que la bannière est au-dessus */
    top: 80%;  /* Positionner verticalement à 30% de la hauteur du conteneur (image) */
    left: 42%;  /* Centrer horizontalement par rapport à l'image */
    width: 220px;
    height: 80px;
    padding: 0; /* Aucune marge interne */  
    /* Utilisation de transform pour centrer le bouton sur son propre centre */
    transform: translateX(-50%);  /* Centrer horizontalement le bouton */
    max-width: 10%; /* Ajustez la taille de la bannière */    
  }

  #levelUpButton {
    position: absolute;  /* Positionner le bouton par rapport au conteneur de l'image */
    background-color: transparent;  /* Supprime l'arrière-plan du bouton */
    border: none;  /* Supprime la bordure du bouton */
    cursor: pointer;  /* Change le curseur pour indiquer qu'il est cliquable */
    display: flex;  /* Utiliser flexbox pour aligner l'image au centre du bouton */
    align-items: center;  /* Aligner l'image verticalement */
    justify-content: center;  /* Centrer l'image horizontalement */
    top: 80%;  /* Positionner verticalement à 30% de la hauteur du conteneur (image) */
    left: 58%;  /* Centrer horizontalement par rapport à l'image */
    display: inline-flex;
    z-index: 3; /* S'assure que la bannière est au-dessus */
    width: 253px;
    height: 80px; 
    /* Utilisation de transform pour centrer le bouton sur son propre centre */
    transform: translateX(-50%);  /* Centrer horizontalement le bouton */
    max-width: 12%; /* Ajustez la taille de la bannière */
  }

  #connectButton {
    position: relative;  /* Positionner le bouton par rapport au conteneur de l'image */
    background-color: transparent;  /* Supprime l'arrière-plan du bouton */
    border: none;  /* Supprime la bordure du bouton */
    cursor: pointer;  /* Change le curseur pour indiquer qu'il est cliquable */
    display: flex;  /* Utiliser flexbox pour aligner l'image au centre du bouton */
    align-items: center;  /* Aligner l'image verticalement */
    justify-content: center;  /* Centrer l'image horizontalement */
    z-index: 2; /* S'assure que la bannière est au-dessus */
    top: 30%;  /* Positionner verticalement à 30% de la hauteur du conteneur (image) */
    left: 12.5%;  /* Centrer horizontalement par rapport à l'image */
    width: 500px;
    height: 300px;
    padding: 0; /* Aucune marge interne */  
    /* Utilisation de transform pour centrer le bouton sur son propre centre */
    transform: translateX(-50%);  /* Centrer horizontalement le bouton */
  }

  #starterPackButton {
    position: relative;  /* Positionner le bouton par rapport au conteneur de l'image */
    background-color: transparent;  /* Supprime l'arrière-plan du bouton */
    border: none;  /* Supprime la bordure du bouton */
    cursor: pointer;  /* Change le curseur pour indiquer qu'il est cliquable */
    display: flex;  /* Utiliser flexbox pour aligner l'image au centre du bouton */
    align-items: center;  /* Aligner l'image verticalement */
    justify-content: center;  /* Centrer l'image horizontalement */
    z-index: 2; /* S'assure que la bannière est au-dessus */
    top: 50%;  /* Positionner verticalement à 30% de la hauteur du conteneur (image) */
    left: 10%;  /* Centrer horizontalement par rapport à l'image */
    width: 700px;
    height: 200px;
    padding: 0; /* Aucune marge interne */
    transform: translateX(-50%);  /* Centrer horizontalement le bouton */
  }

  #premiumPackButton {
    position: relative;  /* Positionner le bouton par rapport au conteneur de l'image */
    background-color: transparent;  /* Supprime l'arrière-plan du bouton */
    border: none;  /* Supprime la bordure du bouton */
    cursor: pointer;  /* Change le curseur pour indiquer qu'il est cliquable */
    display: flex;  /* Utiliser flexbox pour aligner l'image au centre du bouton */
    align-items: center;  /* Aligner l'image verticalement */
    justify-content: center;  /* Centrer l'image horizontalement */
    z-index: 2; /* S'assure que la bannière est au-dessus */
    top: 50%;  /* Positionner verticalement à 30% de la hauteur du conteneur (image) */
    left: 25%;  /* Centrer horizontalement par rapport à l'image */
    width: 700px;
    height: 200px;
    padding: 0; /* Aucune marge interne */
  
    /* Utilisation de transform pour centrer le bouton sur son propre centre */
    transform: translateX(-50%);  /* Centrer horizontalement le bouton */
  }

  #chestButton {
    position: absolute;  /* Positionner le bouton par rapport au conteneur de l'image */
    background-color: transparent;  /* Supprime l'arrière-plan du bouton */
    border: none;  /* Supprime la bordure du bouton */
    cursor: pointer;  /* Change le curseur pour indiquer qu'il est cliquable */
    display: flex;  /* Utiliser flexbox pour aligner l'image au centre du bouton */
    align-items: center;  /* Aligner l'image verticalement */
    justify-content: center;  /* Centrer l'image horizontalement */
    top: 82%;  /* Positionner verticalement à 30% de la hauteur du conteneur (image) */
    left: 14.3%;  /* Centrer horizontalement par rapport à l'image */
    display: inline-flex;
    z-index: 2; /* S'assure que la bannière est au-dessus */
    width: 220px;
    height: 80px; 
    /* Utilisation de transform pour centrer le bouton sur son propre centre */
    transform: translateX(-50%);  /* Centrer horizontalement le bouton */
    max-width: 12%; /* Ajustez la taille de la bannière */
  }

  #openButton {
    position: absolute;  /* Positionner le bouton par rapport au conteneur de l'image */
    background-color: transparent;  /* Supprime l'arrière-plan du bouton */
    border: none;  /* Supprime la bordure du bouton */
    cursor: pointer;  /* Change le curseur pour indiquer qu'il est cliquable */
    display: flex;  /* Utiliser flexbox pour aligner l'image au centre du bouton */
    align-items: center;  /* Aligner l'image verticalement */
    justify-content: center;  /* Centrer l'image horizontalement */
    top: 82%;  /* Positionner verticalement à 30% de la hauteur du conteneur (image) */
    left: 25.7%;  /* Centrer horizontalement par rapport à l'image */
    display: inline-flex;
    z-index: 2; /* S'assure que la bannière est au-dessus */
    width: 220px;
    height: 80px; 
    /* Utilisation de transform pour centrer le bouton sur son propre centre */
    transform: translateX(-50%);  /* Centrer horizontalement le bouton */
    max-width: 12%; /* Ajustez la taille de la bannière */
  }

  #gloryButton {
    position: absolute;  /* Positionner le bouton par rapport au conteneur de l'image */
    background-color: transparent;  /* Supprime l'arrière-plan du bouton */
    border: none;  /* Supprime la bordure du bouton */
    cursor: pointer;  /* Change le curseur pour indiquer qu'il est cliquable */
    display: flex;  /* Utiliser flexbox pour aligner l'image au centre du bouton */
    align-items: center;  /* Aligner l'image verticalement */
    justify-content: center;  /* Centrer l'image horizontalement */
    z-index: 2; /* S'assure que la bannière est au-dessus */
    top: -6%;  /* Positionner verticalement à 30% de la hauteur du conteneur (image) */
    left: 10%;  /* Centrer horizontalement par rapport à l'image */
    color: #671d18;
    z-index: 5; /* S'assure que l'overlay est au-dessus de l'image */
    max-width: 10%; /* Ajustez la taille de la bannière */  
    transform: translateX(-50%);  /* Centrer horizontalement le bouton */
  }

  #sellButton {
    position: absolute;  /* Positionner le bouton par rapport au conteneur de l'image */
    background-color: transparent;  /* Supprime l'arrière-plan du bouton */
    border: none;  /* Supprime la bordure du bouton */
    cursor: pointer;  /* Change le curseur pour indiquer qu'il est cliquable */
    display: flex;  /* Utiliser flexbox pour aligner l'image au centre du bouton */
    align-items: center;  /* Aligner l'image verticalement */
    justify-content: center;  /* Centrer l'image horizontalement */
    z-index: 2; /* S'assure que la bannière est au-dessus */
    top: -6%;  /* Positionner verticalement à 30% de la hauteur du conteneur (image) */
    left: 29%;  /* Centrer horizontalement par rapport à l'image */
    color: #671d18;
    z-index: 5; /* S'assure que l'overlay est au-dessus de l'image */
    max-width: 10%; /* Ajustez la taille de la bannière */  
    transform: translateX(-50%);  /* Centrer horizontalement le bouton */
  }

  #mintButton {
    position: absolute;  /* Positionner le bouton par rapport au conteneur de l'image */
    background-color: transparent;  /* Supprime l'arrière-plan du bouton */
    border: none;  /* Supprime la bordure du bouton */
    cursor: pointer;  /* Change le curseur pour indiquer qu'il est cliquable */
    display: flex;  /* Utiliser flexbox pour aligner l'image au centre du bouton */
    align-items: center;  /* Aligner l'image verticalement */
    justify-content: center;  /* Centrer l'image horizontalement */
    z-index: 2; /* S'assure que la bannière est au-dessus */
    top: -31%;  /* Positionner verticalement à 30% de la hauteur du conteneur (image) */
    left: 80%;  /* Centrer horizontalement par rapport à l'image */
    z-index: 5; /* S'assure que l'overlay est au-dessus de l'image */
    max-width: 10%; /* Ajustez la taille de la bannière */  
    transform: translateX(-50%);  /* Centrer horizontalement le bouton */
  }

  #equipSwordButton {
    position: absolute;  /* Positionner le bouton par rapport au conteneur de l'image */
    background-color: transparent;  /* Supprime l'arrière-plan du bouton */
    border: none;  /* Supprime la bordure du bouton */
    cursor: pointer;  /* Change le curseur pour indiquer qu'il est cliquable */
    display: flex;  /* Utiliser flexbox pour aligner l'image au centre du bouton */
    align-items: center;  /* Aligner l'image verticalement */
    justify-content: center;  /* Centrer l'image horizontalement */
    z-index: 2; /* S'assure que la bannière est au-dessus */
    top: 93%;  /* Positionner verticalement à 30% de la hauteur du conteneur (image) */
    left: 43%;  /* Centrer horizontalement par rapport à l'image */
    z-index: 5; /* S'assure que l'overlay est au-dessus de l'image */
    max-width: 10%; /* Ajustez la taille de la bannière */  
    transform: translateX(-50%);  /* Centrer horizontalement le bouton */
  }

  #unequipButton {
    position: absolute;  /* Positionner le bouton par rapport au conteneur de l'image */
    background-color: transparent;  /* Supprime l'arrière-plan du bouton */
    border: none;  /* Supprime la bordure du bouton */
    cursor: pointer;  /* Change le curseur pour indiquer qu'il est cliquable */
    display: flex;  /* Utiliser flexbox pour aligner l'image au centre du bouton */
    align-items: center;  /* Aligner l'image verticalement */
    justify-content: center;  /* Centrer l'image horizontalement */
    z-index: 2; /* S'assure que la bannière est au-dessus */
    top: 93%;  /* Positionner verticalement à 30% de la hauteur du conteneur (image) */
    left: 56%;  /* Centrer horizontalement par rapport à l'image */
    z-index: 5; /* S'assure que l'overlay est au-dessus de l'image */
    max-width: 10%; /* Ajustez la taille de la bannière */  
    transform: translateX(-50%);  /* Centrer horizontalement le bouton */
  }
  
    /* Style pour l'image Banner */
  #globalHashImage {
    position: absolute; /* Positionne l'image par rapport au conteneur */
    max-width: 32%; /* Ajustez la taille de la bannière */
    top: -30%;  /* Positionner verticalement à 30% de la hauteur du conteneur (image) */
    left: 3%;  /* Centrer horizontalement par rapport à l'image */
    z-index: 4; /* Place la bannière derrière les autres éléments */
  }

  #globalKnightHashOverlay {
    position: absolute;
    top: -9%; /* Centre verticalement */
    left: 19.5%; /* Centre horizontalement */
    transform: translate(-50%, -50%); /* Ajuste pour que le centre de l'élément soit exactement au centre de l'image */
    color: #d7aa5c;
    font-weight: bold;
    font-size: 24px;
    padding: 5px;
    border-radius: 5px;
    z-index: 5; /* S'assure que l'overlay est au-dessus de l'image */
  }

  #braveryPriceOverlay {
    position: absolute;
    top: 135%; /* Centre verticalement */
    left: 19.5%; /* Centre horizontalement */
    transform: translate(-50%, -50%); /* Ajuste pour que le centre de l'élément soit exactement au centre de l'image */
    color: #d7aa5c;
    font-weight: bold;
    font-size: 24px;
    padding: 5px;
    border-radius: 5px;
    z-index: 5; /* S'assure que l'overlay est au-dessus de l'image */
  }

#gloryPriceOverlay {
  position: absolute;
  top: 141.5%; /* Centre verticalement */
  left: 19.5%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste pour que le centre de l'élément soit exactement au centre de l'image */
  color: #d7aa5c;
  font-weight: bold;
  font-size: 24px;
  padding: 5px;
  border-radius: 5px;
  z-index: 5; /* S'assure que l'overlay est au-dessus de l'image */
}

#honnorPriceOverlay {
  position: absolute;
  top: 148%; /* Centre verticalement */
  left: 19.5%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste pour que le centre de l'élément soit exactement au centre de l'image */
  color: #d7aa5c;
  font-weight: bold;
  font-size: 24px;
  padding: 5px;
  border-radius: 5px;
  z-index: 5; /* S'assure que l'overlay est au-dessus de l'image */
}



 #knightLevelOverlay {
  position: absolute;
  top: 14%; /* Centre verticalement */
  left: 81.8%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste pour que le centre de l'élément soit exactement au centre de l'image */
  color: #671d18;
  font-weight: bold;
  font-size: 24px;
  padding: 5px;
  border-radius: 5px;
  z-index: 6; /* S'assure que l'overlay est au-dessus de l'image */
}

#honnorBalanceOverlay {
  position: absolute;
  top: 22%; /* Centre verticalement */
  left: 81.8%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste pour que le centre de l'élément soit exactement au centre de l'image */
  color: #671d18;
  font-weight: bold;
  font-size: 18px;
  padding: 5px;
  border-radius: 5px;
  z-index: 6; /* S'assure que l'overlay est au-dessus de l'image */
}


#knightHashOverlay {
  position: absolute;
  top: 27.4%; /* Centre verticalement */
  left: 81.8%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste pour que le centre de l'élément soit exactement au centre de l'image */
  color: #671d18;
  font-weight: bold;
  font-size: 18px;
  padding: 5px;
  border-radius: 5px;
  z-index: 6; /* S'assure que l'overlay est au-dessus de l'image */
}

#knightBraveryOverlay {
  position: absolute;
  top: 33.5%; /* Centre verticalement */
  left: 81.8%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste pour que le centre de l'élément soit exactement au centre de l'image */
  color: #671d18;
  font-weight: bold;
  font-size: 18px;
  padding: 5px;
  border-radius: 5px;
  z-index: 6; /* S'assure que l'overlay est au-dessus de l'image */
}

#knightGloryOverlay {
  position: absolute;
  top: 39.6%; /* Centre verticalement */
  left: 81.8%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste pour que le centre de l'élément soit exactement au centre de l'image */
  color: #671d18;
  font-weight: bold;
  font-size: 18px;
  padding: 5px;
  border-radius: 5px;
  z-index: 6; /* S'assure que l'overlay est au-dessus de l'image */
}

#unopenedChestOverlay {
  position: absolute;
  top: 88.3%; /* Centre verticalement */
  left: 81.8%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste pour que le centre de l'élément soit exactement au centre de l'image */
  color: #671d18;
  font-weight: bold;
  font-size: 18px;
  padding: 5px;
  border-radius: 5px;
  z-index: 6; /* S'assure que l'overlay est au-dessus de l'image */
}

#swordInventoryOverlay {
  position: absolute;
  top: 66%; /* Centre verticalement */
  left: 81.8%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste pour que le centre de l'élément soit exactement au centre de l'image */
  color: #671d18;
  font-weight: bold;
  font-size: 14px;
  padding: 5px;
  border-radius: 5px;
  z-index: 6; /* S'assure que l'overlay est au-dessus de l'image */
}

#knightSlotOverlay {
  position: absolute;
  top: 48%; /* Centre verticalement */
  left: 81.8%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste pour que le centre de l'élément soit exactement au centre de l'image */
  color: #671d18;
  font-weight: bold;
  font-size: 18px;
  padding: 5px;
  border-radius: 5px;
  z-index: 6; /* S'assure que l'overlay est au-dessus de l'image */
}


  
  
   /* Style pour l'image à l'intérieur du bouton */
   #claimButtonImage {
    width: 100%;  /* Largeur de l'image en pourcentage de la largeur du bouton */
    height: auto;  /* Hauteur automatique pour garder les proportions */
  }

     /* Style pour le bouton level up */
     #levelUpButtonImage {
        width: 100%;  /* Largeur de l'image en pourcentage de la largeur du bouton */
        height: auto;  /* Hauteur automatique pour garder les proportions */
      }

         /* Style pour l'image à l'intérieur du bouton */
   #connectButtonImage {
    width: 100%;  /* Largeur de l'image en pourcentage de la largeur du bouton */
    height: auto;  /* Hauteur automatique pour garder les proportions */
  }


      /* Style pour l'image à l'intérieur du bouton */
      #starterButtonImage {
       width: 100%;  /* Largeur de l'image en pourcentage de la largeur du bouton */
       height: auto;  /* Hauteur automatique pour garder les proportions */
     }

  /* Style pour l'image à l'intérieur du bouton */
  #premiumButtonImage {
     width: 100%;  /* Largeur de l'image en pourcentage de la largeur du bouton */
     height: auto;  /* Hauteur automatique pour garder les proportions */
   }
       
      /* Style pour l'image à l'intérieur du bouton */
  #chestButtonImage {
    width: 100%;  /* Largeur de l'image en pourcentage de la largeur du bouton */
    height: auto;  /* Hauteur automatique pour garder les proportions */
  }

    /* Style pour l'image à l'intérieur du bouton */
    #buyChestButtonImage {
        width: 100%;  /* Largeur de l'image en pourcentage de la largeur du bouton */
        height: auto;  /* Hauteur automatique pour garder les proportions */
      }

          /* Style pour l'image à l'intérieur du bouton */
    #openChestButtonImage {
        width: 100%;  /* Largeur de l'image en pourcentage de la largeur du bouton */
        height: auto;  /* Hauteur automatique pour garder les proportions */
      }

  /* Style pour l'image à l'intérieur du bouton */
  #getGloryButtonImage {
    width: 100%;  /* Largeur de l'image en pourcentage de la largeur du bouton */
    height: auto;  /* Hauteur automatique pour garder les proportions */
  }

    /* Style pour l'image à l'intérieur du bouton */
    #sellGloryButtonImage {
      width: 100%;  /* Largeur de l'image en pourcentage de la largeur du bouton */
      height: auto;  /* Hauteur automatique pour garder les proportions */
    }
  
        /* Style pour l'image à l'intérieur du bouton */
        #mintHonnorImage {
          width: 100%;  /* Largeur de l'image en pourcentage de la largeur du bouton */
          height: auto;  /* Hauteur automatique pour garder les proportions */
        }
    
    /* Style pour l'image à l'intérieur du bouton */
    #equipButtonImage {
      width: 100%;  /* Largeur de l'image en pourcentage de la largeur du bouton */
      height: auto;  /* Hauteur automatique pour garder les proportions */
    }

    /* Style pour l'image à l'intérieur du bouton */
    #unequipButtonImage {
      width: 100%;  /* Largeur de l'image en pourcentage de la largeur du bouton */
      height: auto;  /* Hauteur automatique pour garder les proportions */
    }
    
    /* Style pour l'image à l'intérieur du bouton */
    #slotButtonImage {
      width: 100%;  /* Largeur de l'image en pourcentage de la largeur du bouton */
      height: auto;  /* Hauteur automatique pour garder les proportions */
      
    }