header .type-search{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
select {
    padding: .25em .5em;
    border-radius: 4px;
    box-shadow: 0 0 4px 1px var(--gray-800);
    color: white;
    background-color: var(--gray-800);
    width: 150px;
}
select:has(option[value="grass"]:checked) {
    background-image: linear-gradient(to top, var(--green-700), var(--green-400));
}

select:has(option[value="poison"]:checked) {
    background-image: linear-gradient(to top, var(--purple-800), var(--purple-600));
}

select:has(option[value="fire"]:checked) {
    background-image: linear-gradient(to top, var(--red-800), var(--red-600));
} 

select:has(option[value="water"]:checked) {
    background-image: linear-gradient(to top, var(--blue-800), var(--blue-600));
} 

select:has(option[value="flying"]:checked) {
    background-image: linear-gradient(to top, var(--gray-200) , var(--blue-700) 70%);
} 

select:has(option[value="ground"]:checked) {
    background-image: linear-gradient(to top, var(--yellow-900), var(--yellow-700));
} 

select:has(option[value="ice"]:checked) {
    background-image: linear-gradient(to top, var(--blue-400), var(--blue-600));
} 

select:has(option[value="bug"]:checked) {
    background-image: linear-gradient(to top, var(--green-800), var(--green-600));
} 

select:has(option[value="normal"]:checked) {
    background-image: linear-gradient(to top, var(--gray-800), var(--gray-600));
} 

select:has(option[value="electric"]:checked) {
    background-image: linear-gradient(to top, var(--yellow-600), var(--yellow-400));
} 

select:has(option[value="fairy"]:checked) {
    background-image: linear-gradient(to top, var(--purple-600), var(--purple-400));
} 

select:has(option[value="ghost"]:checked) {
    background-image: linear-gradient(to top, var(--purple-500), var(--purple-700));
} 

select:has(option[value="dragon"]:checked) {
    background-image: linear-gradient(to top, var(--purple-800), var(--purple-950));
} 

select:has(option[value="dark"]:checked) {
    background-image: linear-gradient(to top, var(--gray-800), var(--gray-950));
} 

select:has(option[value="steel"]:checked) {
    background-image: linear-gradient(to top, var(--gray-500), var(--gray-400));
} 

select:has(option[value="rock"]:checked) {
    background-image: linear-gradient(to top, var(--yellow-800), var(--yellow-600));
} 

select:has(option[value="psychic"]:checked) {
    background-image: linear-gradient(to top, var(--purple-500), var(--purple-700));
} 

select:has(option[value="fighting"]:checked) {
    background-image: linear-gradient(to top, var(--red-950), var(--red-500));
} 

main {
    background-image: linear-gradient(to bottom left, var(--gray-900), var(--gray-950) 70%);
    display: flex;
    justify-content: center;
    padding: 5em 2em;
    flex-wrap: wrap;
    gap: 2em;
    height: 100%;
    overflow-y: scroll;
    margin-bottom: 1em;
}
.card {
    transition: background-color 0.2s ease-out;
    flex-basis: 400px;
    flex-grow: 1;
    height: 250px;
    box-shadow: 0 0 8px 0px black;
    border-radius: 1em;
    position: relative;
    padding: 2em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.id{
    position: absolute;
    right: 12px;
    top: 16px;
    text-align: right;
    font-size: 12px;
}

.card .name {
    font-size: 1.75em;
}

.card .info {
    display: flex;
}

.card .tags {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    gap: .5em;
    > * {
        width: 90px;
        height: 30px;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
    }
}

.card img {
    width: 120px;
    height: 120px;
}

.fire .card {
    background-color: var(--red-800);
}

.water .card {
    background-color: var(--blue-800);
}

.leaf .card {
    background-color: var(--green-700);
}

.tags .grass {
    background-image: linear-gradient(to top, var(--green-700), var(--green-400));
}

.tags .poison {
    background-image: linear-gradient(to top, var(--purple-800), var(--purple-600));
}

.tags .fire {
    background-image: linear-gradient(to top, var(--red-800), var(--red-600));
} 

.tags .water {
    background-image: linear-gradient(to top, var(--blue-800), var(--blue-600));
} 

.tags .flying {
    background-image: linear-gradient(to top, var(--gray-200) , var(--blue-700) 70%);
} 

.tags .ground {
    background-image: linear-gradient(to top, var(--yellow-900), var(--yellow-700));
} 

.tags .ice {
    background-image: linear-gradient(to top, var(--blue-400), var(--blue-600));
} 

.tags .bug {
    background-image: linear-gradient(to top, var(--green-800), var(--green-600));
} 

.tags .normal {
    background-image: linear-gradient(to top, var(--gray-800), var(--gray-600));
} 

.tags .electric {
    background-image: linear-gradient(to top, var(--yellow-600), var(--yellow-400));
} 

.tags .fairy {
    background-image: linear-gradient(to top, var(--purple-600), var(--purple-400));
} 

.tags .ghost {
    background-image: linear-gradient(to top, var(--purple-500), var(--purple-700));
} 

.tags .dragon {
    background-image: linear-gradient(to top, var(--purple-800), var(--purple-950));
} 

.tags .dark {
    background-image: linear-gradient(to top, var(--gray-800), var(--gray-950));
} 

.tags .steel {
    background-image: linear-gradient(to top, var(--gray-500), var(--gray-400));
} 

.tags .rock {
    background-image: linear-gradient(to top, var(--yellow-800), var(--yellow-600));
} 

.tags .psychic {
    background-image: linear-gradient(to top, var(--purple-500), var(--purple-700));
} 

.tags .fighting {
    background-image: linear-gradient(to top, var(--red-950), var(--red-500));
} 
/* 
.tags . {
    background-image: linear-gradient(to top, var(--x-800), var(--x-600));
} 
*/