html{--grey-shade-0-l: 0%;--grey-shade-1-l: 19%;--grey-shade-2-l: 33%;--grey-shade-3-l: 67%;--grey-shade-4-l: 86%;--grey-shade-5-l: 95%;--grey-shade-h: 0;--grey-shade-s: 0%;--grey-shade-0: hsl( var(--grey-shade-h), var(--grey-shade-s), var(--grey-shade-0-l) );--grey-shade-1: hsl( var(--grey-shade-h), var(--grey-shade-s), var(--grey-shade-1-l) );--grey-shade-2: hsl( var(--grey-shade-h), var(--grey-shade-s), var(--grey-shade-2-l) );--grey-shade-3: hsl( var(--grey-shade-h), var(--grey-shade-s), var(--grey-shade-3-l) );--grey-shade-4: hsl( var(--grey-shade-h), var(--grey-shade-s), var(--grey-shade-4-l) );--grey-shade-5: hsl( var(--grey-shade-h), var(--grey-shade-s), var(--grey-shade-5-l) );--background-color-secondary: var(--grey-shade-5);--background-color: white;--text-color: hsl(218, 11%, 15%);--text-color-disabled: var(--grey-shade-3);--primary-color-h: 200;--primary-color-s: 100%;--primary-color-l: 47%;--primary-color: hsl( var(--primary-color-h), var(--primary-color-s), var(--primary-color-l) );--secondary-color-h: 198;--secondary-color-s: 100%;--secondary-color-l: 23%;--secondary-color: hsl( var(--secondary-color-h), var(--secondary-color-s), var(--secondary-color-l) );--neutral-color-h: 0;--neutral-color-s: 0%;--neutral-color-l: var(--grey-shade-3-l);--neutral-color: hsl( var(--neutral-color-h), var(--neutral-color-s), var(--neutral-color-l) );--success-color-h: 130;--success-color-s: 48%;--success-color-l: 45%;--success-color: hsl( var(--success-color-h), var(--success-color-s), var(--success-color-l) );--warning-color-h: 30;--warning-color-s: 100%;--warning-color-l: 55%;--warning-color: hsl( var(--warning-color-h), var(--warning-color-s), var(--warning-color-l) );--error-color-h: 1;--error-color-s: 100%;--error-color-l: 59%;--error-color: hsl( var(--error-color-h), var(--error-color-s), var(--error-color-l) )}html{--theme-font-size: 18px;--theme-font: "Lato", sans-serif;--theme-line-height: 1.33;--border-width: .125rem;--focus-outline: var(--border-width) solid var(--primary-color);--focus-outline-inactive: var(--border-width) solid transparent;--focus-outline-offset: var(--border-width);--component-padding: .25rem .25rem;--border-width-underline: .25rem;--border-radius: .25rem;--hover-darken: 8%;--active-darken: 16%;--small-shadow-opacity: .2;--disabled-background-opacity: .4;--disabled-text-opacity: .6;--contrast-threshold: 70%;--transition-base: .15s;--content-panel-padding: 1.5rem;--content-panel-margin: 1rem 1rem;font-size:var(--theme-font-size);font-family:var(--theme-font)}body{display:flex;justify-content:center;transition:background-color ease-in-out calc(var(--transition-base) * .5),opacity ease-in-out calc(var(--transition-base) * .5);opacity:0;background-color:var(--background-color-secondary)}.icon-list{max-width:50%;font-size:24px}.component-list{display:flex}.component-list>*{width:22rem;max-width:22rem}.color-grid{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly}.color-block-background{display:flex;background-color:var(--color);position:relative;min-width:8rem;height:12rem;padding:.25rem 1rem;margin:.25rem;border:var(--border-width) solid var(--grey-shade-4)}.color-block{--color-1: hsla(0, 0%, 100%);--color-2: hsl(0, 0%, calc(100% - var(--hover-darken)));--color-3: hsl(0, 0%, calc(100% - var(--active-darken)));mix-blend-mode:multiply;width:100%;height:100%;position:absolute;margin:-.25rem -1rem;background-image:linear-gradient(180deg,var(--color-1) 0%,var(--color-1) 33%,var(--color-2) 33%,var(--color-2) 66%,var(--color-3) 66%,var(--color-3) 100%)}