:root { --bricks-color-grey-100: #f5f5f5; --bricks-color-grey-300: #e0e0e0; --bricks-color-grey-500: #9e9e9e; --bricks-color-grey-700: #616161; --bricks-color-grey-800: #424242; --bricks-color-grey-900: #212121; --bricks-color-yellow: #ffeb3b; --bricks-color-amber: #ffc107; --bricks-color-orange: #ff9800; --bricks-color-deep-orange: #ff5722; --bricks-color-red: #f44336; --bricks-color-purple: #9c27b0; --bricks-color-blue: #2196f3; --bricks-color-light-blue: #03a9f4; --bricks-color-sky-blue: #81D4FA; --bricks-color-green: #4caf50; --bricks-color-light-green: #8bc34a; --bricks-color-lime: #cddc39; --primary: #0b1117; --primary-t-1: hsla(210, 35%, 7%, 0.1); --primary-t-2: hsla(210, 35%, 7%, 0.2); --primary-t-3: hsla(210, 35%, 7%, 0.3); --primary-t-4: hsla(210, 35%, 7%, 0.4); --primary-t-5: hsla(210, 35%, 7%, 0.5); --primary-t-6: hsla(210, 35%, 7%, 0.6); --primary-t-7: hsla(210, 35%, 7%, 0.7); --primary-t-8: hsla(210, 35%, 7%, 0.8); --primary-t-9: hsla(210, 35%, 7%, 0.9); --primary-l-1: #5c6064; --primary-l-2: #aeb0b2; --primary-d-1: #070b0f; --primary-d-2: #040608; --secondary: #3a608c; --secondary-t-1: hsla(212, 41%, 39%, 0.1); --secondary-t-2: hsla(212, 41%, 39%, 0.2); --secondary-t-3: hsla(212, 41%, 39%, 0.3); --secondary-t-4: hsla(212, 41%, 39%, 0.4); --secondary-t-5: hsla(212, 41%, 39%, 0.5); --secondary-t-6: hsla(212, 41%, 39%, 0.6); --secondary-t-7: hsla(212, 41%, 39%, 0.7); --secondary-t-8: hsla(212, 41%, 39%, 0.8); --secondary-t-9: hsla(212, 41%, 39%, 0.9); --secondary-l-1: #7c95b2; --secondary-l-2: #bdcad9; --secondary-d-1: #27405d; --secondary-d-2: #13202f; --accent: #b6603c; --accent-t-1: hsla(18, 50%, 47%, 0.1); --accent-t-2: hsla(18, 50%, 47%, 0.2); --accent-t-3: hsla(18, 50%, 47%, 0.3); --accent-t-4: hsla(18, 50%, 47%, 0.4); --accent-t-5: hsla(18, 50%, 47%, 0.5); --accent-t-6: hsla(18, 50%, 47%, 0.6); --accent-t-7: hsla(18, 50%, 47%, 0.7); --accent-t-8: hsla(18, 50%, 47%, 0.8); --accent-t-9: hsla(18, 50%, 47%, 0.9); --accent-l-1: #ce957d; --accent-l-2: #e7cabe; --accent-d-1: #794028; --accent-d-2: #3d2014; --base: #1f2933; --base-l-1: #6a7077; --base-l-2: #b4b8bb; --base-d-1: #151b22; --base-d-2: #0a0e11; --base-t-1: hsla(210, 24%, 16%, 0.1); --base-t-2: hsla(210, 24%, 16%, 0.2); --base-t-3: hsla(210, 24%, 16%, 0.3); --base-t-4: hsla(210, 24%, 16%, 0.4); --base-t-5: hsla(210, 24%, 16%, 0.5); --base-t-6: hsla(210, 24%, 16%, 0.6); --base-t-7: hsla(210, 24%, 16%, 0.7); --base-t-8: hsla(210, 24%, 16%, 0.8); --base-t-9: hsla(210, 24%, 16%, 0.9); --neutral: #485533; --neutral-l-1: #858e77; --neutral-l-2: #c2c6bb; --neutral-d-1: #303922; --neutral-d-2: #181c11; --neutral-t-1: hsla(83, 25%, 27%, 0.1); --neutral-t-2: hsla(83, 25%, 27%, 0.2); --neutral-t-3: hsla(83, 25%, 27%, 0.3); --neutral-t-4: hsla(83, 25%, 27%, 0.4); --neutral-t-5: hsla(83, 25%, 27%, 0.5); --neutral-t-6: hsla(83, 25%, 27%, 0.6); --neutral-t-7: hsla(83, 25%, 27%, 0.7); --neutral-t-8: hsla(83, 25%, 27%, 0.8); --neutral-t-9: hsla(83, 25%, 27%, 0.9); --surface: #e5e7eb; --surface-l-1: #eeeff2; --surface-l-2: #f6f7f8; --surface-d-1: #999a9d; --surface-d-2: #4c4d4e; --surface-t-1: hsla(220, 13%, 91%, 0.1); --surface-t-2: hsla(220, 13%, 91%, 0.2); --surface-t-3: hsla(220, 13%, 91%, 0.3); --surface-t-4: hsla(220, 13%, 91%, 0.4); --surface-t-5: hsla(220, 13%, 91%, 0.5); --surface-t-6: hsla(220, 13%, 91%, 0.6); --surface-t-7: hsla(220, 13%, 91%, 0.7); --surface-t-8: hsla(220, 13%, 91%, 0.8); --surface-t-9: hsla(220, 13%, 91%, 0.9); --white: #ffffff; --black: #000000; --primary-pale: var(--primary-l-2); --primary-light: var(--primary-l-1); --primary-dark: var(--primary-d-1); --primary-deep: var(--primary-d-2); --secondary-pale: var(--secondary-l-2); --secondary-light: var(--secondary-l-1); --secondary-dark: var(--secondary-d-1); --secondary-deep: var(--secondary-d-2); --accent-pale: var(--accent-l-2); --accent-light: var(--accent-l-1); --accent-dark: var(--accent-d-1); --accent-deep: var(--accent-d-2); --base-pale: var(--base-l-2); --base-light: var(--base-l-1); --base-dark: var(--base-d-1); --base-deep: var(--base-d-2); --neutral-pale: var(--neutral-l-2); --neutral-light: var(--neutral-l-1); --neutral-dark: var(--neutral-d-1); --neutral-deep: var(--neutral-d-2); --surface-pale: var(--surface-l-2); --surface-light: var(--surface-l-1); --surface-dark: var(--surface-d-1); --surface-deep: var(--surface-d-2); --primary-10: var(--primary-t-1); --primary-20: var(--primary-t-2); --primary-30: var(--primary-t-3); --primary-40: var(--primary-t-4); --primary-50: var(--primary-t-5); --primary-60: var(--primary-t-6); --primary-70: var(--primary-t-7); --primary-80: var(--primary-t-8); --primary-90: var(--primary-t-9); --secondary-10: var(--secondary-t-1); --secondary-20: var(--secondary-t-2); --secondary-30: var(--secondary-t-3); --secondary-40: var(--secondary-t-4); --secondary-50: var(--secondary-t-5); --secondary-60: var(--secondary-t-6); --secondary-70: var(--secondary-t-7); --secondary-80: var(--secondary-t-8); --secondary-90: var(--secondary-t-9); --accent-10: var(--accent-t-1); --accent-20: var(--accent-t-2); --accent-30: var(--accent-t-3); --accent-40: var(--accent-t-4); --accent-50: var(--accent-t-5); --accent-60: var(--accent-t-6); --accent-70: var(--accent-t-7); --accent-80: var(--accent-t-8); --accent-90: var(--accent-t-9); --base-10: var(--base-t-1); --base-20: var(--base-t-2); --base-30: var(--base-t-3); --base-40: var(--base-t-4); --base-50: var(--base-t-5); --base-60: var(--base-t-6); --base-70: var(--base-t-7); --base-80: var(--base-t-8); --base-90: var(--base-t-9); --neutral-10: var(--neutral-t-1); --neutral-20: var(--neutral-t-2); --neutral-30: var(--neutral-t-3); --neutral-40: var(--neutral-t-4); --neutral-50: var(--neutral-t-5); --neutral-60: var(--neutral-t-6); --neutral-70: var(--neutral-t-7); --neutral-80: var(--neutral-t-8); --neutral-90: var(--neutral-t-9); --surface-10: var(--surface-t-1); --surface-20: var(--surface-t-2); --surface-30: var(--surface-t-3); --surface-40: var(--surface-t-4); --surface-50: var(--surface-t-5); --surface-60: var(--surface-t-6); --surface-70: var(--surface-t-7); --surface-80: var(--surface-t-8); --surface-90: var(--surface-t-9); --h6: clamp(1.6rem, calc(0.0018518518518518515 * (100vw - 36rem) + 1.6rem), 1.8rem); --h5: clamp(1.8rem, calc(0.0018518518518518515 * (100vw - 36rem) + 1.8rem), 2rem); --h4: clamp(2rem, calc(0.007407407407407406 * (100vw - 36rem) + 2rem), 2.8rem); --h3: clamp(2.4rem, calc(0.00740740740740741 * (100vw - 36rem) + 2.4rem), 3.2rem); --h2: clamp(3.2rem, calc(0.007407407407407406 * (100vw - 36rem) + 3.2rem), 4rem); --h1: clamp(4rem, calc(0.007407407407407406 * (100vw - 36rem) + 4rem), 4.8rem); --display: clamp(4.8rem, calc(0.01481481481481482 * (100vw - 36rem) + 4.8rem), 6.4rem); --text-xs: clamp(1rem, calc(0.0018518518518518515 * (100vw - 36rem) + 1rem), 1.2rem); --text-sm: clamp(1.2rem, calc(0.0018518518518518515 * (100vw - 36rem) + 1.2rem), 1.4rem); --text-md: clamp(1.4rem, calc(0.0018518518518518534 * (100vw - 36rem) + 1.4rem), 1.6rem); --text-lg: clamp(1.6rem, calc(0.0018518518518518515 * (100vw - 36rem) + 1.6rem), 1.8rem); --text-xl: clamp(1.8rem, calc(0.0018518518518518515 * (100vw - 36rem) + 1.8rem), 2rem); --space-xs: clamp(0.4rem, calc(0.003703703703703704 * (100vw - 36rem) + 0.4rem), 0.8rem); --space-sm: clamp(0.8rem, calc(0.003703703703703703 * (100vw - 36rem) + 0.8rem), 1.2rem); --space-md: clamp(1.2rem, calc(0.003703703703703705 * (100vw - 36rem) + 1.2rem), 1.6rem); --space-lg: clamp(1.6rem, calc(0.007407407407407406 * (100vw - 36rem) + 1.6rem), 2.4rem); --space-xl: clamp(2.4rem, calc(0.00740740740740741 * (100vw - 36rem) + 2.4rem), 3.2rem); --block-space-xs: clamp(2rem, calc(0.009259259259259259 * (100vw - 36rem) + 2rem), 3rem); --block-space-sm: clamp(3rem, calc(0.009259259259259259 * (100vw - 36rem) + 3rem), 4rem); --block-space-md: clamp(4rem, calc(0.018518518518518517 * (100vw - 36rem) + 4rem), 6rem); --block-space-lg: clamp(6rem, calc(0.018518518518518517 * (100vw - 36rem) + 6rem), 8rem); --block-space-xl: clamp(8rem, calc(0.037037037037037035 * (100vw - 36rem) + 8rem), 12rem);}