.normal {
    background-color: #A8A77A;
}

.fighting {
    background-color: #C22E28;
}

.flying {
    background-color: #A98FF3;
}

.poison {
    background-color: #A33EA1;
}

.ground {
    background-color: #E2BF65;
}

.rock {
    background-color: #B6A136;
}

.bug {
    background-color: #A6B91A;
}

.ghost {
    background-color: #735797;
}

.steel {
    background-color: #B7B7CE;
}

.fire {
    background-color: #EE8130;
}

.water {
    background-color: #6390F0;
}

.grass {
    background-color: #7AC74C;
}

.electric {
    background-color: #F7D02C;
}

.psychic {
    background-color: #F95587;
}

.ice {
    background-color: #96D9D6;
}

.dragon {
    background-color: #6F35FC;
}

.dark {
    background-color: #705746;
}

.fairy {
    background-color: #D685AD;
}

/* for arrows */
.normalArrow {
    fill: #A8A77A;
}

.fightingArrow {
    fill: #C22E28;
}

.flyingArrow {
    fill: #A98FF3;
}

.poisonArrow {
    fill: #A33EA1;
}

.groundArrow {
    fill: #E2BF65;
}

.rockArrow {
    fill: #B6A136;
}

.bugArrow {
    fill: #A6B91A;
}

.ghostArrow {
    fill: #735797;
}

.steelArrow {
    fill: #B7B7CE;
}

.fireArrow {
    fill: #EE8130;
}

.waterArrow {
    fill: #6390F0;
}

.grassArrow {
    fill: #7AC74C;
}

.electricArrow {
    fill: #F7D02C;
}

.psychicArrow {
    fill: #F95587;
}

.iceArrow {
    fill: #96D9D6;
}

.dragonArrow {
    fill: #6F35FC;
}

.darkArrow {
    fill: #705746;
}

.fairyArrow {
    fill: #D685AD;
}