@import "./reset.css";
@import "./variables.css";

html {
  scroll-behavior: smooth;
}

body {
  font-size: 16px;
  scrollbar-width: thin;
  font-family: "Noto Sans JP", sans-serif;
  scrollbar-color: var(--cl-gray-500) transparent;
  color: rgb(0, 0, 0);
}

::-webkit-scrollbar {
  /* min-width: 16px; */
}

::-webkit-scrollbar-thumb {
  box-shadow: none;
  background-color: var(--cl-gray-500);
  height: 56px;
  border-radius: 0px;
  border: 4px solid transparent;
  background-clip: content-box;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-internal-autofill-selected {
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
  -webkit-text-fill-color: white;
  caret-color: white !important;
}

.invisible-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge cũ */
}
.invisible-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge mới */
}

.fade {
  opacity: 1;
  transition: opacity 0.5s ease; /* Thời gian và kiểu chuyển động */
}

.fade.hidden {
  opacity: 0;
}

.font-padding {
  padding-bottom: 2px;
}