.ball-icon{
    height: 10vh;
    width: 10vh;
    filter: grayscale(100%);
    transition: all 0.5s;
    display: inline-block;
}

.ball-icon.pokeball{
    display: inline-block;
}

.ball-icon.greatball{
    display: inline-block;
}

.ball-icon.ultraball{
    display: inline-block;
}

.ball-icon.masterball{
    display: inline-block;
}

.ball-icon.coloured{
    filter: none;
    transition: all 0.5s;
}

.ball-icon-container{
    height: 100%;
    width: 100%;
}

@-webkit-keyframes shake {
    0% { -webkit-transform: translate(0, 0) rotate(0deg); }
    33% { -webkit-transform: translate(1vw, 0) rotate(45deg); }
    66% { -webkit-transform: translate(-1vw, 0) rotate(-45deg); }
    100% { -webkit-transform: translate(0, 0) rotate(0deg); }
}

.shake {
    display: inline-block;
    -webkit-animation-name: shake;
    -webkit-animation-duration: 0.5s;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-iteration-count: 1;
}

/* Trainer Card */
@font-face {
    font-family: "pokepixel";
    src: url("../fonts/Pixelbasel-zr5Ll.ttf");
}

.trainer_card_container{
    position: relative;
    white-space: nowrap;
    height: 50vh;
    width: 50vw;
    margin-left: auto;
    margin-right: auto;
    z-index: 2;
}
.trainer_card_container > *{
    position: absolute;
}

.trainer_card_text{
    text-align: right;
    font-family: "pokepixel";
    font-size: 1.75rem;
    z-index: 2;
}

#passport_score{
    text-align: left;
    width: 20vw;
    left: 40%;
    top: 80%;
    transform: translate(-35%, -75%);
    z-index: 2;
}

#complete_challenge_count{
    text-align: left;
    width: 20vw;
    left: 40%;
    top: 75%;
    transform: translate(-35%, -85%);
    z-index: 2;
}

#passport_name{
    width: 10vw;
    left: 37%;
    top: 24%;
    z-index: 2;
}

#passport_title_label{
    text-align: left;
    width: 10vw;
    left: 27%;
    top: 32%;
    z-index: 2;
}

#passport_title{
    width: 10vw;
    left: 50%;
    top: 40%;
    transform: translate(-65%, -80%);
    z-index: 2;
}

#passport_rank_label{
    text-align: left;
    width: 10vw;
    left: 27%;
    top: 39%;
    z-index: 2;
}

#passport_rank{
    width: 10vw;
    left: 37%;
    top: 39%;
    z-index: 2;
}

#passport_score_to_next_rank{
    text-align: left;
    width: 10vw;
    left: 27%;
    top: 46.8%;
    z-index: 2;
}


#passport_tc_img{
    height: 40vh;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

#passport_rank_image_container{
    height: 16vh;
    width: 15vh;
    justify-content: center;
    align-content: center;
    left: 59%;
    top: 21%;
    z-index: 3;
}

#passport_rank_image{
    display: block;
    height: 100%;
    max-height: 16vh;
    max-width: 16vh;
    margin-left: auto;
    margin-right: auto;
}