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

@font-face {
    font-family: "PretendardBold";
    font-weight: 300;
    src: url("/fonts/Pretendard-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "PretendardSemiBold";
    font-weight: 300;
    src: url("/fonts/Pretendard-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: "PretendardMedium";
    font-weight: 300;
    src: url("/fonts/Pretendard-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "PretendardRegular";
    font-weight: 300;
    src: url("/fonts/Pretendard-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "PretendardLight";
    font-weight: 300;
    src: url("/fonts/Pretendard-Light.woff2") format("woff2");
}

/* Custom scrollbar styles */
::-webkit-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #888;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Custom styles */
html,
body {
    background: #fff;
}

/* App loading */
.loading-dots {
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-dots div {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: #0096dc;
  border-radius: 50%;
  animation: bounce 0.9s infinite alternate;
}
.loading-dots div:nth-child(2) {
  animation-delay: 0.3s;
}
.loading-dots div:nth-child(3) {
  animation-delay: 0.6s;
}
@keyframes bounce {
  to {
      opacity: 0.3;
      transform: translate3d(0, -16px, 0);
  }
}