/* Dark background and readable profile details for the Classes page. */
.classes { background: #0c0812; }
.class-explorer {
  background: radial-gradient(ellipse at 55% 45%, #291638 0%, #140d1e 55%, #0c0812 100%);
}
.class-explorer::before {
  border-color: rgba(187, 112, 235, .14);
  box-shadow: 0 0 0 90px rgba(155, 77, 255, .025), 0 0 0 180px rgba(155, 77, 255, .015);
}
.class-explorer::after { border-color: rgba(187, 112, 235, .25); }
.class-profile, .profile-name { color: #f7f0fc; }
.profile-role, .profile-content::before, .profile-meta b { color: #c5afd5; }
.profile-text { color: #f2b6df; }
.profile-meta, .profile-story, .class-ratings li { color: #d1c5db; }
.profile-meta { border-color: rgba(187, 112, 235, .25); }
.profile-story::before, .class-details h4 { color: #eed9fa; }
.stars i, .rating-unavailable { color: #83718f; }
.hero-node { background: #21132e; border-color: #715485; }
.hero-node:hover, .hero-node.active { border-color: #d580f4; }
.class-modes button {
  background: #251632;
  border-color: #715485;
  color: #eadcf3;
}
.class-modes button.active, .class-modes button:hover {
  background: var(--neon-gradient);
  border-color: #d580f4;
  color: #fff;
}

/* Give the character artwork more distance from the description column. */
@media (min-width: 801px) {
  .class-profile .profile-art {
    left: 62%;
    width: min(870px, 62vw);
  }
}