@font-face {
  font-family: "Poppins";
  src: url("/fonts/Poppins/Poppins-Medium.ttf");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/fonts/Poppins/Poppins-Bold.ttf");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

html {
  scroll-behavior: smooth;
}

::selection {
  background-color: var(--chakra-colors-emerald);
}

body::-webkit-scrollbar {
  width: 1em;
}

div::-webkit-scrollbar {
  width: 0.5em;
  height: 0.5em;
}

*::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--chakra-colors-emerald);
  border-radius: 10px;
}

body {
    /* background-color: #121212 !important; */
    overflow-x: hidden;
}

.navitem::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -32px;
    background-color: var(--chakra-colors-emerald);
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
}

#logo::before {
    bottom: -10px;
}

.navitem:hover::before {
    transform: scaleX(1);
    visibility: visible;
}

h3 {
    font-size: 24px;
}

#placeholder::before {
  content: url('/search-dark.svg');
}

#nprogress {
  height: 100%;
}

#nprogress .bar {
  height: 100%;
  background: var(--chakra-colors-emerald)
}

.hide-scrollbar {
  -ms-overflow-style: none; /* Edge, Internet Explorer */
  scrollbar-width: none; /* Firefox */
  overflow-y: scroll;
  }

.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}