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

/*
Since `createGlobalStyle` of `styled-components` re-loads fonts in some cases (and for unknown reasons),
which ends up in flickering texts, we do defined all fonts and other "global" styles here
*/

@font-face {
  font-family: 'MainFontRegular';
  font-style: normal;
  font-weight: normal;
  src: local('MainFontRegular'), url(./assets/fonts/Exo2-Regular.otf) format('opentype');
}
@font-face {
  font-family: 'MainFontBold';
  font-style: normal;
  font-weight: normal;
  src: local('MainFontBold'), url(./assets/fonts/Exo2-Bold.otf) format('opentype');
}
@font-face {
  font-family: 'MainFontSemiBold';
  font-style: normal;
  font-weight: normal;
  src: local('MainFontSemiBold'), url(./assets/fonts/Exo2-SemiBold.otf) format('opentype');
}

html,
body {
  margin: 0;
  font-family: 'MainFontRegular';
}

@layer components {
  .card {
    @apply rounded-[5px] border border-solid border-gray0 bg-bg0 p-[24px] dark:border-gray0d dark:bg-bg0d;
  }
  /* default ease */
  .ease {
    @apply transition duration-300 ease-in-out;
  }
}

/* Custom Scrollbar for WebKit Browsers */
::-webkit-scrollbar {
  width: 6px; /* Width of the scrollbar */
  height: 6px; /* Height of the scrollbar */
}

::-webkit-scrollbar-track {
  background: #f1f1f1; /* Background of the scrollbar track */
  border-radius: 10px; /* Rounded corners */
}

::-webkit-scrollbar-thumb {
  background: #888; /* Color of the scrollbar thumb */
  border-radius: 10px; /* Rounded corners */
}

::-webkit-scrollbar-thumb:hover {
  background: #555; /* Color of the thumb on hover */
}
