.card {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin: 15px;
    padding: 10px;
    text-align: center;
    transition: transform 0.2s;
}

.card:hover {
    transform: scale(1.05);
}

.card img {
    width: 100px;
    height: 100px;
}

.card h2 {
    font-size: 1.5em;
    margin: 10px 0;
}

.card p {
    font-size: 1em;
    color: #555;
}

.type-fire {
    background-color: #f08030;
}

.type-water {
    background-color: #6890f0;
}

.type-grass {
    background-color: #78c850;
}

.type-electric {
    background-color: #f8d030;
}

.type-ice {
    background-color: #98d8d8;
}

.type-fighting {
    background-color: #c03028;
}

.type-poison {
    background-color: #a040a0;
}

.type-ground {
    background-color: #e0c068;
}

.type-flying {
    background-color: #a890f0;
}

.type-psychic {
    background-color: #f85888;
}

.type-bug {
    background-color: #a8b820;
}

.type-rock {
    background-color: #b8a038;
}

.type-ghost {
    background-color: #705898;
}

.type-dragon {
    background-color: #7038f8;
}

.type-dark {
    background-color: #705848;
}

.type-steel {
    background-color: #b8b8d0;
}

.type-fairy {
    background-color: #f0b6c1;
}

.pokemon-card {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin: 15px;
    padding: 10px;
    text-align: center;
    transition: transform 0.2s;
    width: 180px;
    overflow: hidden;
}

.pokemon-card:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.pokemon-card .pokemon-image {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    display: block;
}

.pokemon-card .pokemon-name {
    font-size: 1.2em;
    font-weight: bold;
    margin: 10px 0 5px;
    text-transform: capitalize;
}

.pokemon-card .pokemon-id {
    color: #666;
    font-size: 0.9em;
    margin-bottom: 5px;
}

.pokemon-card .pokemon-types {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin: 5px 0;
}

.type {
    border-radius: 4px;
    color: white;
    display: inline-block;
    font-size: 0.8em;
    margin: 2px;
    padding: 3px 8px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    text-transform: capitalize;
}

.fire { background-color: #f08030; }
.water { background-color: #6890f0; }
.grass { background-color: #78c850; }
.electric { background-color: #f8d030; }
.ice { background-color: #98d8d8; }
.fighting { background-color: #c03028; }
.poison { background-color: #a040a0; }
.ground { background-color: #e0c068; }
.flying { background-color: #a890f0; }
.psychic { background-color: #f85888; }
.bug { background-color: #a8b820; }
.rock { background-color: #b8a038; }
.ghost { background-color: #705898; }
.dragon { background-color: #7038f8; }
.dark { background-color: #705848; }
.steel { background-color: #b8b8d0; }
.fairy { background-color: #f0b6c1; }