.block-outer.purple {
	background-color: var(--purple);
	color: #fff;
}

.block-outer.red {
	background-color: var(--red);
	color: #fff;
}

.block-outer.dark-green {
	background-color: var(--green);
	color: #fff;
}

.block-outer.light-green {
	background-color: var(--light-green);
	color: #fff;
}

.block-outer.light-grey {
	background-color: var(--light-grey);
}

.block-outer.white-text-over-background-image {
	color: #fff;
}

.block-outer.purple h1, .block-outer.purple h2, .block-outer.purple h3,
.block-outer.red h1, .block-outer.red h2, .block-outer.red h3,
.block-outer.dark-green h1, .block-outer.dark-green h2, .block-outer.dark-green h3,
.block-outer.light-green h1, .block-outer.light-green h2, .block-outer.light-green h3,
.block-outer.white-text-over-background-image h1, .block-outer.white-text-over-background-image h2, .block-outer.white-text-over-background-image h3
{
	color: #fff;
}

.block-outer.purple a,
.block-outer.red a,
.block-outer.dark-green a,
.block-outer.light-green a,
.block-outer.white-text-over-background-image a
{
	color: var(--light-yellow);
}

.block-outer.purple a:hover,
.block-outer.red a:hover,
.block-outer.dark-green a:hover,
.block-outer.light-green a:hover,
.block-outer.white-text-over-background-image a:hover
{
	text-decoration: underline;
}