:root {
    --type-normal: #A8A77A;
    --type-fire: #EE8130;
    --type-water: #6390F0;
    --type-electric: #F7D02C;
    --type-grass: #7AC74C;
    --type-ice: #96D9D6;
    --type-fighting: #C22E28;
    --type-poison: #A33EA1;
    --type-ground: #E2BF65;
    --type-flying: #A98FF3;
    --type-psychic: #F95587;
    --type-bug: #A6B91A;
    --type-rock: #B6A136;
    --type-ghost: #735797;
    --type-dragon: #6F35FC;
    --type-dark: #705746;
    --type-steel: #B7B7CE;
    --type-fairy: #D685AD;
}

.type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .18rem .6rem;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: #fff !important;
    background: #999 !important;
    border: 1px solid rgba(0,0,0,.18) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.10) !important;
}

    .type-badge[data-type="normal"] {
        background: var(--type-normal) !important;
    }

    .type-badge[data-type="fire"] {
        background: var(--type-fire) !important;
    }

    .type-badge[data-type="water"] {
        background: var(--type-water) !important;
    }

    .type-badge[data-type="electric"] {
        background: var(--type-electric) !important;
        color: #111827 !important;
    }

    .type-badge[data-type="grass"] {
        background: var(--type-grass) !important;
    }

    .type-badge[data-type="ice"] {
        background: var(--type-ice) !important;
        color: #111827 !important;
    }

    .type-badge[data-type="fighting"] {
        background: var(--type-fighting) !important;
    }

    .type-badge[data-type="poison"] {
        background: var(--type-poison) !important;
    }

    .type-badge[data-type="ground"] {
        background: var(--type-ground) !important;
        color: #111827 !important;
    }

    .type-badge[data-type="flying"] {
        background: var(--type-flying) !important;
    }

    .type-badge[data-type="psychic"] {
        background: var(--type-psychic) !important;
    }

    .type-badge[data-type="bug"] {
        background: var(--type-bug) !important;
        color: #111827 !important;
    }

    .type-badge[data-type="rock"] {
        background: var(--type-rock) !important;
        color: #111827 !important;
    }

    .type-badge[data-type="ghost"] {
        background: var(--type-ghost) !important;
    }

    .type-badge[data-type="dragon"] {
        background: var(--type-dragon) !important;
    }

    .type-badge[data-type="dark"] {
        background: var(--type-dark) !important;
    }

    .type-badge[data-type="steel"] {
        background: var(--type-steel) !important;
        color: #111827 !important;
    }

    .type-badge[data-type="fairy"] {
        background: var(--type-fairy) !important;
        color: #111827 !important;
    }




