:root {
	/* Define CSS Variable & Use it using var function OK. Working */
	
	/* English Colors */
	
 	--english-blue: #00c0ef;
	--english-green: #00a65a;
	--english-red: #dd4b39;
	--english-orange: #f39c12;
	
}

/* Text Colors */
.my-text-blue {
	color: var(--english-blue);
}

.my-text-green {
	color: var(--english-green);
}

.my-text-red {
	color: var(--english-red);
}

.my-text-orange {
	color: var(--english-orange);
}

.my-text-darkest {
	color: var(--my-darkest);
}

.my-text-dark {
	color: var(--my-dark);
}

.my-text-lightest {
	color: var(--my-lightest);
}

.my-text-light {
	color: var(--my-light);
}

.my-text-white {
	/* background-color: darkgreen; */
	color: white;
}


/* Background Colors */
.my-bg-blue {
	background-color: var(--english-blue);
}

.my-bg-green {
	background-color: var(--english-green);
}

.my-bg-red {
	background-color: var(--english-red);
}

.my-bg-orange {
	background-color: var(--english-orange);
}

.my-bg-darkest {
	background-color: var(--my-darkest);
}

.my-bg-dark {
	background-color: var(--my-dark);
}

.my-bg-light {
	background-color: var(--my-light);
}

.my-bg-lightest {
	background-color: var(--my-lightest);
}


.my-text-primary {
	/* color: darkgreen; */
	color: var(--my-dark);
}

.my-bg-primary {
	/* background-color: darkgreen; */
	background-color: var(--my-dark);
}

.my-bg-white {
	/* background-color: darkgreen; */
	background-color: white;
}


/* Button Class */
.mybtn {
	color: white;
	background-color: var(--my-light);
}

.mybtn:hover {
	color: white;
	background-color: var(--my-darkest);
}

.mybtn-danger {
	color: white;
	background-color: var(--english-red);
}

.mybtn-danger:hover {
	color: white;
	background-color: darkred;
}

a:hover {
	color: var(--my-darkest);
}