#check-anemo {background-image: url("/assets/img/filter/genshin/Element_Anemo.webp");}
#check-cryo {background-image: url("/assets/img/filter/genshin/Element_Cryo.webp");}
#check-dendro {background-image: url("/assets/img/filter/genshin/Element_Dendro.webp");}
#check-electro {background-image: url("/assets/img/filter/genshin/Element_Electro.webp");}
#check-geo {background-image: url("/assets/img/filter/genshin/Element_Geo.webp");}
#check-hydro {background-image: url("/assets/img/filter/genshin/Element_Hydro.webp");}
#check-pyro {background-image: url("/assets/img/filter/genshin/Element_Pyro.webp");}
#check-all {background-image: url("/assets/img/filter/genshin/Element_All.webp");}
#check-unaligned {background-image: url("/assets/img/filter/genshin/Element_Unaligned.webp");}

#check-4-star {background-image: url("/assets/img/filter/genshin/Rarity_4.webp");}
#check-5-star {background-image: url("/assets/img/filter/genshin/Rarity_5.webp");}

#check-bow {background-image: url("/assets/img/filter/genshin/Icon_Bow.webp");}
#check-catalyst {background-image: url("/assets/img/filter/genshin/Icon_Catalyst.webp");}
#check-claymore {background-image: url("/assets/img/filter/genshin/Icon_Claymore.webp");}
#check-polearm {background-image: url("/assets/img/filter/genshin/Icon_Polearm.webp");}
#check-sword {background-image: url("/assets/img/filter/genshin/Icon_Sword.webp");}

#check-mondstadt {background-image: url("/assets/img/filter/genshin/Emblem_Mondstadt.webp");}
#check-liyue {background-image: url("/assets/img/filter/genshin/Emblem_Liyue.webp");}
#check-inazuma {background-image: url("/assets/img/filter/genshin/Emblem_Inazuma.webp");}
#check-sumeru {background-image: url("/assets/img/filter/genshin/Emblem_Sumeru.webp");}
#check-fontaine {background-image: url("/assets/img/filter/genshin/Emblem_Fontaine.webp");}
#check-natlan {background-image: url("/assets/img/filter/genshin/Emblem_Natlan.webp");}

#check-aloy {background-image: url("/assets/img/filter/genshin/Aloy.webp");}
#check-traveler {background-image: url("/assets/img/filter/genshin/Icon_Twins.webp");}

#check-trounce {background-image: url("/assets/img/filter/genshin/Trounce_Boss.webp");}
#check-world {background-image: url("/assets/img/filter/genshin/World_Boss.webp");}

#character-filter {
    --element-Pyro-1: hsl(11, 84%, 53%);
    --element-Pyro-2: hsl(11, 84%, 43%);
    --element-Hydro-1: hsl(195, 100%, 50%);
    --element-Hydro-2: hsl(195, 100%, 40%);
    --element-Anemo-1: hsl(175, 50%, 40%);
    --element-Anemo-2: hsl(175, 50%, 30%);
    --element-Electro-1: hsl(272, 47%, 57%);
    --element-Electro-2: hsl(272, 47%, 45%);
    --element-Dendro-1: hsl(78, 100%, 27%);
    --element-Dendro-2: hsl(78, 100%, 20%);
    --element-Cryo-1: hsl(200, 40%, 64%);
    --element-Cryo-2: hsl(200, 40%, 54%);
    --element-Geo-1: hsl(43, 63%, 65%);
    --element-Geo-2: hsl(43, 63%, 50%);
    --element-All-1: hsl(30, 20%, 63%);
    --element-All-2: hsl(30, 20%, 50%);

    --rarity-5: hsl(35, 66%, 60%);
    --rarity-4: hsl(273, 24%, 56%);

    --rarity-5-hover: hsl(35, 66%, 80%);
    --rarity-4-hover: hsl(273, 24%, 76%);

    --boss-World-1: hsl(200, 20%, 50%);
    --boss-World-2: hsl(200, 20%, 40%);
    --boss-Trounce-1: hsl(330, 20%, 50%);
    --boss-Trounce-2: hsl(330, 20%, 40%);
}

.rarity-5 {
    background: linear-gradient(transparent, var(--rarity-5))
}

.rarity-4 {
    background: linear-gradient(transparent, var(--rarity-4))
}

.rarity-5:hover .icon-bust {
    filter: drop-shadow(0 0 1rem var(--rarity-5-hover));
}

.rarity-4:hover .icon-bust {
    filter: drop-shadow(0 0 1rem var(--rarity-4-hover));
}

.boss-World {
    background: linear-gradient(transparent, var(--boss-World-1))
}

.boss-Trounce {
    background: linear-gradient(transparent, var(--boss-Trounce-1))
}