@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 255, 255, 255;
  --background-start-rgb: 13, 17, 23;
  --background-end-rgb: 22, 27, 34;
  --accent-color: 88, 166, 255;
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
  font-family: 'Press Start 2P', cursive;
}

@layer base {
  h1, h2, h3, h4, h5, h6 {
    @apply font-bold mb-4;
  }

  h1 {
    @apply text-3xl md:text-4xl;
  }

  h2 {
    @apply text-2xl md:text-3xl;
  }

  h3 {
    @apply text-xl md:text-2xl;
  }
}

@layer components {
  .btn {
    @apply px-4 py-2 rounded-md font-bold transition-colors duration-200;
  }

  .btn-primary {
    @apply bg-blue-500 text-white hover:bg-blue-600;
  }

  .btn-secondary {
    @apply bg-gray-700 text-white hover:bg-gray-600;
  }

  .card {
    @apply bg-gray-800 rounded-lg shadow-lg p-6;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  .neon-text {
    text-shadow: 0 0 5px rgb(var(--accent-color)), 0 0 10px rgb(var(--accent-color)), 0 0 15px rgb(var(--accent-color));
  }

  .neon-border {
    box-shadow: 0 0 5px rgb(var(--accent-color)), 0 0 10px rgb(var(--accent-color));
  }
}


.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #2d3748;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #4a5568;
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #718096;
}