:root {
    /* Color */
    --color-backdrop: rgba(0, 0, 0, 0.6);
    --color-black: #000;
    --color-light: var(--color-gray-200);
    --color-white: #fff;
    --color-source: var(--color-source-200);
    --color-proposal: var(--color-proposal-200);
    --color-translation: var(--color-translation-200);
    --color-celebration: var(--color-celebration-300);
    --color-gray-100: #f7f7f7;
    --color-gray-200: #efefef;
    --color-gray-300: #dddddd;
    --color-gray-400: #cccccc;
    --color-gray-500: #999999;
    --color-gray-600: #777777;
    --color-gray-700: #595959;
    --color-gray-800: #3e3e3e;
    --color-gray-900: #292929;
    /* Layout */
    --columns: 14;
    --article-start: 4;
    --article-span: 3;
    --related-start: 7;
    --related-span: 2;
    --container-padding: var(--spacing-4);
    --container: 90rem;
    /* Fonts */
    --font-sans: "Source Sans Pro", sans-serif;
    --font-mono: "Parat", monospace;
    --font-serif: "Source Serif Pro", serif;
    --font-thin: 300;
    --font-normal: 400;
    --font-semibold: 600;
    --font-bold: 700;
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    /* Rounded & Shadows */
    --rounded-xs: 1px;
    --rounded-sm: 0.125rem;
    --rounded: 0.25rem;
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: rgba(0, 0, 0, 0.025) 0 0 10px, rgba(0, 0, 0, 0.075) 0 5px 40px, rgba(0, 0, 0, 0.075) 0 30px 100px;
    --shadow-outline: currentColor 0 0 0 2px;
    --shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --shadow-color: 0deg 0% 58%;
    --shadow-elevation-low: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34), 0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.34), 1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.34);
    --shadow-elevation-medium: 0.5px 0.7px 1px hsl(var(--shadow-color) / 0.36), 1.6px 2.2px 3.1px -0.8px hsl(var(--shadow-color) / 0.36), 4.1px 5.5px 7.7px -1.7px hsl(var(--shadow-color) / 0.36), 9.9px 13.4px 18.7px -2.5px hsl(var(--shadow-color) / 0.36);
    --shadow-elevation-high: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34), 1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.34), 2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.34), 4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.34), 7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.34), 11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.34), 17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.34), 25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.34);
    /* Spacing */
    --spacing-0: 0;
    --spacing-px: 1px;
    --spacing-2px: 2px;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing--5: -1.25rem;
    --spacing-6: 1.5rem;
    --spacing--6: -1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing--12: -3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;
    --spacing-36: 9rem;
    --spacing-42: 10.5rem;
    /* Text sizes */
    --text-2xs: 0.6rem;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.75rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3rem;
    --text-6xl: 4rem;
    --text-h1: 2rem;
}

@media screen and (max-width: 125rem) {
     :root {
        --columns: 10;
    }
}

@media screen and (max-width: 100rem) {
     :root {
        --columns: 8;
    }
}

@media screen and (max-width: 80rem) {
     :root {
        --columns: 7;
    }
}

@media screen and (max-width: 60rem) {
     :root {
        --columns: 5;
    }
}

@media screen and (max-width: 50rem) {
     :root {
        --columns: 4;
    }
}

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

@media screen and (max-width: 30rem) {
     :root {
        --columns: 2;
    }
}

@media screen and (max-width: 22rem) {
     :root {
        --columns: 1;
    }
}