:root {
	--color-yellow: rgb(219, 219, 123);
	--color-gray: rgb(194, 197, 200);
	--color-grideperlevy: rgb(109, 109, 109);
	--color-dark_gray: rgb(155, 155, 155);
	--color-sky: rgb(163, 202, 218);
	--color-light_green: rgb(146, 232, 146);
	--color-vinous: rgb(231, 150, 112);
	--color-dark_green: rgb(100, 160, 32);
	--color-blue: rgb(116, 175, 236);
	--color-mint: rgb(191, 215, 153);
	--color-white_blue: rgb(162, 200, 235);
	--color-swamp: rgb(188, 203, 152);
	--color-dark_blue: rgb(87, 91, 223);
	--color-purple: rgb(231, 155, 222);
}

.yellow {
	background-color: var(--color-yellow);
	/*background-image: url("img/yt.png");*/
	/*	background-size: contain;*/
}

.active-hexagon.yellow {
	background-image: url("img/red_dashed.png");
	/*background: url("img/yt.png"), url("img/red_dashed.png");*/
	background-size: contain;
	/*background-blend-mode: multiply;*/
}

.gray {
	background-color: var(--color-gray);
}

.active-hexagon.gray {
	background-image: url("img/red_dashed.png");
	background-size: contain;
}

.grideperlevy {
	background-color: var(--color-grideperlevy);
}

.active-hexagon.grideperlevy {
	background-image: url("img/red_dashed.png");
	background-size: contain;
}


.dark_gray {
	background-color: var(--color-dark_gray);
}

.active-hexagon.dark_gray {
	background-image: url("img/red_dashed.png");
	background-size: contain;
}


.sky {
	background-color: var(--color-sky);
}

.active-hexagon.sky {
	background-image: url("img/red_dashed.png");
	background-size: contain;
}


.vinous {
	background-color: var(--color-vinous);
}

.active-hexagon.vinous {
	background-image: url("img/red_dashed.png");
	background-size: contain;
}


.dark_green {
	background-color: var(--color-dark_green);
}

.active-hexagon.dark_green {
	background-image: url("img/red_dashed.png");
	background-size: contain;
}


.light_green {
	background-color: var(--color-light_green);
}

.active-hexagon.light_green {
	background-image: url("img/red_dashed.png");
	background-size: contain;
}


.blue {
	background-color: var(--color-blue);
}

.active-hexagon.blue {
	background-image: url("img/red_dashed.png");
	background-size: contain;
}


.mint {
	background-color: var(--color-mint);
}

.active-hexagon.mint {
	background-image: url("img/red_dashed.png");
	background-size: contain;
}


.white_blue {
	background-color: var(--color-white_blue);
}

.active-hexagon.white_blue {
	background-image: url("img/red_dashed.png");
	background-size: contain;
}


.swamp {
	background-color: var(--color-swamp);
}

.active-hexagon.swamp {
	background-image: url("img/red_dashed.png");
	background-size: contain;
}


.dark_blue {
	background-color: var(--color-dark_blue);
}

.active-hexagon.dark_blue {
	background-image: url("img/red_dashed.png");
	background-size: contain;
}


.purple {
	background-color: var(--color-purple);
}

.active-hexagon.purple {
	background-image: url("img/red_dashed.png");
	background-size: contain;
}