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

:root {
  /* green */
  /* --bulma-primary-h: 156deg;
  --bulma-primary-s: 14%;
  --bulma-primary-l: 21%; */
  /* yellow */
  /* --bulma-primary-h: 54deg;
  --bulma-primary-s: 100%;
  --bulma-primary-l: 67%; */
  /* blue */
  --bulma-primary-h: 220deg;
  --bulma-primary-s: 40%;
  --bulma-primary-l: 10%;
  /* red */
  /* --bulma-primary-h: 360deg;
  --bulma-primary-s: 20%;
  --bulma-primary-l: 30%; */
  --fontcolor: var(--bulma-primary-soft);
  --panelcolor: var(--bulma-primary-bold);
  --cardcolor: var(--bulma-primary-invert);
  --backgroundcolor:  var(--bulma-primary-base);
}


html, body {
  background-color: var(--backgroundcolor);
  height: 100%;
  min-height:100vh;
  margin: 0;
  padding: 0;
}

.card {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  margin-top: 2.5rem;
  padding: 2.5rem 3rem;
  border-radius: 2rem;
}

* {
  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(--cardcolor);
  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);

  width: 400px;
}

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