:root {
	/* DARK THEME */
	--color-a-dark: #707070;
	--color-b-dark: #133eee;
	--color-c-dark: #113355;
	--color-d-dark: #f4f4f6;
	--color-e-dark: #fc8000;

	--overlay-color-value-dark: 50, 58, 69;
	--overlay-opacity-value-dark: 0.35;

	/* shadows */
	--box-shadow-dark: 0 4px 10px var(--color-d-dark);
	--text-outline-dark: 0;
}

body.darkMode {
	background-color: var(--color-c-dark);
}

.overlay.darkMode {
	background-color: rgba(
		var(--overlay-color-value-dark),
		var(--overlay-opacity-value-dark)
	);
}

.titleText.darkMode {
	color: var(--color-e-dark);
}

.sectionTitle.darkMode {
	color: var(--color-e-dark);
}

.copyText.darkMode {
	color: var(--color-d-dark);
}

#services ul li h5,
#blog ul li h5 {
	color: var(--color-e-dark);
}

.copyText.darkMode li i {
	color: var(--color-c-dark);
}

.card.darkMode {
	background-color: var(--color-b-dark);
}
.list-group-item.darkMode {
	background-color: var(--color-b-dark);
	color: var(--color-d-dark);
}
.list-group.darkMode {
	background-color: var(--color-b-dark);
}

.boxShadow.darkMode {
	box-shadow: var(--box-shadow-dark);
}

#contactFormContainer.darkMode {
	background-color: var(--color-b-dark);
}
#contactFormContainer.darkMode > form p {
	color: var(--color-c-dark);
}

#contact-form > h1.darkMode {
	color: var(--color-c-dark);
}

.footer.darkMode {
	color: var(--color-d-dark);
}