/*===================Pokemon type design===================*/
.pokemonn-type {
    border: 1px solid rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    text-align: center;
    padding: 4px 14px;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.7);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

.pokemonn-type img {
    width: 15px;
    height: 15px;
}

.bug-type {
    border-color: rgb(217, 254, 158);
    color: rgb(217, 254, 158);
}

.dark-type {
    border-color: rgb(157, 122, 100);
    color: rgb(157, 131, 115);
}

.dragon-type {
    border-color: rgb(214, 177, 254);
    color: rgb(214, 177, 254);
}

.electric-type {
    border-color: rgb(247, 253, 133);
    color: rgb(247, 253, 133);
}

.fairy-type,
.fighting-type,
.ghost-type {
    border-color: rgb(253, 209, 224);
    color: rgb(253, 209, 224);
}

.fire-type {
    border-color: rgb(250, 108, 109);
    color: rgb(250, 108, 109);
}

.flying-type {
    border-color: rgb(253, 209, 224);
    color: rgb(253, 209, 224);
    padding: 4px 18px;
}

.grass-type {
    border-color: rgb(73, 208, 176);
    color: rgb(73, 208, 176);
}

.ground-type {
    border-color: rgb(237, 225, 147);
    color: rgb(237, 225, 147);
}

.ice-type {
    border-color: rgba(102, 209, 229, 1);
    color: rgba(102, 209, 229, 1);
}

.normal-type {
    border-color: rgb(234, 234, 222);
    color: rgb(234, 234, 222);
}

.poison-type {
    border-color: rgb(202, 114, 235);
    color: rgb(202, 114, 235);
}

.psychic-type {
    border-color: rgba(245, 87, 146, 1);
    color: rgba(245, 87, 146, 1);
}

.rock-type {
    border-color: rgba(148, 131, 79, 1);
    color: rgba(148, 131, 79, 1);
}

.steel-type {
    border-color: rgb(190, 190, 212);
    color: rgb(187, 197, 196);
}

.water-type {
    border-color: rgb(143, 201, 253);
    color: rgb(143, 201, 253);
}


@media (max-width: 500px) {

    .card-bug-type, .card-dark-type, .card-dragon-type,
    .card-electric-type, .card-fairy-type, .card-fighting-type, .card-fire-type,
    .card-flying-type, .card-grass-type, .card-ghost-type, .card-ground-type,
    .card-ice-type, .card-normal-type, .card-poison-type, .card-psychic-type,
    .card-rock-type, .card-steel-type, .card-water-type {
        font-size: 2rem;
    }
}

@media (max-width: 450px) {

    .bug-type, .dark-type, .dragon-type,
    .electric-type, .fairy-type, .fighting-type, .fire-type,
    .flying-type, .grass-type, .ghost-type, .ground-type,
    .ice-type, .normal-type, .poison-type, .psychic-type,
    .rock-type, .steel-type, .water-type {
        font-size: 11px;
    }
}


/*===================card background color===================*/
.bug {
    background: rgb(217, 254, 158);
    background: radial-gradient(circle, rgba(217, 254, 158, 1) 0%, rgba(0, 0, 0, 1) 100%);
}

.dark {
    background: rgb(116, 91, 75);
    background: radial-gradient(circle, rgba(116, 91, 75, 1) 0%, rgba(80, 80, 80, 1) 100%);
}

.dragon {
    background: rgb(253, 209, 224);
    background: radial-gradient(circle, rgba(253, 209, 224, 1) 0%, rgba(214, 177, 254, 1) 100%);
}

.electric {
    background: rgb(247, 253, 133);
    background: radial-gradient(circle, rgba(247, 253, 133, 1) 0%, rgba(0, 0, 0, 1) 100%);
}

.fairy {
    background: rgb(253, 209, 224);
    background: radial-gradient(circle, rgba(253, 209, 224, 1) 0%, rgba(0, 0, 0, 1) 100%);
}

.fighting {
    background: rgb(253, 209, 224);
    background: radial-gradient(circle, rgba(253, 209, 224, 1) 0%, rgba(211, 96, 98, 1) 100%);
}

.fire {
    background: rgb(250, 108, 109);
    background: radial-gradient(circle, rgba(250, 108, 109, 1) 0%, rgba(0, 0, 0, 1) 100%);
}

.flying {
    background: rgb(253, 209, 224);
    background: radial-gradient(circle, rgba(253, 209, 224, 1) 0%, rgba(187, 197, 196, 1) 100%);
}

.ghost {
    background: rgb(253, 209, 224);
    background: radial-gradient(circle, rgba(253, 209, 224, 1) 0%, rgba(189, 152, 203, 1) 100%);
}

.grass {
    background: rgb(73, 208, 176);
    background: radial-gradient(circle, rgba(73, 208, 176, 1) 0%, rgba(0, 0, 0, 1) 100%);
}

.ground {
    background: rgb(237, 225, 147);
    background: radial-gradient(circle, rgba(237, 225, 147, 1) 0%, rgba(0, 0, 0, 1) 100%);
}

.ice {
    background: rgb(253, 209, 224);
    background: radial-gradient(circle, rgb(225, 225, 225) 0%, rgba(102, 209, 229, 1) 100%);
}

.normal {
    background: rgb(234, 234, 222);
    background: radial-gradient(circle, rgba(234, 234, 222, 1) 0%, rgba(0, 0, 0, 1) 100%);
}

.poison {
    background: rgb(202, 114, 235);
    background: radial-gradient(circle, rgba(202, 114, 235, 1) 0%, rgba(0, 0, 0, 1) 100%);
}

.psychic {
    background: rgb(253, 209, 224);
    background: radial-gradient(circle, rgba(253, 209, 224, 1) 0%, rgba(245, 87, 146, 1) 100%);
}

.rock {
    background: rgb(253, 209, 224);
    background: radial-gradient(circle, rgba(253, 209, 224, 1) 0%, rgba(148, 131, 79, 1) 100%);
}

.steel {
    background: rgb(190, 190, 212);
    background: radial-gradient(circle, rgba(190, 190, 212, 1) 0%, rgb(133, 133, 133) 100%);
}

.water {
    background: rgb(143, 201, 253);
    background: radial-gradient(circle, rgba(143, 201, 253, 1) 0%, rgba(0, 0, 0, 1) 100%);
}


/*===================type button background color===================*/
.bug_select {
    background: rgb(104, 122, 75);
}

.dark_select {
    background: rgb(116, 91, 75);
}

.dragon_select {
    background: rgb(241, 199, 233);
}

.electric_select {
    background: rgb(157, 161, 85);
}

.fairy_select {
    background: rgb(155, 128, 137);
}

.fighting_select {
    background: rgb(226, 134, 139);
}

.fire_select {
    background: rgb(136 58 59);
}

.flying_select {
    background: rgb(212, 202, 206);
}

.ghost_select {
    background: rgb(197, 159, 205);
}

.grass_select {
    background: rgb(30, 78, 67);
}

.ground_select {
    background: rgb(157, 148, 97);
}

.ice_select {
    background: rgb(146, 214, 227);
}

.normal_select {
    background: rgb(145, 145, 138);
}

.poison_select {
    background: rgb(109, 61, 126);
}

.psychic_select {
    background: rgb(247, 118, 165);
}

.rock_select {
    background: rgb(176, 152, 118);
}

.steel_select {
    background: rgb(154, 154, 162);
}

.water_select {
    background: rgb(80, 112, 141);
}