/* Style for the stats section */
  .stats {
    margin-bottom: 32px;
    width: 40%;
    display: contents;
    justify-content: space-between; /* Align boxes in a row with space between them */
}

.stats-content {
    display: flex;
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center the content vertically */
}

/* Style for stats line */
.stats-line {
    display: flex;
    flex: 1;
    justify-content: space-between;
    margin-bottom: 20px;
}


/* Style for each stats item */
.stats-item.games-played { /* 1. */
    display: flex;
    flex: 1;
    flex-direction: column;
    text-transform: capitalize;
    align-items: center;
    justify-content: center;
    height: 80px;
    width: 90px; /* Adjust the width as needed */
    margin-right: 8px;
    background-color: #0E0E0F;
    border-radius: 6px;
    box-sizing: border-box; /* Box-sizing to include padding in width */
    line-height: 1; /* Adjust the line-height for proper vertical alignment */
}

.stats-item.win-nb { /* 2. */
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-transform: capitalize;
    height: 80px;
    width:  90px; /* Adjust the width as needed */
    margin-right: 8px;
    background-color: #0E0E0F;
    border-radius: 6px;
    box-sizing: border-box; /* Box-sizing to include padding in width */
    line-height: 1.2; /* Adjust the line-height for proper vertical alignment */
}

.stats-item.current-streak { /* 3. and 4. */
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 80px;
    width: 90px; /* Adjust the width as needed */
    margin-right: 8px;
    background-color: #0E0E0F;
    border-radius: 6px;
    box-sizing: border-box; /* Box-sizing to include padding in width */
    line-height: 1.2; /* Adjust the line-height for proper vertical alignment */
}
.stats-item.beststreak { /* 3. and 4. */
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-transform: capitalize;
  height: 80px;
  width:  90px; /* Adjust the width as needed */
  margin-right: 8px;
  background-color: #0E0E0F;
  border-radius: 6px;
  box-sizing: border-box; /* Box-sizing to include padding in width */
  line-height: 1.2; /* Adjust the line-height for proper vertical alignment */
}

.stats-item.highrarity { /* 5. */
  display: flex;
  flex: 1;
  flex-direction: column;
  text-transform: capitalize;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 90px; /* Adjust the width as needed */
  margin-right: 8px;
  background-color: #0E0E0F;
  border-radius: 6px;
  box-sizing: border-box; /* Box-sizing to include padding in width */
  line-height: 1; /* Adjust the line-height for proper vertical alignment */
}

.stats-item.lowrarity { /* 6. */
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-transform: capitalize;
  height: 80px;
  width:  90px; /* Adjust the width as needed */
  margin-right: 8px;
  background-color: #0E0E0F;
  border-radius: 6px;
  box-sizing: border-box; /* Box-sizing to include padding in width */
  line-height: 1.2; /* Adjust the line-height for proper vertical alignment */
}

.stats-item.averagerarity { /* 7. */
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: center;
text-transform: capitalize;
height: 80px;
width:  90px; /* Adjust the width as needed */
margin-right: 8px;
background-color: #0E0E0F;
border-radius: 6px;
box-sizing: border-box; /* Box-sizing to include padding in width */
line-height: 1.2; /* Adjust the line-height for proper vertical alignment */
}

.stats-item.averageguessesleft { /* 8. */
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 90px; /* Adjust the width as needed */
  margin-right: 8px;
  background-color: #0E0E0F;
  border-radius: 6px;
  box-sizing: border-box; /* Box-sizing to include padding in width */
  line-height: 1.2; /* Adjust the line-height for proper vertical alignment */
}



/* Style for stat item figure */
.stats-item .stat-item-figure {
    font-size: 16px; /* Adjust the font size */
    text-transform: capitalize;
    font-weight: bold;
    color: #3EAA42;
}

/* Style for stat item label */
.stats-item .stat-item-label {
    font-size: 10px; /* Adjust the font size */
    color: white;
    text-transform: capitalize;
    margin-top: 5px; /* Adjust the margin as needed */
}

@media (max-width: 380px) {
  .stats-content {
      flex-direction: column;
  }

  .stats-content {
      flex: none; /* Remove flex property to allow content to shrink */
      width: 100%; /* Take up the full width of the container */
      margin-right: 0;
      margin-bottom: 8px; /* Add some spacing between stats boxes */
  }
}




/* Style for the performance graph */
.graph {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.graph-content {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.graph-item {
  margin-top: 8px;
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: white;
  }

  .attempt-number,
  .attempt-skull {
    width: 18px;
    display: flex;
    align-items: center;
    color: #000000;
  }

  .attempt-skull .icon {
    height: 12px;
  }

  .attempt-stat {
      height: 17px;
      width: 100%;
      font-weight: bold;
      font-size: 14px; /* Adjust the font size as needed */
      color: #3498db; /* Adjust color using your preferred hex or named color */
  }
    .attempt-bar {
      height: 100%;
      background: #41b845;
      color: rgb(18, 17, 17);
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      font-weight: bolder;
      font-size: 10px;
      font-weight: 400;
      display: flex;
      box-sizing: border-box;
      padding: 0 6px;
      justify-content: flex-end;
      align-items: center;
      min-width: 28px;
      border-radius: 3px;
  }
      .best {
        background: #41b845;
      }
    











/* Style for soluce section */
.soluce {
    text-align: center;
    margin-top: 10px; /* Adjust the top margin as needed */
}

/* Style for subtitle */
.soluce .subtitle {
    font-size: 10px; /* Adjust the font size as needed */
    color: #555; /* Adjust the color as needed */
}

/* Style for h2 */
.soluce h3 {
    font-size: 24px; /* Adjust the font size as needed */
    color: #000000; /* Adjust the color as needed */
    margin-top: 0px;
}

/* Style for modal-footer */
.soluce .modal-footer {
    margin-top: 20px; /* Adjust the top margin as needed */
}

/* Style for next-in */
.soluce .next-in {
    font-size: 14px; /* Adjust the font size as needed */
    color: #555; /* Adjust the color as needed */
}

/* Style for time */
.soluce .time {
    font-size: 18px; /* Adjust the font size as needed */
    color: #ff4500; /* Adjust the color as needed */
}

    /* Change cursor to pointer for clickable elements */
    .logos img, .logos a {
        cursor: pointer;
      }

/* Style for the close button */
.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    height: 10px;
    width: 10px;
}




.cta-button {
  background-color: #2196f3; /* Button background color */
  color: #fff; /* Button text color */
  padding: 10px 20px; /* Adjust padding as needed */
  border: none;
  border-radius: 5px;
  margin-top: 20px;
  cursor: pointer;
  font-size: 16px;
}

.cta-button:hover {
  background-color: #1565c0; /* Hover background color */
}