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

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

@layer components {
  .text-10{
    @apply text-[10px];
  }
  .text-14 {
    @apply text-[12px] 2xl:text-[14px];
  }
  .text-17 {
    @apply text-[14px] 2xl:text-[17px];
  }
  .text-18 {
    @apply text-[16px] 2xl:text-[18px];
  }
  .text-20 {
    @apply text-[18px] 2xl:text-[20px];
  }
  .text-24 {
    @apply text-[20px] 2xl:text-[24px];
  }
  .text-32 {
    @apply text-[25px] 2xl:text-[32px];
  }
  .text-36 {
    @apply text-[28px] 2xl:text-[36px];
  }
  .text-40 {
    @apply text-[32px] 2xl:text-[40px];
  }
  .text-48 {
    @apply text-[36px] 2xl:text-[48px];
  }
  .text-69 {
    @apply text-[32px] 2xl:text-[65px];
  }
  .text-36 {
    @apply text-[28px] 2xl:text-[36px];
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@media (max-width: 639px) {
  .container {
    max-width: calc(100% - 5rem);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media (min-width: 640px) {
  .container {
    max-width: calc(640px - 5rem);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: calc(768px - 5rem);
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: calc(1024px - 5rem);
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: calc(1280px - 5rem);
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media (min-width: 1400px) {
  .container {
    max-width: calc(1400px - 5rem);
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

* {
  scroll-behavior: smooth;

}

/* // <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900 */

body {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.hideScroll::-webkit-scrollbar{
  display: none;
}