.card {
    height: 296px;
    width: 264px;
    margin-bottom: 32px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
}

.pokemon-img {
    position: relative;
    top: -45px;
    height: 264px;
    width: 264px;
    margin-bottom: -68px;
}

.name {
    color: white;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
    z-index: 1;
    text-transform: capitalize;
}

.types {
    display: flex;
    gap: 8px;
}

.type {
    height: 24px;
    width: 24px;
    padding: 3px;
}

.grass-border {
    border: 2px solid #82D371;
    border-radius: 6px;
    filter: drop-shadow(0px 0px 4px #6BFF8B);
}

.fire-border {
    border: 2px solid #FFB13F;
    border-radius: 6px;
    filter: drop-shadow(0px 0px 4px #FFB13F);
}

.water-border {
    border: 2px solid #9AF7FF;
    border-radius: 6px;
    filter: drop-shadow(0px 0px 4px #9AF7FF);
}

.bug-border {
    border: 2px solid #C8F15A;
    border-radius: 6px;
    filter: drop-shadow(0px 0px 4px #C8F15A);
}

.poison-border {
    border: 2px solid #B35AF1;
    border-radius: 6px;
    filter: drop-shadow(0px 0px 4px #B35AF1);
}

.flying-border {
    border: 2px solid #9AF7FF;
    border-radius: 6px;
    filter: drop-shadow(0px 0px 4px #9AF7FF);
}

.normal-border {
    border: 2px solid #e9e9e9;
    border-radius: 6px;
    filter: drop-shadow(0px 0px 4px #e9e9e9);
}

.fairy-border {
    border: 2px solid #ff39b1;
    border-radius: 6px;
    filter: drop-shadow(0px 0px 4px #ff39b1);
}

.electric-border {
    border: 2px solid #fff000;
    border-radius: 6px;
    filter: drop-shadow(0px 0px 4px #fff000);
}

.ground-border {
    border: 2px solid #ff7935;
    border-radius: 6px;
    filter: drop-shadow(0px 0px 4px #ff7935);
}

.fighting-border {
    border: 2px solid #ff7935;
    border-radius: 6px;
    filter: drop-shadow(0px 0px 4px #ff7935);
}

.rock-border {
    border: 2px solid #c8b686;
    border-radius: 6px;
    filter: drop-shadow(0px 0px 4px #c8b686);
}

.psychic-border {
    border: 2px solid #B35AF1;
    border-radius: 6px;
    filter: drop-shadow(0px 0px 4px #B35AF1);
}

.grass {
    background: url(../assets/bg/bg_plant.webp), radial-gradient(circle at 132px 50px, #82D371 0%, #1D1D1D 75%);
    background-size: cover;
    background-position: 50% -24px, center;
    background-size: contain, cover;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0px 16px 60px rgb(130, 211, 113, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}

.grass:hover {
    box-shadow: 0px 16px 60px rgb(130, 211, 113, 0.65);
    transform: scale(1.05);
    z-index: 1;
}

.fire {
    background: url(../assets/bg/bg_flame.webp), radial-gradient(circle at 132px 50px, #FF9700 0%, #1D1D1D 75%);
    background-size: cover;
    background-position: 50% -120px, center;
    background-size: 148%, cover;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0px 16px 60px rgb(255, 151, 0, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}

.fire:hover {
    box-shadow: 0px 16px 60px rgb(255, 151, 0, 0.65);
    transform: scale(1.05);
    z-index: 1;
}

.water {
    background: url(../assets/bg/bg_water.webp), radial-gradient(circle at 132px 50px, #9AF7FF 0%, #1D1D1D 75%);
    background-size: cover;
    background-position: 50% -130px, center;
    background-size: 160%, cover;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0px 16px 60px rgb(154, 247, 255, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}

.water:hover {
    box-shadow: 0px 16px 60px rgb(154, 247, 255, 0.65);
    transform: scale(1.05);
    z-index: 1;
}

.bug {
    background: url(../assets/bg/bg_bug.webp), radial-gradient(circle at 132px 50px, #A9CD47 0%, #1D1D1D 75%);
    background-size: cover;
    background-position: 50% -80px, center;
    background-size: 120%, cover;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0px 16px 60px rgb(169, 205, 71, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}

.bug:hover {
    box-shadow: 0px 16px 60px rgb(169, 205, 71, 0.65);
    transform: scale(1.05);
    z-index: 1;
}

.normal {
    background: url(../assets/bg/bg_normal.webp), radial-gradient(circle at 132px 50px, #e9e9e9 0%, #1D1D1D 75%);
    background-size: cover;
    background-position: 50% -80px, center;
    background-size: 120%, cover;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0px 16px 60px rgb(233, 233, 233, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}

.normal:hover {
    box-shadow: 0px 16px 60px rgb(233, 233, 233, 0.65);
    transform: scale(1.05);
    z-index: 1;
}

.poison {
    background: url(../assets/bg/bg_poison.webp), radial-gradient(circle at 132px 50px, #B35AF1 0%, #1D1D1D 75%);
    background-size: cover;
    background-position: 50% -80px, center;
    background-size: 120%, cover;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0px 16px 60px rgb(179, 90, 241, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}

.poison:hover {
    box-shadow: 0px 16px 60px rgb(179, 90, 241, 0.65);
    transform: scale(1.05);
    z-index: 1;
}

.fairy {
    background: url(../assets/bg/bg_fairy.webp), radial-gradient(circle at 132px 50px, #ff39b1 0%, #1D1D1D 75%);
    background-size: cover;
    background-position: 50% -80px, center;
    background-size: 120%, cover;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0px 16px 60px rgb(179, 90, 241, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}

.fairy:hover {
    box-shadow: 0px 16px 60px rgb(255, 57, 177, 0.65);
    transform: scale(1.05);
    z-index: 1;
}

.electric {
    background: url(../assets/bg/bg_electric.webp), radial-gradient(circle at 132px 50px, #fff000 0%, #1D1D1D 75%);
    background-size: cover;
    background-position: 50% -80px, center;
    background-size: 120%, cover;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0px 16px 60px rgb(255, 240, 0, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}

.electric:hover {
    box-shadow: 0px 16px 60px rgb(255, 240, 0, 0.65);
    transform: scale(1.05);
    z-index: 1;
}

.ground {
    background: url(../assets/bg/bg_earth.webp), radial-gradient(circle at 132px 50px, #ff7935 0%, #1D1D1D 75%);
    background-size: cover;
    background-position: 50% -80px, center;
    background-size: 120%, cover;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0px 16px 60px rgb(255, 121, 53, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}

.ground:hover {
    box-shadow: 0px 16px 60px rgb(255, 121, 53, 0.65);
    transform: scale(1.05);
    z-index: 1;
}

.fighting {
    background: url(../assets/bg/bg_fighting.webp), radial-gradient(circle at 132px 50px, #ff7935 0%, #1D1D1D 75%);
    background-size: cover;
    background-position: 50% -80px, center;
    background-size: 120%, cover;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0px 16px 60px rgb(255, 121, 53, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}

.fighting:hover {
    box-shadow: 0px 16px 60px rgb(255, 121, 53, 0.65);
    transform: scale(1.05);
    z-index: 1;
}

.rock {
    background: url(../assets/bg/bg_rock.webp), radial-gradient(circle at 132px 50px, #c8b686 0%, #1D1D1D 75%);
    background-size: cover;
    background-position: 50% -80px, center;
    background-size: 120%, cover;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0px 16px 60px rgb(200, 182, 134, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}

.rock:hover {
    box-shadow: 0px 16px 60px rgb(200, 182, 134, 0.65);
    transform: scale(1.05);
    z-index: 1;
}

.psychic {
    background: url(../assets/bg/bg_psychic.webp), radial-gradient(circle at 132px 50px, #B35AF1 0%, #1D1D1D 75%);
    background-size: cover;
    background-position: 50% -80px, center;
    background-size: 120%, cover;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0px 16px 60px rgb(179, 90, 241, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}

.psychic:hover {
    box-shadow: 0px 16px 60px rgb(179, 90, 241, 0.65);
    transform: scale(1.05);
    z-index: 1;
}