:root { --color-primary: hsl(198, 95%, 43%); --color-primary-h: 198; --color-primary-s: 95%; --color-primary-l: 43%; --color-primary-light: hsl(183, 50%, 51%); --color-primary-light-h: 183; --color-primary-light-s: 50%; --color-primary-light-l: 51%; --color-primary-darker: hsl(173, 63%, 39%); --color-primary-darker-h: 173; --color-primary-darker-s: 63%; --color-primary-darker-l: 39%; --color-primary-dark: hsl(173, 63%, 49%); --color-primary-dark-h: 173; --color-primary-dark-s: 63%; --color-primary-dark-l: 49%; --color-primary-lighter: hsl(173, 63%, 79%); --color-primary-lighter-h: 173; --color-primary-lighter-s: 63%; --color-primary-lighter-l: 79%; --color-accent: hsl(158, 39%, 57%); --color-accent-h: 158; --color-accent-s: 39%; --color-accent-l: 57%; --color-accent-darker: hsl(45, 99%, 47%); --color-accent-darker-h: 45; --color-accent-darker-s: 99%; --color-accent-darker-l: 47%; --color-accent-dark: hsl(45, 99%, 57%); --color-accent-dark-h: 45; --color-accent-dark-s: 99%; --color-accent-dark-l: 57%; --color-accent-light: hsl(45, 99%, 77%); --color-accent-light-h: 45; --color-accent-light-s: 99%; --color-accent-light-l: 77%; --color-accent-lighter: hsl(45, 99%, 87%); --color-accent-lighter-h: 45; --color-accent-lighter-s: 99%; --color-accent-lighter-l: 87%; --color-black: hsl(217, 25%, 24%); --color-black-h: 217; --color-black-s: 25%; --color-black-l: 24%; --color-white: hsl(0, 0%, 100%); --color-white-h: 0; --color-white-s: 0%; --color-white-l: 100%; --color-warning-darker: hsl(40, 100%, 50%); --color-warning-darker-h: 40; --color-warning-darker-s: 100%; --color-warning-darker-l: 50%; --color-warning-dark: hsl(40, 100%, 60%); --color-warning-dark-h: 40; --color-warning-dark-s: 100%; --color-warning-dark-l: 60%; --color-warning: hsl(40, 100%, 70%); --color-warning-h: 40; --color-warning-s: 100%; --color-warning-l: 70%; --color-warning-light: hsl(40, 100%, 80%); --color-warning-light-h: 40; --color-warning-light-s: 100%; --color-warning-light-l: 80%; --color-warning-lighter: hsl(40, 100%, 90%); --color-warning-lighter-h: 40; --color-warning-lighter-s: 100%; --color-warning-lighter-l: 90%; --color-success-darker: hsl(105, 98%, 57%); --color-success-darker-h: 105; --color-success-darker-s: 98%; --color-success-darker-l: 57%; --color-success-dark: hsl(105, 98%, 67%); --color-success-dark-h: 105; --color-success-dark-s: 98%; --color-success-dark-l: 67%; --color-success: hsl(105, 98%, 77%); --color-success-h: 105; --color-success-s: 98%; --color-success-l: 77%; --color-success-light: hsl(105, 98%, 87%); --color-success-light-h: 105; --color-success-light-s: 98%; --color-success-light-l: 87%; --color-success-lighter: hsl(105, 98%, 97%); --color-success-lighter-h: 105; --color-success-lighter-s: 98%; --color-success-lighter-l: 97%; --color-error-darker: hsl(353, 100%, 49%); --color-error-darker-h: 353; --color-error-darker-s: 100%; --color-error-darker-l: 49%; --color-error-dark: hsl(353, 100%, 59%); --color-error-dark-h: 353; --color-error-dark-s: 100%; --color-error-dark-l: 59%; --color-error: hsl(353, 100%, 69%); --color-error-h: 353; --color-error-s: 100%; --color-error-l: 69%; --color-error-light: hsl(353, 100%, 79%); --color-error-light-h: 353; --color-error-light-s: 100%; --color-error-light-l: 79%; --color-error-lighter: hsl(353, 100%, 89%); --color-error-lighter-h: 353; --color-error-lighter-s: 100%; --color-error-lighter-l: 89%; --color-bg: hsl(210, 12%, 97%); --color-bg-h: 210; --color-bg-s: 12%; --color-bg-l: 97%; --color-contrast-high: hsl(180, 1%, 62%); --color-contrast-high-h: 180; --color-contrast-high-s: 1%; --color-contrast-high-l: 62%; --color-contrast-higher: hsl(180, 0%, 51%); --color-contrast-higher-h: 180; --color-contrast-higher-s: 0%; --color-contrast-higher-l: 51%; --color-contrast-medium: hsl(195, 23%, 26%); --color-contrast-medium-h: 195; --color-contrast-medium-s: 23%; --color-contrast-medium-l: 26%; --color-contrast-lower: hsl(0, 0%, 37%); --color-contrast-lower-h: 0; --color-contrast-lower-s: 0%; --color-contrast-lower-l: 37%; --color-contrast-low: hsl(220, 11%, 79%); --color-contrast-low-h: 220; --color-contrast-low-s: 11%; --color-contrast-low-l: 79%; --gradient: linear-gradient(to left, var(--color-accent), var(--color-primary-light), var(--color-primary)); --gradient-top: linear-gradient(to top, var(--color-accent), var(--color-primary-light), var(--color-primary)); --btn-font-size: 1em; --btn-sm: calc(var(--btn-font-size) - 0.2em); --btn-md: calc(var(--btn-font-size) + 0.3em); --btn-lg: calc(var(--btn-font-size) + 0.4em); --container-width-xxs: 20rem; --container-width-xs: 37.5rem; --container-width-sm: 55rem; --container-width-md: 64rem; --container-width-lg: 80rem; --container-width-xl: 90rem; --container-height-xxxs: 10em; --container-height-xxs: 17em; --container-height-xs: 20em; --container-height-sm: 25em; --container-height-md: 30em; --container-height-lg: 80vh; --container-height-xl: 90vh; --icon-xs: 2em; --icon-sm: 3.5em; --icon-md: 5em; --icon-lg: 6em; --icon-xl: 8em; --radius: 0.25em; --shadow-sm: 0 1px 2px var(--color-contrast-low); --shadow-md: 0 1px 8px rgba(0, 0, 0, .1), 0 8px 24px rgba(0, 0, 0, .15); --shadow-lg: 0 1px 8px rgba(0, 0, 0, .1), 0 16px 48px rgba(0, 0, 0, .1), 0 24px 60px rgba(0, 0, 0, .1); --transition-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275); --transition-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); --transition-ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19); --transition-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); --main-header-height:6.5em; --main-header-height-md:80px; --steps-number: 4; --step-separator-line-stroke: 3px; --step-separator-line-gap: 3px; --step-circle-size: 32px; --step-circle-font-size: 1em; --select-icon-size: 1em; --select-icon-right-margin: var(--space-sm); --dropdown-item-padding: var(--space-xxs) var(--space-sm); --avatar-sm: 1em; --avatar-md: 2em; --avatar-lg: 3em; --rating-icon-size: 1.75em; --hero-diagonal-offset: 50px; --reveal-fx-duration: 0.6s; --reveal-fx-timing-function: var(--transition-ease-out); }

