:root {
	/* primary brand color - hsl(165, 100%,25%)- with shades and tints */
	--color-primary-h: 165;
	--color-primary-s: 100%;
	--color-primary: hsl(var(--color-primary-h), var(--color-primary-s), 25%);
	--color-primary-light: hsl(160, 35%, 44%);
	--color-primary-dark-1: hsl(159, 100%, 18%);
	--color-primary-dark-2: hsl(159, 100%, 14%);
	--color-primary-dark-3: hsl(159, 100%, 10%);
	--color-primary-semi-transparent: hsla(var(--color-primary-h), 35%, 44%, 0.5);
	--color-primary-transparent: hsla(
		var(--color-primary-h),
		var(--color-primary-s),
		50%,
		0.1
	);

	/* secondary brand color hsl(37, 44%, 58%) with shades and tints */
	--color-secondary-h: 37;
	--color-secondary-s: 44%;
	--color-secondary: hsl(
		var(--color-secondary-h),
		var(--color-secondary-s),
		58%
	);
	--color-secondary-light: hsl(
		var(--color-secondary-h),
		var(--color-secondary-s),
		70%
	);
	--color-secondary-dark: hsl(
		var(--color-secondary-h),
		var(--color-secondary-s),
		29%
	);

	/* our base color, with one tint, and one shade */
	--color-base-h: 0;
	--color-base-s: 0%;
	--color-base-white: hsl(var(--color-base-h), var(--color-base-s), 98%);
	--color-base-grey: hsl(var(--color-base-h), var(--color-base-s), 86%);
	--color-base-dark: hsl(var(--color-base-h), var(--color-base-s), 30%);

	/* Notiflix */
	--notiflix-icon-color: hsl(159, 100%, 18%);

	/* color's */
	--color-card-boarder: hsl(160, 35%, 44%);
	--color-light-grey: hsl(225, 33%, 93%);
	--color-red: hsl(348, 86%, 61%);
	--color-purple: hsl(271, 100%, 71%);
	--color-blue: hsl(217, 71%, 53%);
	--color-cyan: hsl(204, 71%, 53%);
	--color-turquoise: hsl(171, 100%, 41%);
	--color-green: hsl(141, 53%, 53%);
	--color-yellow: hsl(48, 100%, 67%);
}

/* Windsor's inline SVG has generous internal whitespace; render wider than the chassis default so the mark reads. */
.navbar-brand-logo {
	width: 18rem;
}