
.grass {
    background: linear-gradient(45deg, #7BCF6B, #48D0B0);
    border: 2px solid #48D0B0;
    color: #2E7D32;
    box-shadow: 0 4px 8px rgba(72, 208, 176, 0.5);
}

.fire {
    background: linear-gradient(45deg, #FFA726, #FB8C00);
    border: 2px solid #FB8C00;
    color: #E65100;
    box-shadow: 0 4px 8px rgba(251, 140, 0, 0.5);
}

.electric {
    background: linear-gradient(45deg, #FFEB3B, #FDD835);
    border: 2px solid #FDD835;
    color: #FBC02D;
    box-shadow: 0 4px 8px rgba(253, 216, 53, 0.5);
}

.water {
    background: linear-gradient(45deg, #64B5F6, #2196F3);
    border: 2px solid #2196F3;
    color: #1565C0;
    box-shadow: 0 4px 8px rgba(33, 150, 243, 0.5);
}

.rock {
    background: linear-gradient(45deg, #A1887F, #795548);
    border: 2px solid #795548;
    color: #4E342E;
    box-shadow: 0 4px 8px rgba(121, 85, 72, 0.5);
}

.bug {
    background: linear-gradient(45deg, #9CCC65, #8BC34A);
    border: 2px solid #8BC34A;
    color: #558B2F;
    box-shadow: 0 4px 8px rgba(139, 195, 74, 0.5);
}

.normal {
    background: linear-gradient(45deg, #E0E0E0, #BDBDBD);
    border: 2px solid #BDBDBD;
    color: #616161;
    box-shadow: 0 4px 8px rgba(189, 189, 189, 0.5);
}

.poison {
    background: linear-gradient(45deg, #BA68C8, #9C27B0);
    border: 2px solid #9C27B0;
    color: #6A1B9A;
    box-shadow: 0 4px 8px rgba(156, 39, 176, 0.5);
}

.ground {
    background: linear-gradient(45deg, #D2B48C, #A1887F);
    border: 2px solid #A1887F;
    color: #5D4037;
    box-shadow: 0 4px 8px rgba(161, 136, 127, 0.5);
}

.fairy {
    background: linear-gradient(45deg, #F48FB1, #EC407A);
    border: 2px solid #EC407A;
    color: #AD1457;
    box-shadow: 0 4px 8px rgba(236, 64, 122, 0.5);
}

.fighting {
    background: linear-gradient(45deg, #FF7043, #F4511E);
    border: 2px solid #F4511E;
    color: #BF360C;
    box-shadow: 0 4px 8px rgba(244, 81, 30, 0.5);
}

.psychic {
    background: linear-gradient(45deg, #E57373, #EF5350);
    border: 2px solid #EF5350;
    color: #D32F2F;
    box-shadow: 0 4px 8px rgba(239, 83, 80, 0.5);
}

.ghost {
    background: linear-gradient(45deg, #9575CD, #673AB7);
    border: 2px solid #673AB7;
    color: #512DA8;
    box-shadow: 0 4px 8px rgba(103, 58, 183, 0.5);
}

.ice {
    background: linear-gradient(45deg, #ffffff, #d2effd);
    border: 2px solid #b8e8ff;
    color: #68caff;
    box-shadow: 0 4px 8px rgba(79, 195, 247, 0.5);
}

.steel {
    background: linear-gradient(45deg, #adadad, #5a5a5a);
    border: 2px solid rgb(94, 94, 94);
    color: #363636;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.dark {
    background: rgb(39, 39, 39);
    border: 2px solid #000000;
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.dragon {
    background: linear-gradient(45deg, #98bb90, #ffc977, #aed9fc, #f3b6fd);
    border: 2px solid #cce9c5;
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(117, 213, 230, 0.5);
}

.grasstype {
    background: #B2DFB2;
}

.firetype {
    background: #fcc96a;
}

.electrictype {
    background: #FFF8A5;
}

.watertype {
    background: #ACCDFB;
}

.rocktype {
    background: #CDB6B6;
}

.bugtype {
    background: #CDE6A5;
}

.normaltype {
    background: #EAEAEA;
}

.poisontype {
    background: #D4B4E1;
}

.groundtype {
    background: #CDB6B6;
}

.fairytype {
    background: #F6A9C0;
}

.fightingtype {
    background: #FFA491;
}

.psychictype {
    background: #FFBFC9;
}

.ghosttype {
    background: #C4B3E1;
}

.icetype {
    background: #B3E5FC;
}

.steeltype {
    background: #dbdbdb;
}

.darktype {
    background: #747474;
}

.dragontype {
    background: linear-gradient(45deg, #82947e, #957f5e, #6e7b86, #7c657f)
}

.hp {
    background-color: rgb(255, 0, 0);
    border-radius: 5px;
}

.attack {
    background-color: rgb(255, 119, 0);
    border-radius: 5px;
}

.special-attack {
    background-color: rgba(255, 119, 0, 0.5);
    border-radius: 5px;
}

.defense {
    background-color: rgb(0, 157, 255);
    border-radius: 5px;
}

.special-defense {
    background-color: rgba(2, 120, 194, 0.6);
    border-radius: 5px;
}

.speed {
    background-color: rgb(16, 197, 0);
    border-radius: 5px;
}