:root{ /* Content widths */ --width-normal:1440px; --width-medium:1100px; --width-small:880px; /* Font styles */ --font-family:"Roboto", Arial, Helvetica, sans-serif; --font-title-large:60px; --font-title-medium:50px; --font-title-normal:40px; --font-title-smaller:36px; --font-title-small:32px; --font-title-extrasmall:24px; --font-title-xxs:20px; --font-title-xxxs:18px; --font-content-large:24px; --font-content-medium:20px; --font-content-normal:16px; --font-content-smaller:14px; --font-content-small:12px; /* Padding & Margins */ --gutter:4px; --gap-h-1:var(--gutter); --gap-h-2:calc(var(--gutter) * 2); --gap-h-3:calc(var(--gutter) * 3); --gap-h-4:calc(var(--gutter) * 4); --gap-h-5:calc(var(--gutter) * 5); --gap-h-6:calc(var(--gutter) * 6); --gap-h-7:calc(var(--gutter) * 7); --gap-h-8:calc(var(--gutter) * 8); --gap-h-9:calc(var(--gutter) * 9); --gap-h-10:calc(var(--gutter) * 10); --gap-h-11:calc(var(--gutter) * 11); --gap-h-12:calc(var(--gutter) * 12); --gap-v-1:var(--gutter); --gap-v-2:calc(var(--gutter) * 2); --gap-v-3:calc(var(--gutter) * 4); --gap-v-4:calc(var(--gutter) * 6); --gap-v-5:calc(var(--gutter) * 8); --gap-v-6:calc(var(--gutter) * 10); --gap-v-7:calc(var(--gutter) * 12); --gap-v-8:calc(var(--gutter) * 14); --gap-v-9:calc(var(--gutter) * 16); --gap-v-10:calc(var(--gutter) * 20); --gap-v-11:calc(var(--gutter) * 22); --gap-v-12:calc(var(--gutter) * 24); /* Hue 1-360, Saturation%, Lightness% */ --color-text-hue: 5; --color-text-sat: 5%; --color-CTAtext-hue: 80; --color-CTAtext-sat: 20%; --color-accent-hue: 5; --color-accent-sat: 80%; --color-primary-hue: 20; --color-primary-sat: 80%; --color-secondary-hue: 190; --color-secondary-sat: 60%; --color-bg-hue: 5; --color-bg-sat: 10%; --transparent: 0 0% 0% / 0; --color-text-100: hsl(calc(var(--color-text-hue) - 24), var(--color-text-sat), 90%); --color-text-200: hsl(calc(var(--color-text-hue) - 16) var(--color-text-sat) 80%); --color-text-300: hsl(calc(var(--color-text-hue) - 8) var(--color-text-sat) 70%); --color-text-400: hsl(calc(var(--color-text-hue) - 4) var(--color-text-sat) 60%); --color-text-500: hsl(var(--color-text-hue) var(--color-text-sat) 50%); --color-text-600: hsl(calc(var(--color-text-hue) + 4) var(--color-text-sat) 40%); --color-text-700: hsl(calc(var(--color-text-hue) + 8) var(--color-text-sat) 30%); --color-text-800: hsl(calc(var(--color-text-hue) + 16) var(--color-text-sat) 20%); --color-text-900: hsl(calc(var(--color-text-hue) + 24) var(--color-text-sat) 10%); --color-CTAtext-100: hsl(calc(var(--color-CTAtext-hue) - 24) var(--color-CTAtext-sat) 100%); --color-CTAtext-900: hsl(calc(var(--color-CTAtext-hue) + 24) var(--color-CTAtext-sat) 1%); --color-accent-100: hsl(calc(var(--color-accent-hue) - 24) var(--color-accent-sat) 90%); --color-accent-200: hsl(calc(var(--color-accent-hue) - 16) var(--color-accent-sat) 80%); --color-accent-300: hsl(calc(var(--color-accent-hue) - 8) var(--color-accent-sat) 70%); --color-accent-400: hsl(calc(var(--color-accent-hue) - 4) var(--color-accent-sat) 60%); --color-accent-500: hsl(var(--color-accent-hue) var(--color-accent-sat) 50%); --color-accent-600: hsl(calc(var(--color-accent-hue) + 4) var(--color-accent-sat) 40%); --color-accent-700: hsl(calc(var(--color-accent-hue) + 8) var(--color-accent-sat) 30%); --color-accent-800: hsl(calc(var(--color-accent-hue) + 16) var(--color-accent-sat) 20%); --color-accent-900: hsl(calc(var(--color-accent-hue) + 24) var(--color-accent-sat) 10%); --color-primary-100: hsl(calc(var(--color-primary-hue) - 24) var(--color-primary-sat) 90%); --color-primary-200: hsl(calc(var(--color-primary-hue) - 16) var(--color-primary-sat) 80%); --color-primary-300: hsl(calc(var(--color-primary-hue) - 8) var(--color-primary-sat) 70%); --color-primary-400: hsl(calc(var(--color-primary-hue) - 4) var(--color-primary-sat) 60%); --color-primary-500: hsl(var(--color-primary-hue) var(--color-primary-sat) 50%); --color-primary-600: hsl(calc(var(--color-primary-hue) + 4) var(--color-primary-sat) 40%); --color-primary-700: hsl(calc(var(--color-primary-hue) + 8) var(--color-primary-sat) 30%); --color-primary-800: hsl(calc(var(--color-primary-hue) + 16) var(--color-primary-sat) 20%); --color-primary-900: hsl(calc(var(--color-primary-hue) + 24) var(--color-primary-sat) 10%); --color-secondary-100: hsl(calc(var(--color-secondary-hue) - 24) var(--color-secondary-sat) 90%); --color-secondary-200: hsl(calc(var(--color-secondary-hue) - 16) var(--color-secondary-sat) 80%); --color-secondary-300: hsl(calc(var(--color-secondary-hue) - 8) var(--color-secondary-sat) 70%); --color-secondary-400: hsl(calc(var(--color-secondary-hue) - 4) var(--color-secondary-sat) 60%); --color-secondary-500: hsl(var(--color-secondary-hue) var(--color-secondary-sat) 50%); --color-secondary-600: hsl(calc(var(--color-secondary-hue) + 4) var(--color-secondary-sat) 40%); --color-secondary-700: hsl(calc(var(--color-secondary-hue) + 8) var(--color-secondary-sat) 30%); --color-secondary-800: hsl(calc(var(--color-secondary-hue) + 16) var(--color-secondary-sat) 20%); --color-secondary-900: hsl(calc(var(--color-secondary-hue) + 24) var(--color-secondary-sat) 10%); --color-bg-100: hsl(calc(var(--color-bg-hue) - 24) var(--color-bg-sat) 100%); --color-bg-200: hsl(calc(var(--color-bg-hue) - 16) var(--color-bg-sat) 98%); --color-bg-300: hsl(calc(var(--color-bg-hue) - 8) var(--color-bg-sat) 96%); --color-bg-400: hsl(calc(var(--color-bg-hue) - 4) var(--color-bg-sat) 94%); --color-bg-500: hsl(var(--color-bg-hue) var(--color-bg-sat) 60%); --color-bg-600: hsl(calc(var(--color-bg-hue) + 4) var(--color-bg-sat) 40%); --color-bg-700: hsl(calc(var(--color-bg-hue) + 8) var(--color-bg-sat) 30%); --color-bg-800: hsl(calc(var(--color-bg-hue) + 16) var(--color-bg-sat) 20%); --color-bg-900: hsl(calc(var(--color-bg-hue) + 24) var(--color-bg-sat) 5%); /* Borders and corners */ --box-shadow:0px 1px 5px 0px rgba(0, 0, 0, 0.2); --border-radius-px:4px; --border-radius-normal:var(--border-radius-px); --border-radius-small:calc(var(--border-radius-px) / 2); --border-radius-large:calc(var(--border-radius-px) * 2); --border-color:var(--color-bg-300); --border-color-card:var(--transparent); --border-color-input:var(--color-bg-300); } /* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */