:root{
--black: #000000;
--white: #ffffff;

/* colors HEX */
--color1HEX: #171717;
--color2HEX: #faff00;
--color3HEX: #94d5a4;
--color4HEX: #3a74c4;
--color5HEX: #656565;
--color6HEX: #ffffff;

/* colors RGB */
--blackRGB: 0, 0, 0;
--whiteRGB: 255, 255, 255;
--color1RGB: 23, 23, 23;
--color2RGB: 250, 255, 0;
--color3RGB: 148, 213, 164;
--color4RGB: 58, 116, 196;
--color5RGB: 101, 101, 101;
--color6RGB: 255, 255, 255;

/* layout border */
--border-width: 20px;
--border-color: #19a3b2;

/* font families */
--hed-font: "stilson", serif;
--body-font: "canada-type-gibson", sans-serif;
--btn-font: "interstate-mono", monospace;
--mono-font: "interstate-mono", monospace;
--script-font: "canada-type-gibson", sans-serif;

/* font weights */
--hed-font-weight: 700;
--body-font-weight: 200;
--link-font-weight: 500;
--btn-font-weight: 700;
--menu-font-weight: 700;

/* text transform */
--hed-transform: none;
--subhed-transform: uppercase;
--btn-transform: uppercase;
--menu-transform: uppercase;

/* border-radius */
--border-radius: 0px;

/* blend mode */
--blend-mode: exclusion;
}

/* lity */

.lity{
	background: var(--color1HEX);
	background: linear-gradient(
		to bottom,
		var(--color2HEX) 0%,
		rgba(var(--color1RGB), 0.7) 100%
	);
}

.lity-close{
    color: var(--color1HEX);
}

.lity-close:hover,
.lity-close:focus,
.lity-close:active,
.lity-close:visited{
    color: var(--color3HEX);
}