style.css

body {
    font-family: "Comic Sans MS", cursive;
    background-color: #f5f5f5;
    margin: 0;
    padding: 20px;
}

.search-bar {
    text-align: center;
    margin-bottom: 20px;
}

.search-bar input {
    width: 80%;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 5px;
}

.pokemon-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.pokemon-card {
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

.pokemon-img {
    width: 150px;
}

.fire { background-color: #c27e10; }
.grass { background-color: #4CAF50; }
.dragon { background-color: #3263cc; }
.ice { background-color: #42bed3; }
.fighting { background-color: #ba082a; }
.ground { background-color: #9e7e52; }
.bug { background-color: #98e880; }
.normal { background-color: #A9A9A9; }
.poison { background-color: #9e5cda; }
.electric { background-color: #ffd365; }
.rock { background-color: #897975; }
.steel { background-color: #999999; }
.psychic { background-color: #e39fa4; }
.fairy { background-color: #f040f3; }
.dark { background-color: #12124f; }
.water { background-color: #00BFFF; }
.flying { background-color: #23f1c7; }
.ghost { background-color: #5626de; }

/* Dual-type styling with gradient */
.dual-type {
    background: linear-gradient(to right, var(--color1), var(--color2));
}

.fire-grass { --color1: #c27e10; --color2: #4CAF50; }
.water-electric { --color1: #00BFFF; --color2: #ffd365; }
.grass-poison { --color1: #4CAF50; --color2: #9e5cda; }
.fire-flying { --color1: #c27e10; --color2: #23f1c7; }
/* Add more combinations as needed */