:root{
    --badColor: #fff;
    --badColorHover: #fff;
    --badBg: #8e0707;
    --badBgHover: #c41818;
    
    --goodColor: #fff;
    --goodColorHover: #fff;
    --goodBg: #097128;
    --goodBgHover: #10a831;
    
    --outsiderColor: #fff;
    --outsiderColorHover: #fff;
    --outsiderBg: #716309;
    --outsiderBgHover: #a8a610;
    
    --passiveColor: #fff;
    --passiveColorHover: #fff;
    --passiveBg: #095271;
    --passiveBgHover: #1078a8;

    --noneColor: #fff;
    --noneColorHover: #fff;
    --noneBg: #454545;
    --noneBgHover: #737373;

    
    --noneTagColor: #000;
    --noneTagColorHover: #000;
    --noneTagBg: #afafaf;
    --noneTagBgHover: #d7d7d7;

    --badTagColor: #fff;
    --badTagColorHover: #fff;
    --badTagBg: #a31515;
    --badTagBgHover: #f78a8a;
    
    --goodTagColor: #fff;
    --goodTagColorHover: #fff;
    --goodTagBg: #097128;
    --goodTagBgHover: #10a831;
    
    --passiveTagColor: #fff;
    --passiveTagColorHover: #fff;
    --passiveTagBg: #137eaf;
    --passiveTagBgHover: #44adeb;

    --badMentionColor: #ffbdbd;
    --badMentionColorHover: #fff;
    --badMentionBg: #4d0606;
    --badMentionBgHover: #f78a8a;
    
    --goodMentionColor: #c6ffcd;
    --goodMentionColorHover: #fff;
    --goodMentionBg: #085b21;
    --goodMentionBgHover: #10a831;
    
    --passiveMentionColor: #ccf3fe;
    --passiveMentionColorHover: #fff;
    --passiveMentionBg: #0b4864;
    --passiveMentionBgHover: #44adeb;
}

.title.bad{
    color: var(--badColor);
    background: var(--badBg);
}
.title.good{
    color: var(--goodColor);
    background: var(--goodBg);
}
.title.outsider{
    color: var(--outsiderColor);
    background: var(--outsiderBg);
}
.title.passive{
    color: var(--passiveColor);
    background: var(--passiveBg);
}
.title.none{
    color: var(--noneColor);
    background: var(--noneBg);
}

.tag{
    padding: .05rem .15rem;
    margin: 0 .25rem;
    border-radius: .25rem;
}
.tag.none{
    color: var(--noneTagColor);
    background: var(--noneTagBg);
}
.tag.passive{
    color: var(--passiveTagColor);
    background: var(--passiveTagBg);
}
.tag.bad{
    color: var(--badTagColor);
    background: var(--badTagBg);
}
.tag.good{
    color: var(--goodTagColor);
    background: var(--goodTagBg);
}

.mention{
    padding: .05rem .15rem;
    margin: 0 .25rem;
    border-radius: .25rem;
}
.mention.none{
    color: var(--noneMentionColor);
    background: var(--noneMentionBg);
}
.mention.passive{
    color: var(--passiveMentionColor);
    background: var(--passiveMentionBg);
}
.mention.bad{
    color: var(--badMentionColor);
    background: var(--badMentionBg);
}
.mention.good{
    color: var(--goodMentionColor);
    background: var(--goodMentionBg);
}