src/styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-color: rgb(89, 103, 122);
  --background-color: rgb(248, 247, 253);
  --container-color: rgb(255, 255, 255);
  --primary-color: rgb(255, 127, 101);
  --primary-bg: #ff985c4d;
  --title-color: rgb(55, 67, 86);
  --text-color: rgb(94, 92, 127);
  --text-secondary: rgb(103, 117, 134);
  --stroke-color: #e7e7e7;
  --dots: url('../assets/dots-light.svg');
}

.dark {
  --foreground-color: rgb(143, 162, 187);
  --background-color: rgb(34, 40, 49);
  --container-color: rgb(46, 53, 65);
  --primary-color: rgb(255, 159, 140);
  --title-color: rgb(189 206 233);
  --text-color: rgb(164, 181, 208);
  --text-secondary: rgb(127, 145, 171);
  --stroke-color: rgb(62, 68, 78);
  --dots: url('../assets/dots-dark.svg');

}

body {
  color: var(--foreground-color);
  background: var(--background-color);

}

html {
  scroll-behavior: smooth;
  /* -ms-overflow-style: none;
  scrollbar-width: none; */
  letter-spacing: .3px;
}

@font-face {
  font-family: 'Font Awesome 6 Duotone';
  src: url('/webfonts/fa-duotone-900.woff2') format('woff2'); /* Tanpa '/public' */
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


@layer utilities {
  .toggle {
    @apply top-5 rounded-lg fixed cursor-pointer h-10 w-fit px-3 bg-container text-text border border-stroke flex justify-center items-center z-10 transition-all duration-300 ease-in-out;
  }

  .transition-3s {
    @apply transition-all duration-300 ease-in-out
  }

  .card {
    @apply px-4 py-3 rounded-xl bg-container border border-stroke transition-3s
  }

  .btn {
    @apply px-5 py-3 leading-4 rounded-md shadow-sm border border-[#febe82] dark:border-[#ff77134c] bg-[#ffbcaa61] dark:bg-[#f7b8a4] text-[#ff784f] dark:text-[#e04848] flex gap-2 items-center font-normal w-fit hover:border-primary transition-3s
  }

  .hr {
    @apply border-stroke mt-5 mb-6;
  }

  .dots {
    @apply before:content-[''] before:absolute before:bg-dots before:h-9 before:w-9 before:-left-3 before:-top-3 before:-z-[1]
  }

  .form-input {
    @apply absolute top-0 left-0 w-full h-full border border-slate-400 dark:border-stroke bg-background text-text rounded-xl p-6 z-[1] focus:outline outline-slate-400 dark:focus:outline-slate-500;
  }

  .form-label {
    @apply absolute -top-4 left-5 px-2 py-1 bg-background z-[2];
  }

  .form-control {
    @apply relative mb-6 h-16 w-full;
  }

  .timeline {
    @apply before:content-[''] before:w-[1px] before:h-full before:absolute before:left-1 before:top-0 before:bg-primary
  }

  .badge {
    @apply flex gap-2 whitespace-nowrap items-center py-2 px-3 border border-stroke rounded-md bg-container text-text
  }

  .scroll {
    @apply relative flex w-full overflow-hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
  }

  .scroll-content {
    white-space: nowrap;
  }

  .reverse {
    animation-direction: reverse;
  }

  .loop-delay-1 {
    animation-delay: calc(var(--time)*-1);
  }

  .loop-delay-2 {
    animation-delay: calc(var(--time)/-2);
  }
}

.scroll:hover * {
  animation-play-state: paused;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.active::before {
  content: "";
  position: absolute;
  right: 0;
  width: 0.25rem;
  height: 2.6845rem;
  border-radius: 0.375rem 0 0 0.375rem;
  background-color: var(--primary-color);
}

.btn:hover i {
  transform: rotate(-10deg);
  transition: ease-out .2s;
  scale: 1.05;
}

::-webkit-scrollbar {
  @apply w-1;
}

::-webkit-scrollbar-track {
  @apply rounded-[3px] bg-transparent;
}

::-webkit-scrollbar-thumb {
  @apply rounded-[3px] border-2 border-stroke bg-slate-400 dark:bg-slate-500;
}

@media screen and (max-width: 1024px) {
  .active::before {
    background-color: transparent;
  }
}

/* NProgress */
#nprogress .bar {
  background: var(--primary-color) !important;
  height: 3px !important;
  position: fixed !important;
  z-index: 9999999 !important;
}

#nprogress .peg {
  box-shadow: none !important;
}
