style.css

.icon{
    display:inline-block;
    width:66px;
    margin-bottom:4px;
    background:#dbdbdb;
    border:1px solid #a3a3a3;
    border-radius:4px;
    border:1px solid rgba(0,0,0,.2);
    color:#fff;
    font-size:.75rem;
    font-weight:normal;
    line-height:1.5rem;
    text-align:center;
    text-shadow:1px 1px 2px rgba(0,0,0,.7);
    text-transform:uppercase;
    transition:opacity .4s
}

.type-normal{
    background-color:#aa9
}
.type-fire{
    background-color:#f42
}
.type-water{
    background-color:#39f
}
.type-electric{
    background-color:#fc3
}
.type-grass{
    background-color:#7c5
}
.type-ice{
    background-color:#6cf
}
.type-fighting{
    background-color:#b54
}
.type-poison{
    background-color:#a59
}
.type-ground{
    background-color:#db5
}
.type-flying{
    background-color:#89f
}
.type-psychic{
    background-color:#f59
}
.type-bug{
    background-color:#ab2
}
.type-rock{
    background-color:#ba6
}
.type-ghost{
    background-color:#66b
}
.type-dragon{
    background-color:#76e
}
.type-dark{
    background-color:#754
}
.type-steel{
    background-color:#aab
}
.type-fairy{
    background-color:#e9e
}
.type-curse{
    background-color:#698
}