.pokemon_card {
    display: none;
    margin: 1em;
    width: 400px;
    perspective: 1000px;
    height: 120px;
    cursor: pointer;
}

.pokemon_card_front, .pokemon_card_back {
    position: absolute;
    border-radius: 20px;
    height: 100%;
    width: 100%;
    display: flex;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.pokemon_card_back {transform: rotateX(180deg);}

.stats {
    margin: 0.5em 2.5%;
    border-collapse: collapse;
    display: table;
    width: 100%;
    height: 85%;
}

.stat_box {
    background-color: #000;
    width: 0.5em;
    height: 1.5em;
    float: left;
    margin-right: 1em;
}

.hp {background-color: rgb(79, 141, 71);}
.atk {background-color: rgb(209, 207, 70);}
.def {background-color: rgb(187, 110, 59);}
.sp_def {background-color: rgb(54, 46, 172);}
.sp_atk {background-color: rgb(51, 169, 180);}
.speed {background-color: rgb(132, 45, 158);}

.stats tr:nth-child(even) {background: linear-gradient(to right, #ffffff33, #00000000)}

.stats tr th {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.75em;
    text-align: left;
}

.total {padding-left: 1.5em;}

.pokemon_card_inner {
    border-radius: 20px;
    box-shadow: 0 3px 15px #111;
    width: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.pokemon_card .info_front {
    display:flex;
    flex-direction: column;
    width: 100%;
}

.info {
    flex-grow: 1;
    margin-left: 1em;
}

.types {display: flex;}

.types .type {
    flex-grow: 1;
    margin: 0 0.5em;

    border: 2px solid #00000099;
    border-radius: 20px;

    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #00000099;
    font-size: 15px;
    text-align: center;
}

.basic_info {
    display: flex;
    flex-grow: 1;
    align-items: flex-end;
    padding-bottom: 1em;
}

.sprite_and_name {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}

.sprite_container img {margin-bottom: -0.2em;}

.basic_info .name {
    font-size: 1.25em;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #00000099;
    margin: auto 0 0 0;
}

.basic_info .number {
    font-size: 1em;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #00000099;
}

.pokemon_card .img-container {
    width: 5em;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 1em;
}

.bulb_link img{
    width: 16px;
    height: auto;
}

.move_card_up {
    animation: move_card_up_anim 1s ease-out;
    animation-play-state: paused;
}

@keyframes move_card_up_anim {
    0% {transform: translateY(100vh); opacity: 0;}
    100% {transform: translateY(0); opacity: 1;}
}