html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  line-height: normal;
}

:root {
  /* Common Style Variables */

  /* Color */
  --color-aliceblue: #edf2f8;
  --color-azure: #e6f4f6;
  --color-black: #000;
  --color-cadetblue: #459ca8;
  --color-darkslateblue: #00569d;
  --color-gainsboro: #ccdbde;
  --color-gray: #808080;
  --color-steelblue: #267dc4;
  --color-teal: #1e7683;
  --color-white: #fff;

  /* Gap */
  --gap-14: 14px;
  --gap-20: 20px;
  --gap-24: 24px;

  /* Padding */
  --padding-0: 0;
  --padding-01: 0px;
  --padding-2: 2px;
  --padding-3: 3px;
  --padding-4: 4px;
  --padding-5: 5px;
  --padding-6: 6px;
  --padding-11: 11px;
  --padding-12: 12px;
  --padding-14: 14px;
  --padding-16: 16px;
  --padding-20: 20px;
  --padding-22: 22px;
  --padding-24: 24px;
  --padding-40: 40px;

  /* BorderRadius */
  --br-0: 0px;
  --br-10: 10px;

  /* Font */
  --font-inherit: inherit;
  --font-inter: Inter;

  /* FontSize */
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-19: 19px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-32: 32px;
  --fs-36: 36px;
  --fs-40: 40px;

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

  /* Shadows */
  --text-shadow-1:
    1px 0 0 var(--color-aliceblue), 0 1px 0 var(--color-aliceblue),
    -1px 0 0 var(--color-aliceblue), 0 -1px 0 var(--color-aliceblue);

  /* WidthHeights */
  --height-36: 36px;
  --height-40: 40px;
  --height-64: 64px;
  --height-auto: auto;
  --width-40: 40px;
  --width-250: 250px;
  --width-500: 500px;
  --width-600: 600px;
  --width-1440: 1440px;
}