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

body {
  font-variant-numeric: tabular-nums;
  font-family: "Twemoji Country Flags", 'poppins', sans-serif;
  height: 100vh;
  width: 100vw;
  user-select: none;
  background: theme('colors.background.20');
}

@font-face {
  font-family: "Twemoji Country Flags";
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067,
    U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  src: url('/fonts/TwemojiCountryFlags.woff2') format('woff2');
  font-display: swap;
}

html {
  overflow: hidden;
  background: theme('colors.background.20');
}

#root {
  height: 100%;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 50px;
}

::-webkit-scrollbar-thumb {
  background: theme('colors.background.50');
  border-radius: 50px;
}

::-webkit-scrollbar-thumb:hover {
  background: theme('colors.background.60');
}

input::-ms-reveal,
input::-ms-clear {
  display: none;
}
