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


:root {
  	
  	/* Common Style Variables */
  	
  	/* Color */
  	--color-darkgray-100: #afafaf;
  	--color-darkgray-200: #acacac;
  	--color-darkgreen-100: #2e7d32;
  	--color-darkgreen-200: #1e5d20;
  	--color-darkolivegreen-100: #556b2f;
  	--color-darkolivegreen-200: #465d36;
  	--color-darkseagreen: #81c784;
  	--color-darkslategray-100: #333;
  	--color-darkslategray-200: #1a2e1a;
  	--color-firebrick-100: #d32f2f;
  	--color-firebrick-200: #b50000;
  	--color-floralwhite: #fffdf2;
  	--color-forestgreen-100: #4caf50;
  	--color-forestgreen-200: #2a8527;
  	--color-gainsboro: #e0e0e0;
  	--color-gold: #ffc107;
  	--color-honeydew: #e8f5e9;
  	--color-lemonchiffon: #f7ffc3;
  	--color-lightgoldenrodyellow: #d2ffc8;
  	--color-lightgreen-100: #c9ffb1;
  	--color-lightgreen-200: #94de8e;
  	--color-lightyellow: #fffee4;
  	--color-maroon: #6d0000;
  	--color-palegreen: #c7ff82;
  	--color-red: #e90000;
  	--color-seagreen: #398b40;
  	--color-white: #fff;
  	
  	/* Gap */
  	--gap-4: 4px;
  	--gap-8: 8px;
  	--gap-16: 16px;
  	--gap-20: 20px;
  	--gap-24: 24px;
  	--gap-32: 32px;
  	
  	/* Padding */
  	--padding-0: 0px;
  	--padding-4: 4px;
  	--padding-8: 8px;
  	--padding-12: 12px;
  	--padding-16: 16px;
  	--padding-24: 24px;
  	--padding-32: 32px;
  	--padding-36: 36px;
  	--padding-40: 40px;
  	--padding-48: 48px;
  	--padding-64: 64px;
  	
  	/* BorderRadius */
  	--br-4: 4px;
  	--br-8: 8px;
  	--br-12: 12px;
  	--br-14: 14px;
  	--br-1000: 1000px;
  	
  	/* Font */
  	--font-inherit: inherit, Arial, sans-serif;
  	--font-inter: Inter, Arial, sans-serif;
  	
  	/* FontSize */
  	--fs-14: 14px;
  	--fs-16: 16px;
  	--fs-18: 18px;
  	--fs-20: 20px;
  	--fs-24: 24px;
  	--fs-30: 30px;
  	--fs-32: 32px;
  	
  	/* Borders */
  	--border-1: 1px solid var(--color-gainsboro);
  	
  	/* Shadows */
  	--shadow-drop: 0px 4px 4px rgba(0, 0, 0, 0.25);
  	--text-shadow-1: 2px 0 0 var(--color-white), 0 2px 0 var(--color-white), -2px 0 0 var(--color-white), 0 -2px 0 var(--color-white);
  	
  	/* WidthHeights */
  	--height-5: 5px;
  	--height-28: 28px;
  	--width-2: 2px;
  	--width-28: 28px;
  	--width-110: 110px;
  	
  	/* LineHeights */
  	--lh-32: 32px;
  	
}

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


:root {
  	
  	/* Common Style Variables */
  	
  	/* Color */
  	--color-darkgray: #afafaf;
  	--color-darkgreen: #2e7d32;
  	--color-darkolivegreen: #556b2f;
  	--color-darkslategray-100: #333;
  	--color-darkslategray-200: #1a2e1a;
  	--color-firebrick: #d32f2f;
  	--color-gainsboro: #e0e0e0;
  	--color-gold: #ffc107;
  	--color-goldenrod: #ffd54f;
  	--color-gray: #757575;
  	--color-lavenderblush: #ffebee;
  	--color-white: #fff;
  	--color-whitesmoke: #f5f5f5;
  	
  	/* Gap */
  	--gap-4: 4px;
  	--gap-8: 8px;
  	--gap-12: 12px;
  	--gap-16: 16px;
  	--gap-24: 24px;
  	--gap-28: 28px;
  	
  	/* Padding */
  	--padding-0: 0px;
  	--padding-10: 10px;
  	--padding-12: 12px;
  	--padding-16: 16px;
  	--padding-20: 20px;
  	--padding-32: 32px;
  	
  	/* 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-24: 24px;
  	
  	/* Borders */
  	--border-1: 1px solid var(--color-gainsboro);
  	
}