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

@media screen and (max-width: 1024px) {
  .custom-color-picker .react-colorful {
    width: 270px;
    height: 270px;
  }
}

@media screen and (max-width: 700px) {
  .custom-color-picker .react-colorful {
    width: 270px;
    height: 270px;
  }
}

@layer components {
  .custom-color-picker .react-colorful {
    width: 400px;
    height: 400px;
  }
}

:root {
  --foreground-rgb: 255, 255, 255;
  --background-start-rgb: 0, 0, 0;
  --background-end-rgb: 0, 0, 0;
  --radius: 0.5rem;
}

body {
  color: rgb(var(--foreground-rgb));
  overflow-x: hidden;
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

/* globals.css */

/* Light mode styles (default) */
/* body {
  background-color: #ffffff;
  color: #000000;
} */

/* Customized Scrollbar */
@layer utilities {
  .scrollbar::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .scrollbar::-webkit-scrollbar-track {
    border-radius: 100vh;
    background: #1f2937;
    height: 10px;
  }

  .scrollbar::-webkit-scrollbar-thumb {
    background: #eff4ff;
    border-radius: 100vh;
    border: 1px solid #0b61ff;
  }

  .scrollbar::-webkit-scrollbar-thumb:hover {
    background: #000000;
  }
}
