:root {
  /* font size */
  /* small screen font sises */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 32px;
  --fs-2xl: 44px;
  --fs-3xl: 52px;

  /* large screen font sizes  */
  /* font size
        --fs-xs: 14px;
        --fs-sm: 16px;
        --fs-md: 20px;
        --fs-lg: 24px;
        --fs-xl: 48px;
        --fs-2xl: 70px;
        --fs-3xl: 96px; */

  /* color  */
  --c-error: #b11111;
  --c-gray: #cccccd;
  --c-gray-100: #d5d6d8;
  --c-gray-200: #d4d5d7;
  --c-gray-300: #ced3d8;
  --c-gray-400: #d9d9d9;
  --c-gray-500: #9b9b9b;
  --c-gray-600: #b6b6b7;
  --c-gray-700: #575759;
  --c-gray-800: #3e3e41;
  --c-gray-900: #343437;
  --c-gray-1000: #9b9b9b;
  --c-gray-1100: #39393c;
  --c-gray-1200: #cccccd99;
  --c-gray-1300: #565658;
  --c-white: #ffffff;
  --c-black-100: #0e0e11;
  --c-black-200: #1d1d20;
  --ebony-clay: #2b2b2d;
}

.c-gray {
  color: var(--c-gray);
}

.c-gray-100 {
  color: var(--c-gray-100);
}

.c-gray-200 {
  color: var(--c-gray-200);
}

.c-gray-300 {
  color: var(--c-gray-300);
}

.c-gray-400 {
  color: var(--c-gray-400);
}

.c-gray-500 {
  color: var(--c-gray-500);
}

.c-gray-600 {
  color: var(--c-gray-600);
}

.c-gray-700 {
  color: var(--c-gray-700);
}

.c-gray-800 {
  color: var(--c-gray-800);
}

.c-gray-900 {
  color: var(--c-gray-900);
}

.c-gray-1300 {
  color: var(--c-gray-1300);
}

.c-white {
  color: var(--c-white);
}

.c-black-100 {
  color: var(--c-black-100);
}

.c-black-200 {
  color: var(--c-black-200);
}
/* BACKGROUND COLORS  */
.bg-c-black-100 {
  background-color: var(--c-black-100);
}
.bg_ebony_clay {
  background-color: var(--ebony-clay);
}

.fs-xs {
  font-size: var(--fs-xs);
}

.fs-sm {
  font-size: var(--fs-sm);
}

.fs-md {
  font-size: var(--fs-md);
}

.fs-lg {
  font-size: var(--fs-lg);
}

.fs-xl {
  font-size: var(--fs-xl);
}

.fs-2xl {
  font-size: var(--fs-2xl);
}

.fs-3xl {
  font-size: var(--fs-3xl);
}

.opacity-80 {
  opacity: 80%;
}
@media (min-width: 576px) {
  :root {
    /* font size */
    --fs-xs: 14px;
    --fs-sm: 16px;
    --fs-md: 20px;
    --fs-lg: 24px;
    --fs-xl: 40px;
    --fs-2xl: 52px;
    --fs-3xl: 70px;
  }
}

@media (min-width: 768px) {
  :root {
    /* font size */
    --fs-xs: 14px;
    --fs-sm: 16px;
    --fs-md: 20px;
    --fs-lg: 24px;
    --fs-xl: 40px;
    --fs-2xl: 52px;
    --fs-3xl: 96px;
  }
}
@media (min-width: 992px) {
  :root {
    /* font size */
    --fs-xs: 14px;
    --fs-sm: 16px;
    --fs-md: 18px;
    --fs-lg: 24px;
    --fs-xl: 48px;
    --fs-2xl: 60px;
    --fs-3xl: 96px;
  }
}
@media (min-width: 1200px) {
  :root {
    /* font size */
    --fs-xs: 14px;
    --fs-sm: 16px;
    --fs-md: 20px;
    --fs-lg: 24px;
    --fs-xl: 48px;
    --fs-2xl: 70px;
    --fs-3xl: 96px;
  }
}