.color {
	border: solid var(--color-text);
	border-radius: 0 2rem 0 2rem;
	width: 50%;
	margin: 1rem auto;
	text-align: center;
	padding: .5rem;
	font-weight: 900;
}

@media (max-width: 1050px) {
	.color {
		width: 70%;
	}
}

@media (max-width: 650px) {
	.color {
		width: 100%;
	}
}

#dark { background-color: var(--color-dark); }
#light { background-color: var(--color-light); }
#purple-dark { background-color: var(--color-purple-dark); }
#purple-light { background-color: var(--color-purple-light); }
#pink-dark { background-color: var(--color-pink-dark); }
#pink-light { background-color: var(--color-pink-light); }
#orange-dark { background-color: var(--color-orange-dark); }
#orange-light { background-color: var(--color-orange-light); }

#dark,
#purple-dark,
#pink-dark,
#orange-dark {
	color: var(--color-light);
}

#light,
#purple-light,
#pink-light,
#orange-light {
	color: var(--color-dark);
}