:root, body { --space-unit:  1.25em; --space-xxxxs: calc(0.125 * var(--space-unit)); --space-xxxs:  calc(0.25 * var(--space-unit)); --space-xxs:   calc(0.375 * var(--space-unit)); --space-xs:    calc(0.5 * var(--space-unit)); --space-sm:    calc(0.75 * var(--space-unit)); --space-md:    calc(1.25 * var(--space-unit)); --space-lg:    calc(2 * var(--space-unit)); --space-xl:    calc(3.25 * var(--space-unit)); --space-xxl:   calc(5.25 * var(--space-unit)); --space-xxxl:  calc(8.5 * var(--space-unit)); --space-xxxxl: calc(13.75 * var(--space-unit)); --component-padding: var(--space-sm); --font-primary: 'futuralight','Helvetica Neue', Helvetica, Arial, sans-serif; --font-secondary: 'futuramedium','Helvetica Neue', Helvetica, Arial, sans-serif; --font-title: 'Futura Std Condensed ExtBd','Helvetica Neue', Helvetica, Arial, sans-serif; --text-base-size: 1em; --text-scale-ratio: 1.1; --text-xs: calc((1em / var(--text-scale-ratio)) / var(--text-scale-ratio)); --text-sm: calc(var(--text-xs) * var(--text-scale-ratio)); --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio)); --text-lg: calc(var(--text-md) * var(--text-scale-ratio)); --text-xl: calc(var(--text-lg) * var(--text-scale-ratio)); --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio)); --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio)); --text-xxxxl: calc(var(--text-xxxl) * var(--text-scale-ratio)); --body-line-height: 1.4; --heading-line-height: 1.2; --font-primary-capital-letter: 1; --zindex-header: 2; --zindex-popover: 4; --zindex-fixed-element: 5; --zindex-overlay: 10; --tooltip-triangle-size: 12px; --tabs-border-width: 2px; --tabs-radius: 0.25em; --tabs-control-gap: 0; --tabs-control-radius: 0; --switch-width: 64px; --switch-height: 32px; --switch-padding: 3px; --switch-animation-duration: 0.2s; }