/* ...


 */

@import url('https://cdn.jsdelivr.net/npm/vanilla-cookieconsent@3.1.0/dist/cookieconsent.css');
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* Overlay scrollbars - don't take up content space */
  html {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
    scrollbar-gutter: stable; /* Prevent layout shift */
  }

  /* For Webkit browsers (Chrome, Safari, Edge) */
  html::-webkit-scrollbar {
    width: 8px;
    /* Position scrollbar as overlay */
  }

  html::-webkit-scrollbar-track {
    background: transparent;
  }

  html::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.3);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background-color 0.2s ease;
  }

  html::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.6);
  }

  /* Force overlay behavior */
  * {
    scrollbar-width: thin;
  }

  /* Modern overlay scrollbars (supported in newer browsers) */
  @supports (scrollbar-gutter: stable) {
    html {
      scrollbar-gutter: stable both-edges; /* Prevent content shift */
    }
  }

  /* Alternative: Use CSS to force overlay positioning */
  body {
    position: relative;
  }

  /* Custom overlay scrollbar for specific containers if needed */
  .overlay-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
  }

  .overlay-scroll::-webkit-scrollbar {
    width: 6px;
    position: absolute;
    right: 0;
  }

  .overlay-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.3);
    border-radius: 3px;
  }
}

@layer components {
  /* Custom font classes for page titles */
  .font-title-inter {
    font-family: 'Inter', sans-serif;
  }

  .font-title-poppins {
    font-family: 'Poppins', sans-serif;
  }

  .font-title-space {
    font-family: 'Space Grotesk', sans-serif;
  }

  .font-title-mono {
    font-family: 'JetBrains Mono', monospace;
  }

  .font-title-serif {
    font-family: 'Playfair Display', serif;
  }

  /* Page title styles with different fonts */
  .page-title-inter {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: -0.025em;
  }

  .page-title-poppins {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    letter-spacing: -0.015em;
  }

  .page-title-space {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  .page-title-space-mono {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    letter-spacing: -0.05em;
  }

  .page-title-mono {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    letter-spacing: -0.01em;
  }

  .page-title-serif {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
}
.chart {
    width: 100%;
    height: 128px;
}

.chart canvas {
    width: 100%;
    height: 100%;
}

h1 {
    font-size: 1.5em;
    margin-bottom: 10px;
}