: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: hsl(210, 33%, 9%); --primary-d-1: hsl(210, 35%, 7%); --primary-d-2: hsl(210, 35%, 5%); --primary-d-3: hsl(210, 35%, 2%); --primary-l-1: hsl(210, 7%, 32%); --primary-l-2: hsl(210, 3%, 55%); --primary-l-3: hsl(210, 3%, 77%); --primary-t-1: hsla(210, 3%, 77%, 0.25); --primary-t-2: hsla(210, 3%, 55%, 0.5); --primary-t-3: hsla(210, 7%, 32%, 0.75); --secondary: hsl(193, 62%, 93%); --secondary-l-0: hsl(194, 61%, 95%); --secondary-l-1: hsl(194, 61%, 96%); --secondary-l-2: hsl(194, 61%, 98%); --secondary-d-0: hsl(194, 11%, 70%); --secondary-d-1: hsl(194, 5%, 46%); --secondary-d-2: hsl(194, 5%, 23%); --secondary-t-0: hsla(194, 61%, 98%, 0.25); --secondary-t-1: hsla(194, 61%, 96%, 0.5); --secondary-t-2: hsla(194, 61%, 95%, 0.75); --tertiary: hsl(169, 100%, 26%); --forth: hsl(346, 50%, 35%); --tertiary-l-1: hsl(169, 44%, 45%); --tertiary-l-2: hsl(169, 35%, 63%); --tertiary-l-3: hsl(169, 35%, 82%); --tertiary-d-1: hsl(169, 100%, 20%); --tertiary-d-2: hsl(169, 100%, 13%); --tertiary-d-3: hsl(169, 100%, 7%); --tertiary-t-1: hsla(169, 35%, 82%, 0.25); --tertiary-t-2: hsla(169, 35%, 63%, 0.5); --tertiary-t-3: hsla(169, 44%, 45%, 0.75); --forth-l-1: hsl(347, 27%, 51%); --forth-l-2: hsl(347, 27%, 68%); --forth-l-3: hsl(347, 27%, 84%); --forth-d-1: hsl(347, 50%, 26%); --forth-d-2: hsl(347, 50%, 18%); --forth-d-3: hsl(347, 50%, 9%); --forth-t-1: hsla(347, 27%, 84%, 0.25); --forth-t-2: hsla(347, 27%, 68%, 0.5); --forth-t-3: hsla(347, 27%, 51%, 0.75);}.bg-primary { background-color: var(--primary); }.bg-primary-d-1 { background-color: var(--primary-d-1); }.bg-primary-d-2 { background-color: var(--primary-d-2); }.bg-primary-d-3 { background-color: var(--primary-d-3); }.bg-primary-l-1 { background-color: var(--primary-l-1); }.bg-primary-l-2 { background-color: var(--primary-l-2); }.bg-primary-l-3 { background-color: var(--primary-l-3); }.bg-primary-t-1 { background-color: var(--primary-t-1); }.bg-primary-t-2 { background-color: var(--primary-t-2); }.bg-primary-t-3 { background-color: var(--primary-t-3); }.border-primary { border-color: var(--primary); }.border-primary-d-1 { border-color: var(--primary-d-1); }.border-primary-d-2 { border-color: var(--primary-d-2); }.border-primary-d-3 { border-color: var(--primary-d-3); }.border-primary-l-1 { border-color: var(--primary-l-1); }.border-primary-l-2 { border-color: var(--primary-l-2); }.border-primary-l-3 { border-color: var(--primary-l-3); }.border-primary-t-1 { border-color: var(--primary-t-1); }.border-primary-t-2 { border-color: var(--primary-t-2); }.border-primary-t-3 { border-color: var(--primary-t-3); }.outline-primary { outline-color: var(--primary); }.outline-primary-d-1 { outline-color: var(--primary-d-1); }.outline-primary-d-2 { outline-color: var(--primary-d-2); }.outline-primary-d-3 { outline-color: var(--primary-d-3); }.outline-primary-l-1 { outline-color: var(--primary-l-1); }.outline-primary-l-2 { outline-color: var(--primary-l-2); }.outline-primary-l-3 { outline-color: var(--primary-l-3); }.outline-primary-t-1 { outline-color: var(--primary-t-1); }.outline-primary-t-2 { outline-color: var(--primary-t-2); }.outline-primary-t-3 { outline-color: var(--primary-t-3); }.text-primary { color: var(--primary); }.text-primary-d-1 { color: var(--primary-d-1); }.text-primary-d-2 { color: var(--primary-d-2); }.text-primary-d-3 { color: var(--primary-d-3); }.text-primary-l-1 { color: var(--primary-l-1); }.text-primary-l-2 { color: var(--primary-l-2); }.text-primary-l-3 { color: var(--primary-l-3); }.text-primary-t-1 { color: var(--primary-t-1); }.text-primary-t-2 { color: var(--primary-t-2); }.text-primary-t-3 { color: var(--primary-t-3); }.bg-forth { background-color: var(--forth); }.bg-forth-l-1 { background-color: var(--forth-l-1); }.bg-forth-l-2 { background-color: var(--forth-l-2); }.bg-forth-l-3 { background-color: var(--forth-l-3); }.bg-forth-d-1 { background-color: var(--forth-d-1); }.bg-forth-d-2 { background-color: var(--forth-d-2); }.bg-forth-d-3 { background-color: var(--forth-d-3); }.bg-forth-t-1 { background-color: var(--forth-t-1); }.bg-forth-t-2 { background-color: var(--forth-t-2); }.bg-forth-t-3 { background-color: var(--forth-t-3); }