/* Base styles for user groups using CSS variables */
.wraith {
    --accent: #5c5c5c; /* Base color for wraith */
    color: var(--accent);
	transition: color 0.8s ease-in-out;
}

.mortal {
    --accent: #9b8d7d;
    color: var(--accent);
	transition: color 0.8s ease-in-out;
}

.vampire {
    --accent: #771d1d;
    color: var(--accent);
	transition: color 0.8s ease-in-out;
}

.werewolf {
    --accent: #777753;
    color: var(--accent);
	transition: color 0.8s ease-in-out;
}

.imbued {
    --accent: #978d8d;
    color: var(--accent);
	transition: color 0.8s ease-in-out;
}


 a:hover font.wraith {
     color: var(--highlight);
  text-decoration: none;
  transition: color 0.8s ease-in-out;
}


a:hover font.mortal {
      color: var(--highlight);
  text-decoration: none;
  transition: color 0.8s ease-in-out;
}


a:hover font.vampire {
      color: var(--highlight);
  text-decoration: none;
  transition: color 0.8s ease-in-out;
}


a:hover font.werewolf {
    color: var(--highlight);
  text-decoration: none;
  transition: color 0.8s ease-in-out;
}


a:hover font.imbued {
   color: var(--highlight);
  text-decoration: none;
  transition: color 0.8s ease-in-out;
}