:root {
  // Responsive Container Width
  --container-width: 100%;
  --container-sm: 33.75rem;
  --container-md: 45rem;
  --container-lg: 60rem;
  --container-xl: 71.25rem;
  --container-xxl: 90rem;
  --container-fluid: 100%;

  // Gutters
  --gutter-x: 1.875rem;
  --gutter-3: 0.125rem;
  --gutter-5: 0.225rem;
  --gutter-10: 0.625rem;
  --gutter-15: 0.9375rem;
  --gutter-20: 1.25rem;
  --gutter-25: 1.5625rem;
  --gutter-30: 1.875rem;
  --gutter-32: 2rem;
  --gutter-35: 2.1875rem;
  --gutter-40: 2.5rem;
  --gutter-45: 2.8125rem;
  --gutter-50: 3.125rem;

  //Font Family
  --ff-roboto: "Roboto", sans-serif;
  ;

  // Font Weight
  --fw-100: 100;
  --fw-200: 200;
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;

  // Font Size
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-17: 1.0625rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-21: 1.3125rem;
  --fs-24: 1.5rem;
  --fs-25: 1.5625rem;
  --fs-28: 1.75rem;
  --fs-30: 1.875rem;
  --fs-32: 2rem;
  --fs-35: 2.1875rem;
  --fs-40: 2.5rem;
  --fs-45: 2.8125rem;

  // hr
  --hr-bg: var(--clr-black);
  --hr-width: 100%;
  --hr-height: 0.3125rem;
  --hr-gutter-y: 1.875rem;
  --hr-gutter-x: 0;
  --hr-padding: 0;
  --hr-radius: 0;

  // Margin
  --m: 0;
  --mt: 0;
  --mr: 0;
  --mb: 0;
  --ml: 0;
  --mx: 0;
  --my: 0;
  --m-auto: auto;
  --my-auto: auto;
  --mx-auto: auto;

  // Padding
  --p: 0;
  --pt: 0;
  --pr: 0;
  --pb: 0;
  --pl: 0;
  --px: 0;
  --py: 0;
  --p-auto: auto;
  --py-auto: auto;
  --px-auto: auto;

  // Border
  --border-width: 0.0625rem;
  --border-style: solid;
  --border-clr: transparent;
  --border: var(--border-width) var(--border-style) var(--border-clr);
  --border-t: var(--border-width) var(--border-style) var(--border-clr);
  --border-r: var(--border-width) var(--border-style) var(--border-clr);
  --border-b: var(--border-width) var(--border-style) var(--border-clr);
  --border-l: var(--border-width) var(--border-style) var(--border-clr);
  --border-x: var(--border-width) var(--border-style) var(--border-clr);
  --border-y: var(--border-width) var(--border-style) var(--border-clr);

  // Border Radius
  --radius: 0;
  --radius-t: 0;
  --radius-r: 0;
  --radius-b: 0;
  --radius-l: 0;
  --radius-full: 50%;

  // Button Component
  --btn-bg: transparent;
  --btn-clr: inherit;
  --btn-ff: var(--ff-roboto);
  --btn-fs: var(--fs-15);
  --btn-py: 0.625rem;
  --btn-px: 1.125rem;
  --btn-my: var(--my);
  --btn-mx: var(--mx);

  // Color
  --clr-black: #000;
  --clr-black-100: #0D0E2B;
  --clr-dark: #252733;
  --clr-text: #575766;
  --clr-text-light: #9199A1;
  --clr-white: #fff;
  --clr-blue: #4C4CF1;
  --black_50: #ebebeb;
  --black_100: #d6d9dc;
  --black_150: #c8ccd0;
  --black_200: #bbc0c4;
  --black_300: #9fa6ad;
  --black_350: #9199a1;
  --black_400: #848d95;
  --black_500: #6a737c;
  --black_600: #535a60;
  --black_700: #3c4146;
  --black_750: #2f3337;
  --black_800: #242729;
  --black_900: #0c0d0e;
}