.pekedex-card {
    width: 14rem;
    height: 20rem;
    background-color: aliceblue;
    border-radius: 0.75rem;
    border: transparent;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
    cursor: pointer;
    transform-style: preserve-3d;
    transform-origin: center bottom;
    transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 550ms ease;
    will-change: transform;
}

.pekedex-card:hover,
.pekedex-card:focus-visible {
    transform: perspective(900px) rotateX(18deg) translateY(-6px);
    box-shadow: 0 25px 25px rgba(0, 0, 0, 0.5);
}

.pekedex-card:hover > main > img,
.pekedex-card:focus-visible > main > img
    {
    transform: rotateX(-18deg) translateZ(90px) translateY(-14px) scale(1.25);
    transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

.card-header {
    width: 100%;
    height: 25%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: linear-gradient(-90deg,
                rgb(54, 65, 233) 20%,
                rgb(57, 97, 243) 30%,
                rgb(50, 148, 253) 45%,
                rgb(101, 177, 253) 50%,
                rgb(50, 148, 253) 55%,
                rgb(57, 97, 243) 70%,
                rgb(54, 65, 233) 80%);
    border-radius: 0.75rem 0.75rem 0 0;
}

.card-header > h2 {
    text-transform: capitalize;
}

.card-main{
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 4px 4px 8px rgba(255,255,255,.8),
                inset -4px -4px 8px rgba(163,177,198,.5);
    transform-style: preserve-3d;
}

.card-main > img {
    width: 80%;
    height: 80%;
    transform: translateZ(0);
    transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
    filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}

.pekedex-card:hover > main > img,
.pekedex-card:focus-visible > main > img {
    filter: drop-shadow(0 20px 12px rgba(0,0,0,0.35));
}

.card-footer{
    width: 100%;
    height: 25%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: linear-gradient(-90deg,
                rgb(54, 65, 233) 20%,
                rgb(57, 97, 243) 30%,
                rgb(50, 148, 253) 45%,
                rgb(101, 177, 253) 50%,
                rgb(50, 148, 253) 55%,
                rgb(57, 97, 243) 70%,
                rgb(54, 65, 233) 80%);
    border-radius: 0 0 0.75rem 0.75rem;
}

.card-footer-type{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

.poke-type-bg {
    width: 3rem;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: whitesmoke;
}

.poke-type-bg > img {
    width: 2rem;
}