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

@layer base {
  @font-face {
    font-family: "Inter";
    src: url("/Inter.ttf") format("truetype");
  }

  html,
  body {
    margin: 0;
    height: 100%;
    overflow: hidden;

    background: black;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    display: flex;
  }
}

@layer utilities {
  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  ::-webkit-scrollbar-track {
    @apply dark:bg-transparent;
  }

  ::-webkit-scrollbar-thumb {
    @apply rounded-full bg-zinc-300 dark:bg-zinc-700;
  }

  ::-moz-selection {
    @apply bg-brand-500;
  }

  ::selection {
    @apply bg-brand-500;
  }
}

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}