/* CSS pour le fond, les couleurs et la mise en page générale */
body {
  background-color: #1a1a1a; /* Gris foncé */
  color: white;
  font-family: sans-serif;
}

header {
  background-color: #191941; /* Violet foncé */
  padding: 20px;
}

header h1 {
  font-size: 20px; /* Taille de police réduite */
}

#profileInfo, #matchHistory {
  background-color: #2a2a2a; /* Gris un peu plus clair */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

/* Styles pour le profil et le match */
#profileIcon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid #731DD8;
}

#summonerNameDisplay {
  font-size: 18px; /* Taille de police réduite */
  font-weight: bold;
}

#summonerLevel {
  font-size: 14px; /* Taille de police réduite */
}

#match h2 {
  font-size: 20px; /* Taille de police réduite */
  margin-bottom: 10px;
}

#matchHistory {
  background-color: #2a2a2a; /* Gris un peu plus clair */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  font-size: 14px; /* Taille de police réduite */
  max-width: 500px; /* Largeur maximale pour utiliser l'espace disponible */
  margin: 0 auto; /* Centrage horizontal */
  overflow: auto; /* Ajoute une barre de défilement si nécessaire */
  min-height: 400px; /* Hauteur minimale du conteneur */
}

/* Styles pour les rangées et cellules des joueurs */
.player-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-top: 1px solid #333; /* Ligne de séparation entre les joueurs */
  border-bottom: 1px solid #333; /* Ligne de séparation entre les joueurs */
  margin-bottom: 5px; /* Espacement entre les lignes */
}

/* Styles pour les joueurs bleus */
.player-cell {
  flex: 1;
  padding: 10px;
}

/* Styles pour les joueurs rouges et effet miroir */
.player-cell.mirror {
  flex-direction: row-reverse; /* Inverser l'ordre des éléments dans la cellule pour l'effet miroir */
}

.player-info {
  flex: 1;
  margin-left: 10px;
}
img {
	 border-radius: 50%;
  max-width: 100px; /* Limite la largeur des images pour éviter qu'elles ne soient trop grandes */
 
}

#blueItemsContainer  {
  border-radius: 50%;
  border: 2px solid #731DD8;
}
/* Styles pour les informations du champion, du nom d'invocateur, du KDA et du niveau */
.champion-info {
  display: flex;
  align-items: center;
}

.champion-icon {
  width: 60px;
  height: 60px;
  border: 2px solid #731DD8;
  border-radius: 50%;
}

.summoner-name {
  font-size: 16px;
  margin-left: 10px;
  flex: 1; /* Ajustement pour que le texte prenne toute la largeur disponible */
}

.kda {
  font-size: 14px;
  margin-left: 10px;
  margin-right: 10px;
  font-weight: bold;
  
}

.champion-level {
  font-size: 12px;
  margin-left: 10px;
}

.level-circle {
  font-size: 8px;
  line-height: 0.8;
}