:root {
    --clr-black: #1c1c1c;
    --clr-gray: #ececec;
    --clr-white: #f7f7f7;

    --type-normal: #A8A878;
    --type-fire: #F08030;
    --type-water: #6890F0;
    --type-grass: #78C850;
    --type-electric: #F8D030;
    --type-ice: #98D8D8;
    --type-fighting: #C03028;
    --type-poison: #A040A0;
    --type-ground: #E0C068;
    --type-flying: #A890F0;
    --type-psychic: #F85888;
    --type-bug: #A8B820;
    --type-rock: #B8A038;
    --type-ghost: #705898;
    --type-dark: #705848;
    --type-dragon: #7038F8;
    --type-steel: #B8B8D0;
    --type-fairy: #F0B6BC;
}

/*  */

ul {
    list-style-type: none;
}

button {
    height: 30px;
    width: auto;
    background-color: transparent;
    border: 0;
    border-radius: 30px;
    box-shadow:  2px 5px 6px rgba(0,0,0,0.1);

}

button:hover{
    transform: scale(1.3);
}

/* Aquí todo el CSS extra */



/* Aquí comienzan los colores de botones según tipo */
.normal {
    background-color: var(--type-normal);
    color: var(--clr-black);
}

.fire {
    background-color: var(--type-fire);
    color: var(--clr-black);
}

.water {
    background-color: var(--type-water);
    color: var(--clr-white);
}

.grass {
    background-color: var(--type-grass);
    color: var(--clr-black);
}

.electric {
    background-color: var(--type-electric);
    color: var(--clr-black);
}

.ice {
    background-color: var(--type-ice);
    color: var(--clr-black);
}

.fighting {
    background-color: var(--type-fighting);
    color: var(--clr-white);
}

.poison {
    background-color: var(--type-poison);
    color: var(--clr-white);
}

.ground {
    background-color: var(--type-ground);
    color: var(--clr-black);
}

.flying {
    background-color: var(--type-flying);
    color: var(--clr-black);
}

.psychic {
    background-color: var(--type-psychic);
    color: var(--clr-black);
}

.bug {
    background-color: var(--type-bug);
    color: var(--clr-black);
}

.rock {
    background-color: var(--type-rock);
    color: var(--clr-black);
}

.ghost {
    background-color: var(--type-ghost);
    color: var(--clr-white);
}

.dark {
    background-color: var(--type-dark);
    color: var(--clr-white);
}

.dragon {
    background-color: var(--type-dragon);
    color: var(--clr-white);
}

.steel {
    background-color: var(--type-steel);
    color: var(--clr-black);
}

.fairy {
    background-color: var(--type-fairy);
    color: var(--clr-black);
}






.menu{
    /* border: 2px solid red; */
    /* width: 200px; */
    padding: 8px;

    
}

.nav-list{

    padding: 8px 5px;
    
     
    /* cajad flex */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;

}

ul{
    list-style-type: none;
}


.img-logo {
    width: auto;
    height: 150px;
    margin: 5px;
}