Template:Element/style.css

.default {
	color: white;
	border: #000;
}

.Normal {
	color: rgb(255, 255, 255); /* WHITE */
}

.Lightning {
	color: rgb(255, 255, 0); /* YELLOW */
}

.Ghost {
	color: rgb(112, 38, 112); /* Purple */
}

.Metal {
	color: rgb(112, 38, 112); /* Grey */
}

.Water {
	color: rgb(0, 0, 255); /* Blue */
}

/* Fire text shadow */
.Fire {
	color: white;
	text-shadow:
		-2px 1px 0 #ff4d1a,
		-2px 0px 0 #ff4d1a,
		-1px 2px 0 #ff4d1a,
		 2px -1px 0 #ff4d1a,
		 2px 0px 0 #ff4d1a,
		 1px -2px 0 #ff4d1a,
		 0px -2px 0 #ff4d1a,
		-1px -2px 0 #ff4d1a,
		 2px 1px 0 #ff4d1a,
		 0px 2px 0 #ff4d1a,
		 1px 2px 0 #ff4d1a;
}

/* Force white link color inside .Fire (TemplateStyles-safe way) */
.mw-parser-output .Fire a,
.mw-parser-output .Fire a:link,
.mw-parser-output .Fire a:visited,
.mw-parser-output .Fire a:active,
.mw-parser-output .Fire a:focus,
.mw-parser-output .Fire a:hover {
	color: white !important;
	text-decoration: none !important;
}

/* Optional hover glow */
.mw-parser-output .Fire a:hover {
	filter: brightness(1.4);
}