:root {
  --bg-dark: #333333;
  --color-white: #ffffff;
}

.headline {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60%;
  padding: 1rem;
  background-color: var(--bg-dark);
  color: var(--color-white);
  font-size: clamp(2rem, 5vw, 4rem);
  text-align: center;
}

.DeathKnight {
    background-color: #C41E3A !important;
}

.DemonHunter {
    background-color: #A330C9 !important;
}

.Druid {
    background-color: #FF7C0A !important;
}

.Evoker {
    background-color: #33937F !important;
}

.Hunter {
    background-color: #AAD372 !important;
}

.Mage {
    background-color: #3FC7EB !important;
}

.Monk {
    background-color: #00FF98 !important;
}

.Paladin {
    background-color: #F48CBA !important;
}

.Priest {
    background-color: #FFFFFF !important;
}

.Rogue {
    background-color: #FFF468 !important;
}

.Shaman {
    background-color: #0070DD !important;
}

.Warlock {
    background-color: #8788EE !important;
}

.Warrior {
    background-color: #C69B6D !important;
}