.pkapi-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.pkapi-container .pkapi-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 20px;
    transition: 0.5s;
}

.pkapi-container .pkapi-card:hover {
    scale: 110%;
}

.pkapi-container .pkapi-header {
    background-color: #eeeeee;
    padding: 12px;
}

.pkapi-container .pkapi-img {
    width: 150px;
    height: 150px;
}

.pkapi-container .pkapi-info {
    display: flex;
    flex-direction: column;
    padding-left: 10px;
}

.pkapi-container .pkapi-info .pkapi-id {
    font-size: 16px;
    margin-bottom: 10px;
}

.pkapi-container .pkapi-info .pkapi-title {
    font-weight: 600;
}

.pkapi-container .pkapi-info .pkapi-type {
    border-radius: 3px;
    line-height: 18px;
    max-width: 110px;
    margin: 0 1.5625% 0 0;
    width: 38.4375%;
    float: left;
    text-transform: none;
    font-size: 11px;
    text-align: center;
}

.type-normal {
    background: linear-gradient(180deg, #a4acaf 50%, #a4acaf 50%);
    background-color: #a4acaf;
    color: #212121;
}

.type-grass {
    background: linear-gradient(180deg, #9bcc50 50%, #9bcc50 50%);
    background-color: #9bcc50;
    color: #212121;
}

.type-fire {
    background: linear-gradient(180deg, #fd7d24 50%, #fd7d24 50%);
    background-color: #fd7d24;
    color: #fff;
}

.type-water {
    background: linear-gradient(180deg, #4592c4 50%, #4592c4 50%);
    background-color: #4592c4;
    color: #fff;
}

.type-electric {
    background: linear-gradient(180deg, #eed535 50%, #eed535 50%);
    background-color: #eed535;
    color: #212121;
}

.type-bug {
    background: linear-gradient(180deg, #729f3f 50%, #729f3f 50%);
    background-color: #729f3f;
    color: #fff;
}

.type-flying {
    background: linear-gradient(180deg, #3dc7ef 50%, #bdb9b8 50%);
    background-color: #3dc7ef;
    color: #212121;
}

.type-rock {
    background: linear-gradient(180deg, #a38c21 50%, #a38c21 50%);
    background-color: #a38c21;
    color: #fff;
}

.type-poison {
    background: linear-gradient(180deg, #b97fc9 50%, #b97fc9 50%);
    background-color: #b97fc9;
    color: #fff;
}

.type-ground {
    background: linear-gradient(180deg, #f7de3f 50%, #ab9842 50%);
    background-color: #f7de3f;
    color: #212121;
}

.type-ice {
    background: linear-gradient(180deg, #51c4e7 50%, #51c4e7 50%);
    background-color: #51c4e7;
    color: #212121;
}

.type-fighting {
    background: linear-gradient(180deg, #d56723 50%, #d56723 50%);
    background-color: #d56723;
    color: #fff;
}

.type-psychic {
    background: linear-gradient(180deg, #f366b9 50%, #f366b9 50%);
    background-color: #f366b9;
    color: #fff;
}

.type-ghost {
    background: linear-gradient(180deg, #7b62a3 50%, #7b62a3 50%);
    background-color: #7b62a3;
    color: #fff;
}

.type-dragon {
    background: linear-gradient(180deg, #53a4cf 50%, #f16e57 50%);
    background-color: #53a4cf;
    color: #fff;
}

.type-dark {
    background: linear-gradient(180deg, #707070 50%, #707070 50%);
    background-color: #707070;
    color: #fff;
}

.type-steel {
    background: linear-gradient(180deg, #9eb7b8 50%, #9eb7b8 50%);
    background-color: #9eb7b8;
    color: #212121;
}

.type-fairy {
    background: linear-gradient(180deg, #fdb9e9 50%, #fdb9e9 50%);
    background-color: #fdb9e9;
    color: #212121;
}