@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,500,700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Plus+Jakarta+Sans:300,400,500,700&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  @apply invisible-scrollbar min-h-screen w-screen overflow-x-hidden overflow-y-scroll scroll-smooth bg-zinc-900 text-white;
  position: relative;
}

body::-webkit-scrollbar,
div::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

body::-webkit-scrollbar-track,
div::-webkit-scrollbar-track {
  background-color: #202225;
}

body::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-track,
div::-webkit-scrollbar-thumb,
div::-webkit-scrollbar-track {
  border: 4px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
}

body::-webkit-scrollbar-thumb,
div::-webkit-scrollbar-thumb {
  background-color: #2f3136;
  min-height: 40px;
}

body::-webkit-scrollbar-corner,
div::body::-webkit-scrollbar-corner {
  background-color: transparent;
}