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

:root {
  --main-color: #ffffff;
  --border-color: rgba(0,0,0,0.1);
  --text-color: #35495E;
  --text-color-light: #587da3;
  --green: #388E3C;
  --main-color-d: #171717;
  --border-color-d: rgba(255, 255, 255, 0.1);
  --text-color-d: #e0e0e0;
  --green-d: #41b883;
}

html, body{
  width: 100%;
  height: 100%;
  font-family: 'Open Sans', sans-serif;
  overflow-x: hidden;
}
*{
  outline: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  scroll-behavior: smooth;
}
*:focus {
  outline: 0 !important;
  box-shadow: none !important;
}

*::-webkit-scrollbar{
  @apply w-[4px] sm:w-[6px] bg-transparent
}
*::-webkit-scrollbar-thumb{
  @apply bg-black/[0.2] dark:bg-white/[0.2] rounded-full
}
*::-webkit-scrollbar-thumb:hover{
  @apply bg-black/[0.4] dark:bg-white/[0.4]
}

/* apply mozila specific style to scrollbar */
@-moz-document url-prefix() {
  body * {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.2) transparent;
  }
  @media (prefers-color-scheme: dark) {
    body * {
      scrollbar-color: rgba(255,255,255,.2) transparent;
    }
  }
}

.lines { @apply border-[--border-color] dark:border-[--border-color-d]}