.guildIdentity .user-card {
  display: grid; /* Use grid layout */
  grid-template-columns: auto 60px 1fr auto; /* Three columns: logo, info, button */
  gap: 15px; /* Spacing between grid items */
  align-items: center; /* Vertically center items */
  background-color: #5498e5;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.guildIdentity .user-card.hasCountry {
  grid-template-columns: auto 60px 50px 1fr auto;
}

.guildIdentity .user-card #teamRank {
  grid-column: 1;
}

.guildIdentity .user-card .avatar {
  grid-column: 2;
}

.guildIdentity .user-card.hasCountry #teamNationaleFlag {
  grid-column: 3;
}

.guildIdentity .user-info {
  grid-column: 3;
}

.guildIdentity .user-card.hasCountry .user-info {
  grid-column: 4;
}

.guildIdentity .user-card button {
  grid-column: 4;
}

.guildIdentity .user-card.hasCountry button {
  grid-column: 5;
}

@media screen and (max-width: 680px) {
  .guildIdentity .user-card.hasCountry {
    grid-template-columns: auto 60px 1fr auto;
  }

  .guildIdentity .user-card #teamNationaleFlag {
    display: none;
  }

  .guildIdentity .user-card.hasCountry .user-info {
    grid-column: 3;
  }

  .guildIdentity .user-card.hasCountry button {
    grid-column: 4;
  }
}

.guildIdentity .user-card[data-index="0"] {
  background-color: #d4be77; /* Gold for first */
}

.guildIdentity .user-card[data-index="1"] {
  background-color: #aeb2b8; /* Silver for index 2 */
}

.guildIdentity .user-card[data-index="2"] {
  background-color: #d4a96b; /* Bronze for index 3 */
}

.guildIdentity .user-card[data-index="3"],
.guildIdentity .user-card[data-index="4"],
.guildIdentity .user-card[data-index="5"],
.guildIdentity .user-card[data-index="6"],
.guildIdentity .user-card[data-index="7"] {
  background-color: #92c79e; /* Light gray for index 3-7 */
}

.guildIdentity .user-card[data-index="0"] #teamElo,
.guildIdentity .user-card[data-index="1"] #teamElo,
.guildIdentity .user-card[data-index="2"] #teamElo,
.guildIdentity .user-card[data-index="3"] #teamElo,
.guildIdentity .user-card[data-index="4"] #teamElo,
.guildIdentity .user-card[data-index="5"] #teamElo,
.guildIdentity .user-card[data-index="6"] #teamElo,
.guildIdentity .user-card[data-index="7"] #teamElo {
  color: #4e44c3;
}

#guildIdentity.animated {
  visibility: hidden; /* Initially hide the element */
  animation: slideInFromRight 0.5s ease-in-out;
  animation-delay: calc(var(--index) * 0.005s); /* Delay based on index */
  animation-fill-mode: forwards; /* Keep the final state of the animation */
}

@keyframes slideInFromRight {
  0% {
    opacity: 0;
    transform: translateX(100%); /* Start off-screen to the right */
    visibility: visible; /* Initially hide the element */
  }
  100% {
    opacity: 1;
    transform: translateX(0); /* Slide to the normal position */
    visibility: visible; /* Initially hide the element */
  }
}

#guildName,
.containerDiv h2 {
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
  font-size: 2.5em;
  font-weight: bold;
}

#leaderboardDesc {
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
  font-size: 0.75em;
  font-weight: bold;
}

#createTeamLink {
  text-align: center;
  margin: 20px auto;
  font-size: 1.5em;
  font-weight: bold;
  display: block;
  width: 50%; /* Adjust width to account for padding */
  padding: 10px 20px; /* Add padding to make it look like a button */
  background-color: #007bff; /* Add a background color */
  color: white; /* Change text color to white */
  border: none; /* Remove default border */
  border-radius: 5px; /* Add rounded corners */
  cursor: pointer; /* Change cursor to pointer on hover */
  text-decoration: none; /* Remove underline from the link */
}

.guildIdentity .user-card:hover {
  transform: translateY(-5px); /* Slight lift on hover */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* More pronounced shadow */
}

.guildIdentity .avatar {
  object-fit: contain;
  width: 60px;
  height: 60px;
  border: 2px solid #ddd; /* Light border */
  border-radius: 50%;
  margin-right: 15px;
  border: 2px solid #555; /* Add a border to the avatar */
  background-color: #8785856e;
  color: white;
  background-position: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.guildIdentity .user-id {
  color: #2b2525; /* Slightly darker text */
}

.guildIdentity .user-info {
  display: flex;
  flex-direction: column;
}

.guildIdentity .username {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 5px;
}

.guildIdentity .user-id {
  font-size: 0.9em;
  color: #4e1a72;
}

#search-bar {
  width: calc(100% - 30px); /* Adjust width to account for padding */
  padding: 10px 15px;
  margin-bottom: 20px;
  border: 2px solid #007bff; /* Blue border */
  border-radius: 25px; /* Rounded corners */
  font-size: 1rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Add transitions */
}

#search-bar:focus {
  outline: none; /* Remove default focus outline */
  border-color: #0056b3; /* Darker blue border on focus */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* More pronounced shadow */
}

#teamsEloLabel {
  margin-bottom: 5px;
  font-size: 1em;
}

#teamElo {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 1em;
  color: #9c9c9c;
}

#teamRank {
  font-weight: bold;
  font-size: 2em;
}

#leaderboardDiv {
  justify-content: center;
  align-items: center;
  overflow-y: auto;
}

#teamsEloLabel {
  margin-bottom: 5px;
  font-size: 1em;
}

#teamElo {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 1em;
  color: #703eb1;
}

#teamRank {
  font-weight: bold;
  font-size: 2em;
}