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


:root {
  	
  	/* Common Style Variables */
  	
  	/* Color */
  	--color-darkgray: #afafaf;
  	--color-darkgreen-100: #2e7d32;
  	--color-darkgreen-200: #1e5d20;
  	--color-darkolivegreen: #556b2f;
  	--color-darkslategray-100: #333;
  	--color-darkslategray-200: #1a2e1a;
  	--color-firebrick: #d32f2f;
  	--color-forestgreen: #2a8527;
  	--color-gainsboro: #e0e0e0;
  	--color-gold: #ffc107;
  	--color-goldenrod: #ffd54f;
  	--color-gray: #757575;
  	--color-lavenderblush: #ffebee;
  	--color-lemonchiffon: #f7ffc3;
  	--color-white: #fff;
  	--color-whitesmoke: #f5f5f5;
  	
  	/* Gap */
  	--gap-4: 4px;
  	--gap-8: 8px;
  	--gap-12: 12px;
  	--gap-16: 16px;
  	--gap-20: 20px;
  	--gap-24: 24px;
  	--gap-28: 28px;
  	--gap-32: 32px;
  	
  	/* Padding */
  	--padding-0: 0px;
  	--padding-8: 8px;
  	--padding-10: 10px;
  	--padding-12: 12px;
  	--padding-16: 16px;
  	--padding-20: 20px;
  	--padding-24: 24px;
  	--padding-32: 32px;
  	--padding-64: 64px;
  	
  	/* BorderRadius */
  	--br-8: 8px;
  	
  	/* Font */
  	--font-inter: Inter, Arial, sans-serif;
  	
  	/* FontSize */
  	--fs-13: 13px;
  	--fs-14: 14px;
  	--fs-15: 15px;
  	--fs-16: 16px;
  	--fs-18: 18px;
  	--fs-20: 20px;
  	--fs-24: 24px;
  	--fs-32: 32px;
  	
  	/* Borders */
  	--border-1: 1px solid var(--color-gainsboro);
  	
  	/* WidthHeights */
  	--height-20: 20px;
  	--width-20: 20px;
  	
}