:root {
  --accent:#000000;
}

.progressBar {
  width:100%;
  display:flex;
  border-radius:1vh;
  margin-bottom:5vh;
}

.progressBar:last-child {
  margin-bottom:0;
}

.attacks {
  color:#ffffff;
  font-size:2em;
  text-align:center;
  background-color:#444444;
  border-radius:1vh 0 0 1vh;
}

.defenses {
  color:#ffffff;
  font-size:2em;
  text-align:center;
  background-color:#222222;
  border-radius:0 1vh 1vh 0;
}

.attacks p, .defenses p {
  margin:2vh 0;
  font-weight:bold;
}

#allAtt {
  width:47.22%;
}

#allDef {
  width:52.77%;
}

#cyberpunk {
  color:#bf54e2;
}

div #cyberpunk {
  width:33.33%;
  background-color:#bf54e2;
}

#steampunk {
  color:#bb6726;
}

div #steampunk {
  width:66.66%;
  background-color:#bb6726;
}

#wither {
  color:#a86b8b;
}

div #wither {
  width:42.86%;
  background-color:#a86b8b;
}

#bloom {
  color:#98a54e;
}

div #bloom {
  width:57.14%;
  background-color:#98a54e;
}

#vampire {
  color:#e6466c;
}

div #vampire {
  width:57.14%;
  background-color:#e6466c;
}

#werewolves {
  color:#6291ad;
}

div #werewolves {
  width:42.86%;
  background-color:#6291ad;
}

#stardust {
  color:#877feb;
}

div #stardust {
  width:0%;
  background-color:#877feb;
}

#seafoam {
  color:#51b083;
}

div #seafoam {
  width:100%;
  border-radius:1vh;
  background-color:#51b083;
}

#fossils {
  color:#ba8c25;
}

div #fossils {
  width:50%;
  background-color:#ba8c25;
}

#crystals {
  color:#d35e88;
}

div #crystals {
  width:50%;
  background-color:#d35e88;
}

#tragedy {
  color:#3e8e8b;
}

div #tragedy {
  width:54.55%;
  background-color:#3e8e8b;
}

#comedy {
  color:#ff8040;
}

#mystery {
  color:#e0434a;
}

div #comedy_mystery {
  width:45.45%;
  background-color:#ff8040;
  background-image:linear-gradient(45deg, #ff8040, #ff8040 38vh, #e0434a 10vh);
}