.user-gray    {color: rgb(191, 191, 191) !important; }
.user-blue    {color: rgb( 52, 152, 219) !important; }
.user-green   {color: rgb( 82, 196,  26) !important; }
.user-orange  {color: rgb(243, 156,  17) !important; }
.user-red     {color: rgb(254,  76,  97) !important; }
.user-purple  {color: rgb(157,  61, 207) !important; }

.bg-gray    { background-color: rgb(191, 191, 191) !important; }
.bg-blue    { background-color: rgb( 52, 152, 219) !important; }
.bg-green   { background-color: rgb( 82, 196,  26) !important; }
.bg-orange  { background-color: rgb(243, 156,  17) !important; }
.bg-red     { background-color: rgb(254,  76,  97) !important; }
.bg-purple  { background-color: rgb(157,  61, 207) !important; }

.user-name {
  font-weight: bolder !important;
  font-size: 15px;
}
.user-tag {
  border-radius: 3px;
  display: inline-block;
  padding: .3em .5em;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  font-size: 12px;
  margin: .2em;
}
.user-nameplate {
  font-size: 10px;
}

.namecard {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  margin: 5px;
  cursor: pointer;
}


.user-rainbow {
  background: linear-gradient(120deg, red, orange, yellow, green, cyan, blue, indigo, purple);
  animation: hue 2s linear infinite;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bg-rainbow {
  background: linear-gradient(120deg, red, orange, yellow, green, cyan, blue, indigo, purple);
  animation: hue 2s linear infinite;
}
@keyframes hue {
    0% { filter: hue-rotate(  0deg); }
  100% { filter: hue-rotate(360deg); }
}