body {
  margin: 0;
  padding: 0;
  line-height: normal;
  background-color: var(--color-white);
  font-family: "Hanken Grotesk", sans-serif;
}

:root {
  /* Common Style Variables */

  /* Color */
  --color-black: #000;
  --color-chocolate: #f47521;
  --color-darkgray: #a6a6a6;
  --color-gray: #1c1404;
  --color-gray-100: #3a1600;
  --color-gray-200: #1c1404;
  --color-gray-300: rgba(0, 0, 0, 0.35);
  --color-saddlebrown: #692700;
  --color-sandybrown: #f4965e;
  --color-white: #fff;
  --color-whitesmoke: #f9f9f9;
  --color-chocolate1: #e47c3a;
  --color-seashell: #fef4ef;

  /* Gap */
  --gap-5: 5px;
  --gap-10: 10px;
  --gap-16: 16px;
  --gap-20: 20px;
  --gap-24: 24px;
  --gap-40: 40px;

  /* Padding */
  --padding-8: 8px;
  --padding-10: 10px;
  --padding-12: 12px;
  --padding-14: 14px;
  --padding-20: 20px;
  --padding-30: 30px;
  --padding-40: 40px;

  /* BorderRadius */
  --br-0: 0px;
  --br-5: 5px;
  --br-10: 10px;
  --br-16: 16px;
  --br-25: 25px;

  /* Font */
  --font-hanken-grotesk: Hanken Grotesk;
  --font-inherit: inherit;

  /* FontSize */
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-30: 30px;

  --fs-36: 36px;
  --fs-60: 60px;

  /* Borders */
  --border-1: 1px solid var(--color-black);
}