#pokeCards {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 5rem 0;

    .card {
        background-color: white;
        border-radius: 15px;
        height: 20rem;
        width: 20rem;
        margin: 2.4rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        transition: 0.3s;
        cursor: pointer;
        font-weight: 100;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

        &.fire {
            box-shadow: inset 0 0 20px #f08030,
                inset 0 0 10px rgba(0, 0, 0, 0.1);
        }
        &.water {
            box-shadow: inset 0 0 20px #6890f0,
                inset 0 0 10px rgba(0, 0, 0, 0.1);
        }
        &.grass {
            box-shadow: inset 0 0 20px #78c850,
                inset 0 0 10px rgba(0, 0, 0, 0.1);
        }
        &.electric {
            box-shadow: inset 0 0 20px #f8d030,
                inset 0 0 10px rgba(0, 0, 0, 0.1);
        }
        &.poison {
            box-shadow: inset 0 0 20px #a040a0,
                inset 0 0 10px rgba(0, 0, 0, 0.1);
        }
        &.normal {
            box-shadow: inset 0 0 20px #a8a878,
                inset 0 0 10px rgba(0, 0, 0, 0.1);
        }
        &.flying {
            box-shadow: inset 0 0 20px #a890f0,
                inset 0 0 10px rgba(0, 0, 0, 0.1);
        }
        &.ground {
            box-shadow: inset 0 0 20px #e0c068,
                inset 0 0 10px rgba(0, 0, 0, 0.1);
        }
        &.bug {
            box-shadow: inset 0 0 20px #a8b820,
                inset 0 0 10px rgba(0, 0, 0, 0.1);
        }
        &.rock {
            box-shadow: inset 0 0 20px #b8a038,
                inset 0 0 10px rgba(0, 0, 0, 0.1);
        }
        &.ghost {
            box-shadow: inset 0 0 20px #705898,
                inset 0 0 10px rgba(0, 0, 0, 0.1);
        }
        &.steel {
            box-shadow: inset 0 0 20px #b8b8d0,
                inset 0 0 10px rgba(0, 0, 0, 0.1);
        }
        &.psychic {
            box-shadow: inset 0 0 20px #f85888,
                inset 0 0 10px rgba(0, 0, 0, 0.1);
        }
        &.ice {
            box-shadow: inset 0 0 20px #98d8d8,
                inset 0 0 10px rgba(0, 0, 0, 0.1);
        }
        &.dragon {
            box-shadow: inset 0 0 20px #7038f8,
                inset 0 0 10px rgba(0, 0, 0, 0.1);
        }
        &.dark {
            box-shadow: inset 0 0 20px #705848,
                inset 0 0 10px rgba(0, 0, 0, 0.1);
        }
        &.fairy {
            box-shadow: inset 0 0 20px #f0b6bc,
                inset 0 0 10px rgba(0, 0, 0, 0.1);
        }
        &.fighting {
            box-shadow: inset 0 0 20px #c03028,
                inset 0 0 10px rgba(0, 0, 0, 0.1);
        }

        /* 3. Hover-Effekt: Verstärkung des Inset-Glows */
        &:hover {
            transform: scale(1.02);
            &.fire {
                box-shadow: inset 0 0 35px #f08030;
            }
            &.water {
                box-shadow: inset 0 0 35px #6890f0;
            }
            &.grass {
                box-shadow: inset 0 0 35px #78c850;
            }
            &.electric {
                box-shadow: inset 0 0 35px #f8d030;
            }
            &.poison {
                box-shadow: inset 0 0 35px #a040a0;
            }
            &.normal {
                box-shadow: inset 0 0 35px #a8a878;
            }
            &.flying {
                box-shadow: inset 0 0 35px #a890f0;
            }
            &.ground {
                box-shadow: inset 0 0 35px #e0c068;
            }
            &.bug {
                box-shadow: inset 0 0 35px #a8b820;
            }
            &.rock {
                box-shadow: inset 0 0 35px #b8a038;
            }
            &.ghost {
                box-shadow: inset 0 0 35px #705898;
            }
            &.steel {
                box-shadow: inset 0 0 35px #b8b8d0;
            }
            &.psychic {
                box-shadow: inset 0 0 35px #f85888;
            }
            &.ice {
                box-shadow: inset 0 0 35px #98d8d8;
            }
            &.dragon {
                box-shadow: inset 0 0 35px #7038f8;
            }
            &.dark {
                box-shadow: inset 0 0 35px #705848;
            }
            &.fairy {
                box-shadow: inset 0 0 35px #f0b6bc;
            }
            &.fighting {
                box-shadow: inset 0 0 35px #c03028;
            }
        }

        img {
            height: 10rem;
            width: 10rem;
            object-position: bottom;
            position: absolute;
            top: -25%;
            left: 50%;
            transform: translate(-50%, 0);
            filter: drop-shadow(4px 4px 8px black);
        }

        h2 {
            font-size: calc(16px + 1dvw);
        }

        p {
            font-size: calc(16px + 0.7dvw);
            text-align: center;
            width: 100%;
            height: 3rem;
        }

        .cardInfos {
            width: 90%;
            height: 60%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }
    }

    .card:hover {
        box-shadow: 5px 5px 10px black;
    }

    .typesContainer {
        display: flex;
        justify-content: center;
        padding: 5px;
        width: 100%;
    }

    .type {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        color: black;
        font-size: calc(16px + 0.5dvw);
        width: 50%;
        height: 5dvh;
    }
}