@font-face {
    font-family: "Sixtyfour";
    src: url("/static/fonts/sixtyfour.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

:root {
    --bgcolor: #1C1C1C;
    --card-color: #1C1C1C;
    --panelcolor: #CACDD6;
    --fontcolor: #1C202F;
    --fontcolordark: #949191;
}

html, body {
  height: 100%;
  min-height:100vh;
  margin: 0;
  padding: 0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Sixtyfour", sans-serif;

  --bulma-tabs-link-color: #595d6c;
  --bulma-tabs-link-active-border-bottom-color: #CACDD6;
  --bulma-tabs-link-active-color: #CACDD6;
}

section.section .container {
  max-width: 1000px !important;
}

.card {
  background-color: var(--card-color);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  margin-top: 2.5rem;
  padding-left: 3rem;
  padding-right: 3rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* === Tooltip styling for badge icons === */
.custom-tooltip-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.custom-tooltip {
  visibility: hidden;
  background-color: #21232B;
  color: #fff;
  text-align: center;
  padding: 20px 20px 15px;
  border-radius: 8px;
  position: absolute;
  font-size: 0.8em;
  border: 1px solid black;
  z-index: 10;

  /* Positioning */
  bottom: 100%; /* Show above the badge */
  left: 50%;
  transform: translateX(-50%) translateY(-10px);

  /* Automatically size the tooltip based on its content. Using max-content
     ensures the tooltip grows to fit the widest row without constraining to
     the parent width. */
  width: max-content;
}

.custom-tooltip-container:hover .custom-tooltip {
  visibility: visible;
}

/* === Styling for tooltip tables generated via JavaScript === */
/* The .tooltip-table uses CSS grid to align three columns across all rows.
   Using max-content ensures that each column's width is determined by the widest
   cell in that column, similar to a <table>. */
.custom-tooltip .tooltip-table {
  display: grid;
  grid-template-columns: max-content max-content max-content;
  gap: 0.25rem 0.5rem;
  /* Left align by default */
  text-align: left;
}
.custom-tooltip .tooltip-table span {
  padding: 0 0.25rem;
}
/* Align the second column (rank) to the right and the third column (rate) to the left */
.custom-tooltip .tooltip-table span:nth-child(3n+2) {
  text-align: right;
}
.custom-tooltip .tooltip-table span:nth-child(3n+3) {
  text-align: left;
}