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); /* Grey */
}

.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;
}

/* Ensure links inside these classes stay white (not blue or purple) */
.Fire a,
.Normal a,
.Lightning a,
.Ghost a,
.Metal a,
.Water a,
.default a {
	color: white !important;
	text-decoration: none;
}

/* Override link states completely inside Fire */
.Fire a,
.Fire a:link,
.Fire a:visited,
.Fire a:active,
.Fire a:focus,
.Fire a:hover {
	color: white !important;
	text-decoration: none !important;
}


/* Optional hover style (white stays white or glow slightly) */
.Fire a:hover,
.Normal a:hover,
.Lightning a:hover,
.Ghost a:hover,
.Metal a:hover,
.Water a:hover,
.default a:hover {
	color: white !important;
	filter: brightness(1.2);
}