:root{
    --icon-width: 68px;
    --icon-height: 56px;
    --color-red1: #ff5d14;
    --color-black: #000000;
    --color-red2: #fc7941; 
    --color-red3: #ff6038; 
    --color-gray: #333333; 
    --color-type-normal: #919aa2;
    --color-type-fighting: #ce416b;
    --color-type-flying: #8fa9de;
    --color-type-poison: #aa6bc8;
    --color-type-ground: #d97845;
    --color-type-rock: #c5b78c;
    --color-type-bug: #91c12f;
    --color-type-ghost: #5269ad;
    --color-type-steel: #5a8ea2;
    --color-type-fire: #ff9d55;
    --color-type-water: #5090d6;
    --color-type-grass: #63bc5a;
    --color-type-electric: #f4d23c;
    --color-type-psychic: #fa7179;
    --color-type-ice: #73cec0;
    --color-type-dragon: #0b6dc3;
    --color-type-dark: #5a5465;
    --color-type-fairy: #ec8fe6;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    background: var(--color-red2);
    color: white;
}

body{
    margin: 0;
    padding-top: 50px;
}

#header{
    background: rgba(0, 0, 0, 0.85);
    margin: 10px 0;
    text-align: center;
    padding: 10px;
    position: fixed;
    width: 100%;
    z-index: 5;
    top: 0px;
}

#header .caught,
#header .missing{
    display: inline-block;
    background: #555;
    border-radius: 5px;
    margin-right: 20px;
    padding: 4px 9px 4px 33px;
    position: relative;
    cursor: pointer;
}

#header .caught::before,
#header .missing::before{
    content: ' ';
    width: 16px;
    height: 16px;
    display: inline-block;
    background: #aaaaaa;
    border-radius: 8px;
    top: 5px;
    position: absolute;
    left: 10px;
}

#header .caught::before{
    background-image: url(/assets/bcf-small.png);
    background-position: -15px -20px;
    background-size: 1072px 920px;
    filter: invert(1);
}

.pokemon{
    background: var(--color-red1);
    position: relative;
    margin: 16px 10px;
    width: 200px;
    height: 24px;
    border-radius: 12px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    display: none;
}

.pokemon .name,
.pokemon .number,
.pokemon .icon {
    pointer-events:none;
}

.caught .pokemon[data-is-caught="true"] {
    display: inline-block;
}

.missing .pokemon[data-is-caught="false"] {
    display: inline-block;
}

.icon{
    background: url(/assets/bcf-small.png);
    width: var(--icon-width);
    height: var(--icon-height);
    background-position: calc(var(--icon-col) * -1 * var(--icon-width)) calc(var(--icon-row) * -1 * var(--icon-height));
    display: block;
    position: absolute;
    z-index: 1;
    top: -33px;
    left: -20px;
    filter: brightness(0.5);
}

.pokemon.caught .icon{
    filter: brightness(1);
}

.number{
    padding-left: 31px;
    display: inline-block;
    width: 62px;
    vertical-align: middle;
}

.name{
    background: black;
    display: inline-block;
    width: 104px;
    border-bottom-right-radius: 12px;
    border-top-right-radius: 12px;
    padding-left: 3px;
    height: 20px;
    padding-top: 4px;
}

.name:before{
    content: ' ';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 24px 12px;
    border-color: transparent transparent var(--color-black) transparent;
    display: inline-block;
    position: absolute;
    left: 81px;
    top: 0px;
}

.pokemon.caught .name:after{
    background-image: url(/assets/bcf-small.png);
    background-position: -15px -20px;
    background-size: 1072px 920px;
    filter: invert(1);
}

.name:after{
    content: ' ';
    width: 16px;
    height: 16px;
    display: inline-block;
    position: absolute;
    background: #aaaaaa;
    left: 180px;
    top: 4px;
    border-radius: 8px;
}

.info{
    position: absolute;
    top: 25px;
    z-index: 2;
    background: var(--color-gray);
    width: 300px;
    display: none;
    align-items: center;
}

.info.show{
    display: flex;
}

.info img {
    background: var(--color-red1);
    float: left;
}

.info .location::before {
    content: ' ';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 120px 20px;
    border-color: transparent transparent var(--color-gray) transparent;
    display: inline-block;
    position: absolute;
    left: 100px;
    top: 0px;
}

.info .type {
    text-transform: uppercase;
    background: green;
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 20px;
    /*padding: 2px 0px 2px 20px;*/
    text-align: center;
    overflow: hidden;
    height: 20px;
    text-indent: -200px;
}
.info .type::before{
    content: ' ';
    display: inline-block;
    background: url(/assets/types/bug.svg);
    width: 20px;
    height: 20px;
    background-size: 20px;
    position: absolute;
    left: 0;
    top: 0;
}
.info .type + .type {
    left: 20px;
}
.info .type.normal{
    background-color: var(--color-type-normal);
}
.info .type.fighting{
    background-color: var(--color-type-fighting);
}
.info .type.flying{
    background-color: var(--color-type-flying);
}
.info .type.poison{
    background-color: var(--color-type-poison);
}
.info .type.ground{
    background-color: var(--color-type-ground);
}
.info .type.rock{
    background-color: var(--color-type-rock);
}
.info .type.bug{
    background-color: var(--color-type-bug);
}
.info .type.ghost{
    background-color: var(--color-type-ghost);
}
.info .type.steel{
    background-color: var(--color-type-steel);
}
.info .type.fire{
    background-color: var(--color-type-fire);
}
.info .type.water{
    background-color: var(--color-type-water);
}
.info .type.grass{
    background-color: var(--color-type-grass);
}
.info .type.electric{
    background-color: var(--color-type-electric);
}
.info .type.psychic{
    background-color: var(--color-type-psychic);
}
.info .type.ice{
    background-color: var(--color-type-ice);
}
.info .type.dragon{
    background-color: var(--color-type-dragon);
}
.info .type.dark{
    background-color: var(--color-type-dark);
}
.info .type.fairy{
    background-color: var(--color-type-fairy);
}

.info .type.normal::before{
    background-image: url(/assets/types/normal.svg);
}
.info .type.fighting::before{
    background-image: url(/assets/types/fighting.svg);
}
.info .type.flying::before{
    background-image: url(/assets/types/flying.svg);
}
.info .type.poison::before{
    background-image: url(/assets/types/poison.svg);
}
.info .type.ground::before{
    background-image: url(/assets/types/ground.svg);
}
.info .type.rock::before{
    background-image: url(/assets/types/rock.svg);
}
.info .type.bug::before{
    background-image: url(/assets/types/bug.svg);
}
.info .type.ghost::before{
    background-image: url(/assets/types/ghost.svg);
}
.info .type.steel::before{
    background-image: url(/assets/types/steel.svg);
}
.info .type.fire::before{
    background-image: url(/assets/types/fire.svg);
}
.info .type.water::before{
    background-image: url(/assets/types/water.svg);
}
.info .type.grass::before{
    background-image: url(/assets/types/grass.svg);
}
.info .type.electric::before{
    background-image: url(/assets/types/electric.svg);
}
.info .type.psychic::before{
    background-image: url(/assets/types/psychic.svg);
}
.info .type.ice::before{
    background-image: url(/assets/types/ice.svg);
}
.info .type.dragon::before{
    background-image: url(/assets/types/dragon.svg);
}
.info .type.dark::before{
    background-image: url(/assets/types/dark.svg);
}
.info .type.fairy::before{
    background-image: url(/assets/types/fairy.svg);
}