:root {
    --bg-grass: #77c850;
    --bg-fire: #ee7f30;
    --bg-water: #678fee;
    --bg-electric: #ecd05d;
    --bg-psychic: #f65687;
    --bg-ground: #8a690f;
    --bg-fighting: #bf3029;
    --bg-rock: #b8a137;
    --bg-dark: #725847;
    --bg-ice: #98d5d7;
    --bg-poison: #a040a0;
    --bg-steel: #b9b7cf;
    --bg-fairy: #f9aec7;
    --bg-ghost: #6e5896;
    --bg-bug: #a8b720;
    --bg-flying: #a98ff0;
    --bg-normal: #a6a877;
    --bg-dragon: #6f38f6;
    --bg-all: #4e4e4e;
    --bg-type: #ffffff2d;
    --bg-body: #e6e6e6;
    --color-white: #fff;
    --color-black: #333;
    --color-shadow: #33333331;
}

.grass {
    background-color: var(--bg-grass);
}

.fire {
    background-color: var(--bg-fire);
}

.water {
    background-color: var(--bg-water);
}

.electric {
    background-color: var(--bg-electric);
}

.psychic {
    background-color: var(--bg-psychic);
}

.ground {
    background-color: var(--bg-ground);
}

.fighting {
    background-color: var(--bg-fighting);
}

.rock {
    background-color: var(--bg-rock);
}

.dark {
    background-color: var(--bg-dark);
}

.ice {
    background-color: var(--bg-ice);
}

.poison {
    background-color: var(--bg-poison);
}

.steel {
    background-color: var(--bg-steel);
}

.fairy {
    background-color: var(--bg-fairy);
}

.ghost {
    background-color: var(--bg-ghost);
}

.bug {
    background-color: var(--bg-bug);
}

.flying {
    background-color: var(--bg-flying);
}

.normal {
    background-color: var(--bg-normal);
}

.dragon {
    background-color: var(--bg-dragon);
}

.all {
    background-color: var(--bg-all);
}

#typePokemonList {
    width: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
}

.typePokemon {
    width: 100%;
    background-image: url("../img/pokeball_logo_white.svg");
    background-repeat: no-repeat;
    background-size: auto 140%;
    background-position: calc(100% + 20px) center;

    border-radius: 10px;
    border: none;
    padding: 1.5rem 1rem;
    margin: 1rem 0;
    box-shadow: 3px 7px 10px var(--color-shadow);
    cursor: pointer;
    
    display: flex;
    justify-content: flex-start;
    align-items: center;

    color: var(--color-white);
    font-size: 1.2rem;
    font-weight: 700;
}

.pokemons {
    width: 100%;
    padding: .5rem;

    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.pokemon {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr auto;
    row-gap: .5rem;
    align-content: space-between;
    align-items: center;

    padding: .8rem;
    border-radius: 1rem;
    box-shadow: 3px 3px 3px var(--color-shadow);
}

.pokemon .number {
    color: var(--color-black);
    opacity: .8;
    font-size: .625rem;
    text-align: right;
    line-height: 1.5rem;
}

.pokemon .name {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    
    color: var(--color-white);
    text-transform: capitalize;
    font-size: 1rem;
    line-height: 1.5rem;
}

.pokemon .detail {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.pokemon .detail .types {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
}

.pokemon .detail .types .type {
    background-color: var(--bg-type);
    padding: .25rem .5rem;
    margin: .25rem 0;
    border-radius: 1rem;
    
    color: var(--color-white);
    text-align: center;
    text-transform: uppercase;
    font-size: .625rem;
}

.pokemon .detail img {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;

    max-width: 60%;
    height: 80px;
}

@media screen and (min-width: 380px) {
    .pokemons {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (min-width: 576px) {
    .pokemons {
        grid-template-columns: 1fr 1fr 1fr;
        padding: 0;
    }

    #typePokemonList {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (min-width: 992px) {
    .pokemons {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    #typePokemonList {
        grid-template-columns: 1fr 1fr 1fr;
    }
}