@layer base {
  /* light mode */
  :root {
    --color-primary: 37 99 235;
    --color-secondary: 29 29 29; 
    --color-success: 58 170 68; 
    --color-backgroundColor: 255 255 255; 
    --color-backgroundSubColor: 193 193 193; 
    --color-backgroundThirdColor: 112 112 112; 
  }
  /* //light mode */

  /* dark mode */
  :root[class~='dark'] {
    --color-primary: 37 99 235; 
    --color-secondary: 225 225 225; 
    --color-success: 58 170 68; 
    --color-backgroundColor: 0 0 0; 
    --color-backgroundSubColor: 29 29 29; 
    --color-backgroundThirdColor: 112 112 112; 
  }
  /* //dark mode */
}

html {
  scroll-behavior: smooth;
}

:target {
  scroll-margin-top: 50px;
}

:root {
  --swiper-navigation-size: 16px;
  --swiper-navigation-color: #eaeaea;
  --swiper-pagination-color: #de2222;
  --swiper-pagination-bullet-inactive-color: #c1c1c1;
  --swiper-pagination-bullet-inactive-opacity: 0.8;
}

.text-stroke-white {
  -webkit-text-stroke: 1px #ffffff;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #1e1e1e;
  border-radius: 10px;
  background-clip: padding-box;
  border: 2px solid transparent;
}

::-webkit-scrollbar-track {
  background-color: #707070;
  border-radius: 2px;
}