.bug-flying {
    background: linear-gradient(to right, #A6B91A, #A98FF3);
}

.bug-water {
    background: linear-gradient(to right, #A6B91A, #6390F0);
}

.bug-fighting {
    background: linear-gradient(to right, #A6B91A, #C22E28);
}

.bug-grass {
    background: linear-gradient(to right, #A6B91A, #7AC74C);
}

.bug-poison {
    background: linear-gradient(to right, #A6B91A, #A33EA1);
}

.bug-rock {
    background: linear-gradient(to right, #A6B91A, #B6A136);
}

.bug-steel {
    background: linear-gradient(to right, #A6B91A, #B7B7CE);
}

.bug-ground {
    background: linear-gradient(to right, #A6B91A, #E2BF65);
}

.bug-ghost {
    background: linear-gradient(to right, #A6B91A, #735797);
}

.bug-electric {
    background: linear-gradient(to right, #A6B91A, #F7D02C);
}

.bug-dark {
    background: linear-gradient(to right, #A6B91A, #705746);
}

.bug-fire {
    background: linear-gradient(to right, #A6B91A, #EE8130);
}

.bug-fairy {
    background: linear-gradient(to right, #A6B91A, #D685AD);
}

.bug-psychic {
    background: linear-gradient(to right, #A6B91A, #F95587);
}

.bug-ice {
    background: linear-gradient(to right, #A6B91A, #96D9D6);
}


.dark-grass {
    background: linear-gradient(to right, #705746, #7AC74C);
}

.dark-ghost {
    background: linear-gradient(to right, #705746, #735797);
}

.dark-fairy {
    background: linear-gradient(to right, #705746, #D685AD);
}

.dark-fighting {
    background: linear-gradient(to right, #705746, #C22E28);
}

.dark-steel {
    background: linear-gradient(to right, #705746, #B7B7CE);
}

.dark-ice {
    background: linear-gradient(to right, #705746, #96D9D6);
}

.dark-fire {
    background: linear-gradient(to right, #705746, #EE8130);
}

.dark-dragon {
    background: linear-gradient(to right, #705746, #6F35FC);
}

.dark-normal {
    background: linear-gradient(to right, #705746, #A8A77A);
}

.dark-electric {
    background: linear-gradient(to right, #705746, #F7D02C);
}

.dragon-grass {
    background: linear-gradient(to right, #6F35FC, #7AC74C);
}

.dragon-fire {
    background: linear-gradient(to right, #6F35FC, #EE8130);
}

.dragon-electric {
    background: linear-gradient(to right, #6F35FC, #F7D02C);
}

.dragon-ice {
    background: linear-gradient(to right, #6F35FC, #96D9D6);
}

.dragon-water {
    background: linear-gradient(to right, #6F35FC, #6390F0);
}

.dragon-fairy {
    background: linear-gradient(to right, #6F35FC, #D685AD);
}

.dragon-flying {
    background: linear-gradient(to right, #6F35FC, #A98FF3);
}

.dragon-ghost {
    background: linear-gradient(to right, #6F35FC, #735797);
}

.dragon-steel {
    background: linear-gradient(to right, #6F35FC, #B7B7CE);
}

.dragon-fighting {
    background: linear-gradient(to right, #6F35FC, #C22E28);
}

.dragon-normal {
    background: linear-gradient(to right, #6F35FC, #A8A77A);
}

.electric-ice {
    background: linear-gradient(to right, #F7D02C, #96D9D6);
}

.electric-ghost {
    background: linear-gradient(to right, #F7D02C, #735797);
}

.electric-flying {
    background: linear-gradient(to right, #F7D02C, #A98FF3);
}

.electric-water {
    background: linear-gradient(to right, #F7D02C, #6390F0);
}

.electric-fairy {
    background: linear-gradient(to right, #F7D02C, #D685AD);
}

.electric-psychic {
    background: linear-gradient(to right, #F7D02C, #F95587);
}

.electric-steel {
    background: linear-gradient(to right, #F7D02C, #B7B7CE);
}

.electric-fighting {
    background: linear-gradient(to right, #F7D02C, #C22E28);
}

.electric-ground {
    background: linear-gradient(to right, #F7D02C, #E2BF65);
}

.electric-normal {
    background: linear-gradient(to right, #F7D02C, #A8A77A);
}

.electric-rock {
    background: linear-gradient(to right, #F7D02C, #B6A136);
}

.electric-poison {
    background: linear-gradient(to right, #F7D02C, #A33EA1);
}

.fairy-flying {
    background: linear-gradient(to right, #D685AD, #A98FF3);
}

.fairy-grass {
    background: linear-gradient(to right, #D685AD, #7AC74C);
}

.fairy-psychic {
    background: linear-gradient(to right, #D685AD, #F95587);
}

.fairy-fighting {
    background: linear-gradient(to right, #D685AD, #C22E28);
}

.fighting-dark {
    background: linear-gradient(to right, #C22E28, #705746);
}

.fighting-ice {
    background: linear-gradient(to right, #C22E28, #96D9D6);
}

.fighting-grass {
    background: linear-gradient(to right, #C22E28, #7AC74C);
}

.fighting-flying {
    background: linear-gradient(to right, #C22E28, #A98FF3);
}

.fighting-psychic {
    background: linear-gradient(to right, #C22E28, #F95587);
}

.fighting-steel {
    background: linear-gradient(to right, #C22E28, #B7B7CE);
}

.fighting-water {
    background: linear-gradient(to right, #C22E28, #6390F0);
}

.fighting-fire {
    background: linear-gradient(to right, #C22E28, #EE8130);
}

.fighting-rock {
    background: linear-gradient(to right, #C22E28, #B6A136);
}

.fighting-ground {
    background: linear-gradient(to right, #C22E28, #E2BF65);
}

.fire-water {
    background: linear-gradient(to right, #EE8130, #6390F0);
}

.fire-flying {
    background: linear-gradient(to right, #EE8130, #A98FF3);
}

.fire-ground {
    background: linear-gradient(to right, #EE8130, #E2BF65);
}

.fire-psychic {
    background: linear-gradient(to right, #EE8130, #F95587);
}

.fire-rock {
    background: linear-gradient(to right, #EE8130, #B6A136);
}

.fire-ghost {
    background: linear-gradient(to right, #EE8130, #735797);
}

.dark-grass {
    background: linear-gradient(to right, #705746, #7AC74C);
}

.grass-normal {
    background: linear-gradient(to right, #7AC74C, #A8A77A);
}

.grass-fairy {
    background: linear-gradient(to right, #7AC74C, #D685AD);
}

.grass-psychic {
    background: linear-gradient(to right, #7AC74C, #F95587);
}

.grass-poison {
    background: linear-gradient(to right, #7AC74C, #A33EA1);
}

.grass-ice {
    background: linear-gradient(to right, #7AC74C, #96D9D6);
}

.grass-steel {
    background: linear-gradient(to right, #7AC74C, #B7B7CE);
}

.fire-grass {
    background: linear-gradient(to right, #EE8130, #7AC74C );
}

.fire-normal {
    background: linear-gradient(to right, #EE8130, #A8A77A);
}

.ground-flying {
    background: linear-gradient(to right, #E2BF65, #A98FF3);
}

.ground-normal {
    background: linear-gradient(to right, #E2BF65, #A8A77A);
}

.dragon-ground {
    background: linear-gradient(to right, #6F35FC, #E2BF65);
}

.ground-ghost {
    background: linear-gradient(to right, #E2BF65, #735797);
}

.ground-psychic {
    background: linear-gradient(to right, #E2BF65, #F95587);
}

.ground-steel {
    background: linear-gradient(to right, #E2BF65, #B7B7CE);
}

.ground-ice {
    background: linear-gradient(to right, #E2BF65, #96D9D6);
}

.ice-water {
    background: linear-gradient(to right, #96D9D6, #6390F0);
}

.ice-rock {
    background: linear-gradient(to right, #96D9D6, #B6A136);
}

.ice-psychic {
    background: linear-gradient(to right, #96D9D6, #F95587);
}

.normal-psychic {
    background: linear-gradient(to right, #A8A77A, #F95587);
}

.normal-poison {
    background: linear-gradient(to right, #A8A77A, #A33EA1);
}

.normal-water {
    background: linear-gradient(to right, #A8A77A, #6390F0);
}

.fairy-normal {
    background: linear-gradient(to right, #D685AD, #A8A77A);
}

.fairy-water {
    background: linear-gradient(to right, #D685AD, #6390F0);
}

.fairy-ghost {
    background: linear-gradient(to right, #D685AD, #735797);
}

.flying-normal {
    background: linear-gradient(to right,#A98FF3, #A8A77A);
}

.flying-grass {
    background: linear-gradient(to right,#A98FF3, #7AC74C);
}

.flying-ground {
    background: linear-gradient(to right,#A98FF3, #E2BF65);
}

.flying-ice {
    background: linear-gradient(to right,#A98FF3, #96D9D6);
}

.flying-rock {
    background: linear-gradient(to right,#A98FF3, #B6A136);
}

.dark-poison {
    background: linear-gradient(to right, #705746, #A33EA1);
}

.ghost-poison {
    background: linear-gradient(to right, #735797, #A33EA1);
}

.ghost-ice {
    background: linear-gradient(to right, #735797, #96D9D6);
}

.ghost-grass {
    background: linear-gradient(to right, #735797, #7AC74C);
}

.ghost-ground {
    background: linear-gradient(to right, #735797, #E2BF65);
}

.flying-ghost {
    background: linear-gradient(to right, #A98FF3, #735797);
}

.flying-poison {
    background: linear-gradient(to right, #A98FF3, #A33EA1);
}

.flying-psychic {
    background: linear-gradient(to right, #A98FF3, #F95587);
}

.flying-water {
    background: linear-gradient(to right, #A98FF3, #6390F0);
}

.dark-flying {
    background: linear-gradient(to right,#705746, #A98FF3);
}

.dark-rock {
    background: linear-gradient(to right,#705746, #B6A136);
}

.flying-steel {
    background: linear-gradient(to right, #A98FF3, #B7B7CE);
}

.dark-ground {
    background: linear-gradient(to right, #705746, #E2BF65);
}

.ground-poison {
    background: linear-gradient(to right,#E2BF65, #A33EA1);
}

.ground-water {
    background: linear-gradient(to right,#E2BF65, #6390F0);
}

.psychic-bug {
    background: linear-gradient(to right, #F95587, #A6B91A);
}

.psychic-fairy {
    background: linear-gradient(to right, #F95587, #D685AD);
}

.ghost-psychic {
    background: linear-gradient(to right, #735797,#F95587);
}

.psychic-water {
    background: linear-gradient(to right, #F95587, #6390F0);
}

.rock-ghost {
    background: linear-gradient(to right, #B6A136, #735797);
}

.grass-rock {
    background: linear-gradient(to right, #7AC74C, #B6A136);
}

.grass-ground {
    background: linear-gradient(to right, #7AC74C, #E2BF65);
}

.rock-water {
    background: linear-gradient(to right, #B6A136, #6390F0);
}

.ground-rock {
    background: linear-gradient(to right, #E2BF65, #B6A136);
}

.rock-steel {
    background: linear-gradient(to right, #B6A136, #B7B7CE);
}

.dragon-steel {
    background: linear-gradient(to right, #6F35FC, #B7B7CE);
}

.dragon-psychic {
    background: linear-gradient(to right, #6F35FC, #B7B7CE);
}

.dragon-poison {
    background: linear-gradient(to right, #6F35FC, #A33EA1);
}

.dragon-rock {
    background: linear-gradient(to right, #6F35FC, #B6A136);
}

.fairy-rock {
    background: linear-gradient(to right, #D685AD, #B6A136);
}

.fairy-steel {
    background: linear-gradient(to right, #D685AD, #B7B7CE);
}

.psychic-steel {
    background: linear-gradient(to right, #B7B7CE, #F95587);
}

.psychic-rock {
    background: linear-gradient(to right, #B7B7CE, #B6A136);
}

.ground-psychic {
    background: linear-gradient(to right, #6390F0, #B7B7CE);
}

.dark-water {
    background: linear-gradient(to right, #705746, #6390F0);
}

.dark-psychic {
    background: linear-gradient(to right, #705746, #B7B7CE);
}

.steel-water {
    background: linear-gradient(to right, #B7B7CE, #6390F0);
}

.ghost-steel {
    background: linear-gradient(to right,#735797,#B7B7CE);
}

.fire-steel {
    background: linear-gradient(to right,#EE8130,#B7B7CE);
}

.fire-ghost {
    background: linear-gradient(to right,#EE8130, #735797);
}

.fire-poison {
    background: linear-gradient(to right,#EE8130, #A33EA1);
}

.water-flying {
    background: linear-gradient(to right, #6390F0, #A98FF3);
}

.water-ground {
    background: linear-gradient(to right, #6390F0, #E2BF65);
}

.ghost-water {
    background: linear-gradient(to right, #735797, #6390F0);
}

.grass-water {
    background: linear-gradient(to right, #7AC74C, #6390F0);
}

.water-ice {
    background: linear-gradient(to right, #6390F0, #96D9D6);
}

.poison-steel {
    background: linear-gradient(to right, #A33EA1, #B7B7CE);
}

.poison-water {
    background: linear-gradient(to right, #A33EA1, #6390F0);
}

.poison-rock {
    background: linear-gradient(to right, #A33EA1, #B6A136);
}

.fighting-poison {
    background: linear-gradient(to right,#C22E28, #A33EA1);
}

.fighting-normal {
    background: linear-gradient(to right,#C22E28, #A8A77A);
}

.fighting-ghost {
    background: linear-gradient(to right,#C22E28, #735797);
}