.background__overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 200, 0, 0.3);
}

.type--grass {
    background-image: url(../img/grass-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: black;
}

.type-info--grass {
    background-color: green;
    color: white;
}

.type--fire {
    background-image: url(../img/fire-bg.webp);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

.type-info--fire {
    background-color: red;
    color: white;
}

.type--water {
    background-image: url(../img/water-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
}

.type-info--water {
    background-color: blue;
    color: white;
}

.type--bug {
    background-image: url(../img/bug-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.type-info--bug {
    background-color: brown;
    color: white;
}

.type--normal {
    background-color: antiquewhite !important;
    background-image: url(../img/normal-bg.webp);
    background-position: bottom;
    background-repeat: no-repeat;
}

.type--poison {
    background-color: greenyellow !important;
    background-image: url(../img/poison-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.type-info--poison {
    background-color: rgb(179, 19, 179);
    color: white;
}

.type--electric {
    background-image: url(../img/electric-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.type-info--electric {
    background-color: yellow;
    color: black;
}

.type--ground {
    background-image: url(../img/ground-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
}

.type-info--ground {
    background-color: burlywood;
    color: black;
}

.type--fairy {
    background-image: url(../img/fairy-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
}

.type-info--fairy {
    background-color: palevioletred;
    color: white;
}

.type--fighting {
    background-image: url(../img/fighting-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.type-info--fighting {
    background-color: tomato;
    color: white;
}

.type--psychic {
    background-image: url(../img/psychic-bg.webp);
    background-position: bottom;
    background-repeat: no-repeat;
}

.type-info--psychic {
    background-color: purple;
    color: white;
}

.type--rock {
    background-image: url(../img/rock-bg.webp);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

.type-info--rock {
    background-color: grey;
    color: white;
}

.type--ghost {
    background-image: url(../img/ghost-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
}

.type-info--ghost {
    background-color: violet;
    color: black;
}

.type--ice {
    background-image: url(../img/ice-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.type-info--ice {
    background-color: azure;
    color: black;
}

.type--dragon {
    background-image: url(../img/dragon-bg.webp);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

.type-info--dragon {
    background-color: cadetblue;
    color: white;
}

.type--dark {
    background-image: url(../img/dark-bg.webp);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

.type-info--dark {
    background-color: rgba(40, 40, 40, 0.8);
    color: white;
}

.pokemon-list__container {
    color: white !important;
}

.type--steel {
    background-image: url(../img/steel-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.type-info--steel {
    background-color: gainsboro;
    color: black;
}

.type--flying {
    background-image: url(../img/flying-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
}

.type-info--flying {
    background-color: honeydew;
    color: black;
}

h5 {
    background-color: transparent !important;
}


/* DETAILS VIEW Colors */

.bg-design--grass {
    background-image: url(../img/grass-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-design--fire {
    background-image: url(../img/fire-bg.webp);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-design--water {
    background-image: url(../img/water-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-design--bug {
    background-image: url(../img/bug-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-design--normal {
    background-color: antiquewhite !important;
    background-image: url(../img/normal-bg.webp);
    background-position: bottom;
    background-repeat: no-repeat;
}

.bg-design--poison {
    background-color: greenyellow !important;
    background-image: url(../img/poison-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-design--electric {
    background-image: url(../img/electric-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-design--ground {
    background-image: url(../img/ground-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
}

.bg-design--fairy {
    background-image: url(../img/fairy-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-design--fighting {
    background-image: url(../img/fighting-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-design--psychic {
    background-image: url(../img/psychic-bg.webp);
    background-position: bottom;
    background-repeat: no-repeat;
}

.bg-design--rock {
    background-image: url(../img/rock-bg.webp);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-design--ghost {
    background-image: url(../img/ghost-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-design--ice {
    background-image: url(../img/ice-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-design--dragon {
    background-image: url(../img/dragon-bg.webp);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-design--dark {
    background-image: url(../img/dark-bg.webp);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-design--steel {
    background-image: url(../img/steel-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-design--flying {
    background-image: url(../img/flying-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
}