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

:root {
  /* Color */
  --color-rosybrown: #a87e9d;
  --color-paleturquoise: #88fbf8;
  --color-aqua: #80faf5;
  --color-springgreen: #12ff6e;
  --color-limegreen: #08bc4e;
  --color-deepskyblue-300: #00b4e8;
  --color-deepskyblue-200: #2bcfff;
  --color-deepskyblue-100: #2bd0ff;
  --color-mediumpurple: #b79fff;
  --color-mediumslateblue: #8c68fc;
  --color-plum-200: #ffa5e1;
  --color-plum-100: #ffa6e1;
  --color-hotpink: #fe68cb;
  --color-midnightblue: #140148;
  --color-white: #fff;
  --color-lightcoral: #ff9696;
  --color-tomato: #fd6261;
  --color-yellow: #fefd4f;

  /* Gap */
  --gap-10: 0.625rem;
  --gap-16: 1rem;
  --gap-18: 1.125rem;
  --gap-24: 1.5rem;

  /* Padding */
  --padding-4: 0.25rem;
  --padding-14: 0.875rem;
  --padding-16: 1rem;
  --padding-22: 1.375rem;

  /* BorderRadius */
  --br-4: 0.25rem;
  --br-8: 0.5rem;

  /* Font */
  --font-kanit: Kanit;

  /* FontSize */
  --font-size-16: 1rem;
  --font-size-24: 1.5rem;
}