/* Variables */

:root {
	
	/* Scale */
	
	--scale: 1.0;
	
	--scale-0: calc(var(--scale) * 0);
	--scale-1: calc(var(--scale) * 1);
	--scale-2: calc(var(--scale) * 2);
	--scale-3: calc(var(--scale) * 3);
	--scale-4: calc(var(--scale) * 4);
	--scale-5: calc(var(--scale) * 5);
	--scale-6: calc(var(--scale) * 6);
	--scale-7: calc(var(--scale) * 7);
	--scale-8: calc(var(--scale) * 8);
	--scale-10: calc(var(--scale) * 10);
	--scale-12: calc(var(--scale) * 12);
	--scale-14: calc(var(--scale) * 14);
	--scale-16: calc(var(--scale) * 16);
	--scale-20: calc(var(--scale) * 20);
	--scale-24: calc(var(--scale) * 24);
	--scale-28: calc(var(--scale) * 28);
	--scale-32: calc(var(--scale) * 32);
	--scale-40: calc(var(--scale) * 40);
	--scale-48: calc(var(--scale) * 48);
	--scale-56: calc(var(--scale) * 56);
	--scale-64: calc(var(--scale) * 64);
	--scale-80: calc(var(--scale) * 80);
	--scale-96: calc(var(--scale) * 96);
	--scale-112: calc(var(--scale) * 112);
	--scale-128: calc(var(--scale) * 128);
	--scale-160: calc(var(--scale) * 160);
	--scale-192: calc(var(--scale) * 192);
	--scale-224: calc(var(--scale) * 224);
	--scale-256: calc(var(--scale) * 256);
	--scale-320: calc(var(--scale) * 320);
	
	/* Size */
	
	--size: calc(1.0rem / 2);
	
	--size-0: max(0px, var(--size) * var(--scale-0));
	--size-1: max(1px, var(--size) * var(--scale-1));
	--size-2: max(2px, var(--size) * var(--scale-2));
	--size-3: max(3px, var(--size) * var(--scale-3));
	--size-4: max(4px, var(--size) * var(--scale-4));
	--size-5: max(5px, var(--size) * var(--scale-5));
	--size-6: max(6px, var(--size) * var(--scale-6));
	--size-7: max(7px, var(--size) * var(--scale-7));
	--size-8: max(8px, var(--size) * var(--scale-8));
	--size-10: max(10px, var(--size) * var(--scale-10));
	--size-12: max(12px, var(--size) * var(--scale-12));
	--size-14: max(14px, var(--size) * var(--scale-14));
	--size-16: max(16px, var(--size) * var(--scale-16));
	--size-20: max(20px, var(--size) * var(--scale-20));
	--size-24: max(24px, var(--size) * var(--scale-24));
	--size-28: max(28px, var(--size) * var(--scale-28));
	--size-32: max(32px, var(--size) * var(--scale-32));
	--size-40: max(40px, var(--size) * var(--scale-40));
	--size-48: max(48px, var(--size) * var(--scale-48));
	--size-56: max(56px, var(--size) * var(--scale-56));
	--size-64: max(64px, var(--size) * var(--scale-64));
	--size-80: max(80px, var(--size) * var(--scale-80));
	--size-96: max(96px, var(--size) * var(--scale-96));
	--size-112: max(112px, var(--size) * var(--scale-112));
	--size-128: max(128px, var(--size) * var(--scale-128));
	--size-160: max(160px, var(--size) * var(--scale-160));
	
	/* Space */
	
	--space: calc(1.0rem / 4);
	
	--space-0: max(0px, var(--space) * var(--scale-0));
	--space-1: max(1px, var(--space) * var(--scale-1));
	--space-2: max(2px, var(--space) * var(--scale-2));
	--space-3: max(3px, var(--space) * var(--scale-3));
	--space-4: max(4px, var(--space) * var(--scale-4));
	--space-5: max(5px, var(--space) * var(--scale-5));
	--space-6: max(6px, var(--space) * var(--scale-6));
	--space-7: max(7px, var(--space) * var(--scale-7));
	--space-8: max(8px, var(--space) * var(--scale-8));
	--space-10: max(10px, var(--space) * var(--scale-10));
	--space-12: max(12px, var(--space) * var(--scale-12));
	--space-14: max(14px, var(--space) * var(--scale-14));
	--space-16: max(16px, var(--space) * var(--scale-16));
	--space-20: max(20px, var(--space) * var(--scale-20));
	--space-24: max(24px, var(--space) * var(--scale-24));
	--space-28: max(28px, var(--space) * var(--scale-28));
	--space-32: max(32px, var(--space) * var(--scale-32));
	--space-40: max(40px, var(--space) * var(--scale-40));
	
	/* Thickness */
	
	--thickness: calc(1.0rem / 16);
	
	--thickness-0: max(0px, var(--thickness) * var(--scale-0));
	--thickness-1: max(1px, var(--thickness) * var(--scale-1));
	--thickness-2: max(2px, var(--thickness) * var(--scale-2));
	--thickness-3: max(3px, var(--thickness) * var(--scale-3));
	--thickness-4: max(4px, var(--thickness) * var(--scale-4));
	--thickness-5: max(5px, var(--thickness) * var(--scale-5));
	--thickness-6: max(6px, var(--thickness) * var(--scale-6));
	--thickness-7: max(7px, var(--thickness) * var(--scale-7));
	--thickness-8: max(8px, var(--thickness) * var(--scale-8));
	--thickness-10: max(10px, var(--thickness) * var(--scale-10));
	--thickness-12: max(12px, var(--thickness) * var(--scale-12));
	--thickness-14: max(14px, var(--thickness) * var(--scale-14));
	--thickness-16: max(16px, var(--thickness) * var(--scale-16));
	--thickness-20: max(20px, var(--thickness) * var(--scale-20));
	
	/* Font */
	
	--font-size: calc(var(--scale) * 1.125rem);
	
	--font-size-h1: calc(var(--font-size) * (60.75 / 18));
	--font-size-h2: calc(var(--font-size) * (40.5 / 18));
	--font-size-h3: calc(var(--font-size) * (27 / 18));
	--font-size-h4: calc(var(--font-size) * (18 / 18));
	--font-size-h5: calc(var(--font-size) * (12 / 18));
	--font-size-h6: calc(var(--font-size) * (8 / 18));
	
	--font-size-3xl: calc(var(--font-size) * (32 / 18));
	--font-size-2xl: calc(var(--font-size) * (28 / 18));
	--font-size-xl: calc(var(--font-size) * (24 / 18));
	--font-size-l: calc(var(--font-size) * (20 / 18));
	--font-size-m: calc(var(--font-size) * (18 / 18));
	--font-size-s: calc(var(--font-size) * (16 / 18));
	--font-size-xs: calc(var(--font-size) * (14 / 18));
	--font-size-2xs: calc(var(--font-size) * (12 / 18));
	--font-size-3xs: calc(var(--font-size) * (11 / 18));
	
	--font-weight-r: 400;
	--font-weight-m: 500;
	--font-weight-sb: 600;
	--font-weight-b: 700;
	
	/* Color */
	
	--white: #ffffff;
	--black: #000000;
	
	/* Primary Color */
	
	--primary-050: #f7fcf3;
	--primary-100: #eff9e6;
	--primary-150: #e4f8d1;
	--primary-200: #d8f6bb;
	--primary-250: #ccf3a5;
	--primary-300: #c0f08f;
	--primary-350: #afe777;
	--primary-400: #9ede5f;
	--primary-450: #8fd24c;
	--primary-500: #7fc639;
	--primary-550: #71b62d;
	--primary-600: #63a621;
	--primary-650: #589718;
	--primary-700: #4c880f;
	--primary-750: #42780c;
	--primary-800: #386708;
	--primary-850: #2d5406;
	--primary-900: #214003;
	--primary-950: #112002;
	
	/* Secondary Color */
	
	--secondary-050: #f8f3fc;
	--secondary-100: #f0e6f9;
	--secondary-150: #e4d1f8;
	--secondary-200: #d8bbf6;
	--secondary-250: #cca5f3;
	--secondary-300: #c08ff0;
	--secondary-350: #b077e7;
	--secondary-400: #9f5fde;
	--secondary-450: #8f4cd2;
	--secondary-500: #7f39c6;
	--secondary-550: #712db6;
	--secondary-600: #6321a6;
	--secondary-650: #571897;
	--secondary-700: #4b0f88;
	--secondary-750: #410c78;
	--secondary-800: #370867;
	--secondary-850: #2c0654;
	--secondary-900: #210340;
	--secondary-950: #110220;
	
	/* Neutral Color */
	
	--neutral-050: #f2f2f2;
	--neutral-100: #e5e5e5;
	--neutral-150: #d1d3d4;
	--neutral-200: #bdc0c2;
	--neutral-250: #a6abae;
	--neutral-300: #8f959a;
	--neutral-350: #7c8288;
	--neutral-400: #686f75;
	--neutral-450: #575f66;
	--neutral-500: #464e56;
	--neutral-550: #3b434b;
	--neutral-600: #2f3840;
	--neutral-650: #273038;
	--neutral-700: #1e2730;
	--neutral-750: #171f28;
	--neutral-800: #10171f;
	--neutral-850: #0d141b;
	--neutral-900: #091017;
	--neutral-950: #05080c;
	
	/* Success Color */
	
	--success-050: #f3fcf3;
	--success-100: #e6f9e6;
	--success-150: #d1f8d1;
	--success-200: #bbf6bb;
	--success-250: #a5f3a5;
	--success-300: #8ff08f;
	--success-350: #77e777;
	--success-400: #5fde5f;
	--success-450: #4cd24c;
	--success-500: #39c639;
	--success-550: #2db62d;
	--success-600: #21a621;
	--success-650: #189718;
	--success-700: #0f880f;
	--success-750: #0c780c;
	--success-800: #086708;
	--success-850: #065406;
	--success-900: #034003;
	--success-950: #022002;
	
	/* Info Color */
	
	--info-050: #f3f6fc;
	--info-100: #e6ecf9;
	--info-150: #d1def8;
	--info-200: #bbcff6;
	--info-250: #a5bff3;
	--info-300: #8faff0;
	--info-350: #779ce7;
	--info-400: #5f89de;
	--info-450: #4c79d2;
	--info-500: #3968c6;
	--info-550: #2d5bb6;
	--info-600: #214da6;
	--info-650: #184297;
	--info-700: #0f3788;
	--info-750: #0c3078;
	--info-800: #082867;
	--info-850: #062054;
	--info-900: #031740;
	--info-950: #020c20;
	
	/* Warning Color */
	
	--warning-050: #fcfaf3;
	--warning-100: #f9f4e6;
	--warning-150: #f8eed1;
	--warning-200: #f6e7bb;
	--warning-250: #f3e0a5;
	--warning-300: #f0d88f;
	--warning-350: #e7cb77;
	--warning-400: #debe5f;
	--warning-450: #d2b14c;
	--warning-500: #c6a339;
	--warning-550: #b6942d;
	--warning-600: #a68521;
	--warning-650: #977818;
	--warning-700: #886a0f;
	--warning-750: #785d0c;
	--warning-800: #674f08;
	--warning-850: #544006;
	--warning-900: #403103;
	--warning-950: #201902;
	
	/* Error Color */
	
	--error-050: #fcf3f3;
	--error-100: #f9e6e6;
	--error-150: #f8d1d1;
	--error-200: #f6bbbb;
	--error-250: #f3a5a5;
	--error-300: #f08f8f;
	--error-350: #e77777;
	--error-400: #de5f5f;
	--error-450: #d24c4c;
	--error-500: #c63939;
	--error-550: #b62d2d;
	--error-600: #a62121;
	--error-650: #971818;
	--error-700: #880f0f;
	--error-750: #780c0c;
	--error-800: #670808;
	--error-850: #540606;
	--error-900: #400303;
	--error-950: #200202;
	
}

@media screen and (max-width: 40rem) {
	
	:root {
		--scale: 0.75;
	}
	
}

/* Elements */

body {
    
	font-family: "Quicksand", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	
	font-size: var(--font-size-m);
	font-weight: var(--font-weight-r);
	line-height: 1.5;
	
	background-color: var(--neutral-800);
	color: var(--neutral-100);
    
}

h1 {
	font-size: var(--font-size-h1);
}

h2 {
	font-size: var(--font-size-h2);
}

h3 {
	font-size: var(--font-size-h3);
}

h4 {
	font-size: var(--font-size-h4);
}

h5 {
	font-size: var(--font-size-h5);
}

h6 {
	font-size: var(--font-size-h6);
}

h1, h2, h3, h4, h5, h6 {
	font-weight: var(--font-weight-m);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

p {
	font-size: var(--font-size-m);
	font-weight: var(--font-weight-r);
	line-height: 1.5;
}

b {
	font-weight: bold;
}

i {
	font-style: italic;
}

a {
	color: var(--primary-4);
}