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


@layer components {
  .container {
    @apply w-full mx-auto max-w-[1440px];
  }
}

/* width */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background: #0D1524;
}

/* Track */
::-webkit-scrollbar-track {
  background: #0D1524;
  border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #2b7ee2;
  border-radius: 5px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: #0b192f;
}

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

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0;
  /* <-- Apparently some margin are still there even though it's hidden */
}

input[type="number"] {
  -moz-appearance: textfield;
  /* Firefox */
}

.text-gradient {
  background: -webkit-linear-gradient(135deg, #2BBAF7, #0047CA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}