: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; --background: hsl(0, 2%, 98%); --foreground: hsl(0, 0%, 100%); --text: hsl(0, 0%, 15%); --accent: hsl(212 33% 23%); --border: hsla(0, 0%, 80%, 1); --input: hsla(0, 0%, 100%, 1); --heading: hsl(0, 0%, 0%); --btn-text: hsl(0, 0%, 100%); --foreground-d-1: rgb(223, 223, 223); --foreground-d-2: rgb(191, 191, 191); --foreground-d-3: rgb(159, 159, 159); --foreground-d-4: rgb(128, 128, 128); --foreground-d-5: rgb(96, 96, 96); --foreground-d-6: rgb(64, 64, 64); --foreground-d-7: rgb(32, 32, 32); --background-d-1: hsl(0, 0%, 86%); --background-d-2: hsl(0, 0%, 74%); --background-d-3: hsl(0, 0%, 61%); --background-d-4: hsl(0, 0%, 49%); --background-d-5: hsl(0, 0%, 37%); --background-d-6: hsl(0, 0%, 25%); --background-d-7: hsl(0, 0%, 12%); --brand-primary: hsl(170, 39%, 39%); --brand-pearl: hsla(23, 44%, 34%, 0.07); --brand-primary-l-1: hsl(170, 31%, 45%); --brand-primary-l-2: hsl(170, 25%, 50%); --brand-primary-l-3: hsl(170, 25%, 56%); --brand-primary-l-4: hsl(170, 25%, 61%); --brand-primary-l-5: hsl(170, 25%, 67%); --brand-primary-l-6: hsl(170, 25%, 72%); --brand-primary-l-7: hsl(170, 25%, 78%); --brand-primary-l-8: hsl(170, 25%, 83%); --brand-primary-l-9: hsl(170, 25%, 89%); --brand-primary-l-10: hsl(170, 25%, 94%); --brand-primary-d-1: hsl(170, 39%, 35%); --brand-primary-d-2: hsl(170, 39%, 32%); --brand-primary-d-3: hsl(170, 39%, 28%); --brand-primary-d-4: hsl(170, 39%, 25%); --brand-primary-d-5: hsl(170, 39%, 21%); --brand-primary-d-6: hsl(170, 39%, 18%); --brand-primary-d-7: hsl(170, 39%, 14%); --brand-primary-d-8: hsl(170, 39%, 11%); --brand-primary-d-9: hsl(170, 39%, 7%); --brand-primary-d-10: hsl(170, 39%, 4%); --accent-l-1: hsl(212, 23%, 30%); --accent-l-2: hsl(212, 17%, 37%); --accent-l-3: hsl(212, 13%, 44%); --accent-l-4: hsl(212, 10%, 51%); --accent-l-5: hsl(212, 10%, 58%); --accent-l-6: hsl(212, 10%, 65%); --accent-l-7: hsl(212, 10%, 72%); --accent-l-8: hsl(212, 10%, 79%); --accent-l-9: hsl(212, 10%, 86%); --accent-l-10: hsl(212, 10%, 93%); --accent-d-1: hsl(212, 33%, 21%); --accent-d-2: hsl(212, 33%, 19%); --accent-d-3: hsl(212, 33%, 17%); --accent-d-4: hsl(212, 33%, 15%); --accent-d-5: hsl(212, 33%, 13%); --accent-d-6: hsl(212, 33%, 10%); --accent-d-7: hsl(212, 33%, 8%); --accent-d-8: hsl(212, 33%, 6%); --accent-d-9: hsl(212, 33%, 4%); --accent-d-10: hsl(212, 33%, 2%); --shadow: hsl(0, 0%, 95%); --transparent: hsla(0, 0%, 0%, 0); --light: hsla(0, 0%, 100%, 1); --dark: hsl(0, 0%, 0%); --s3-background: hsl(329 84% 4%); --s3-foreground: hsl(329 84% 9%); --s3-text: hsl(0 0% 85%); --s3-accent: hsl(0, 0%, 100%); --s3-border: hsla(0, 0%, 100%, 0.25); --s3-input: hsla(0, 0%, 100%, 0.1); --s3-heading: hsl(0, 0%, 100%); --s3-background-d-1: rgb(17, 2, 9); --s3-background-d-2: rgb(14, 2, 8); --s3-background-d-3: rgb(12, 1, 6); --s3-background-d-4: rgb(10, 1, 5); --s3-background-d-5: rgb(7, 1, 4); --s3-background-d-6: rgb(5, 1, 3); --s3-background-d-7: rgb(2, 0, 1); --s3-foreground-d-1: rgb(37, 4, 21); --s3-foreground-d-2: rgb(32, 3, 18); --s3-foreground-d-3: rgb(26, 3, 15); --s3-foreground-d-4: rgb(21, 2, 12); --s3-foreground-d-5: rgb(16, 2, 9); --s3-foreground-d-6: rgb(11, 1, 6); --s3-foreground-d-7: rgb(5, 1, 3); --s3-accent-l-1: rgb(255, 255, 255); --s3-accent-l-2: rgb(255, 255, 255); --s3-accent-l-3: rgb(255, 255, 255); --s3-accent-d-1: rgb(191, 191, 191); --s3-accent-d-2: rgb(128, 128, 128); --s3-accent-d-3: rgb(64, 64, 64); --s3-btn-text: hsl(0, 0%, 0%); --s2-background: hsla(213, 33%, 18%, 1); --s2-foreground: hsla(212, 33%, 23%, 1); --s2-text: hsl(0, 0%, 85%); --s2-accent: hsla(329, 84%, 49%, 1); --s2-border: hsla(0, 0%, 100%, 0.25); --s2-input: hsla(0, 0%, 100%, 0.1); --s2-heading: hsl(0, 0%, 100%); --s2-background-d-1: rgb(27, 39, 53); --s2-background-d-2: rgb(23, 33, 46); --s2-background-d-3: rgb(19, 28, 38); --s2-background-d-4: rgb(16, 22, 31); --s2-background-d-5: rgb(12, 17, 23); --s2-background-d-6: rgb(8, 11, 15); --s2-background-d-7: rgb(4, 6, 8); --s2-foreground-d-1: rgb(34, 50, 68); --s2-foreground-d-2: rgb(29, 43, 59); --s2-foreground-d-3: rgb(24, 36, 49); --s2-foreground-d-4: rgb(20, 29, 39); --s2-foreground-d-5: rgb(15, 21, 29); --s2-foreground-d-6: rgb(10, 14, 20); --s2-foreground-d-7: rgb(5, 7, 10); --s2-accent-l-1: rgb(236, 79, 160); --s2-accent-l-2: rgb(243, 138, 192); --s2-accent-l-3: rgb(249, 196, 223); --s2-accent-d-1: rgb(173, 15, 96); --s2-accent-d-2: rgb(115, 10, 64); --s2-accent-d-3: rgb(58, 5, 32); --s2-btn-text: hsl(0, 0%, 100%); --space--4xs: clamp(0.66rem, calc(-0.0016666666666666672 * (100vw - 36rem) + 0.66rem), 0.48rem); --space--3xs: clamp(0.82rem, calc(-0.0017592592592592588 * (100vw - 36rem) + 0.82rem), 0.63rem); --space--2xs: clamp(1.02rem, calc(-0.0016666666666666672 * (100vw - 36rem) + 1.02rem), 0.84rem); --space--xs: clamp(1.28rem, calc(-0.00138888888888889 * (100vw - 36rem) + 1.28rem), 1.13rem); --space--s: clamp(1.6rem, calc(-0.0009259259259259267 * (100vw - 36rem) + 1.6rem), 1.5rem); --space--m: clamp(2rem, calc(0 * (100vw - 36rem) + 2rem), 2rem); --space--l: clamp(2.5rem, calc(0.0015740740740740734 * (100vw - 36rem) + 2.5rem), 2.67rem); --space--xl: clamp(3.13rem, calc(0.0038888888888888883 * (100vw - 36rem) + 3.13rem), 3.55rem); --space--2xl: clamp(3.91rem, calc(0.0076851851851851855 * (100vw - 36rem) + 3.91rem), 4.74rem); --space--3xl: clamp(4.88rem, calc(0.013240740740740739 * (100vw - 36rem) + 4.88rem), 6.31rem); --space--4xl: clamp(6.1rem, calc(0.021481481481481483 * (100vw - 36rem) + 6.1rem), 8.42rem); --text--xs: clamp(1.11rem, calc(-0.000833333333333334 * (100vw - 36rem) + 1.11rem), 1.02rem); --text--s: clamp(1.33rem, calc(-0.00046296296296296336 * (100vw - 36rem) + 1.33rem), 1.28rem); --text--m: clamp(1.6rem, calc(0 * (100vw - 36rem) + 1.6rem), 1.6rem); --text--l: clamp(1.92rem, calc(0.0007407407407407414 * (100vw - 36rem) + 1.92rem), 2rem); --text--xl: clamp(2.3rem, calc(0.0018518518518518534 * (100vw - 36rem) + 2.3rem), 2.5rem); --text--2xl: clamp(2.76rem, calc(0.003425925925925927 * (100vw - 36rem) + 2.76rem), 3.13rem); --text--3xl: clamp(3.32rem, calc(0.0054629629629629655 * (100vw - 36rem) + 3.32rem), 3.91rem); --text--4xl: clamp(3.98rem, calc(0.008333333333333333 * (100vw - 36rem) + 3.98rem), 4.88rem); --heading--xs: clamp(1.02rem, calc(0.003055555555555556 * (100vw - 36rem) + 1.02rem), 1.35rem); --heading--s: clamp(1.28rem, calc(0.004814814814814815 * (100vw - 36rem) + 1.28rem), 1.8rem); --heading--m: clamp(1.6rem, calc(0.007407407407407406 * (100vw - 36rem) + 1.6rem), 2.4rem); --heading--l: clamp(2rem, calc(0.011111111111111113 * (100vw - 36rem) + 2rem), 3.2rem); --heading--xl: clamp(2.5rem, calc(0.016388888888888883 * (100vw - 36rem) + 2.5rem), 4.27rem); --heading--2xl: clamp(3.13rem, calc(0.02370370370370371 * (100vw - 36rem) + 3.13rem), 5.69rem);}.text-text { color: var(--text); }.text-s3-text { color: var(--s3-text); }.text-s2-text { color: var(--s2-text); }