.potions {
	position: absolute;
    --i: 0;
	--j: 0;
	left: 50%;
    transform: translateX(-50%) rotate(20deg);
	bottom: 5px;
	visibility: collapse;
}

.items {
	position: absolute;
	left: 50%;
	bottom: 20px;
    height: calc(170px / var(--n));
    width: calc(170px / var(--n));
	background-repeat: no-repeat;
    background-size: contain;
    transform: translateX(-50%);  

}
.fade {
}

.frostbrand {
    background-image: url("/images/Frostbrand.png");
}
.ghostlantern {
    background-image: url("/images/Ghost_lantern-5e.webp");
}
.shrubbery {
    background-image: url("/images/Shrubbery.webp");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 80%);
}
.healers_kit {
    background-image: url("/images/Healers_kit.png");
}
.caltrops {
    background-image: url("/images/Caltrops.webp");
}

.alchemist_fire {
    background-image: url("/images/bg3/Alchemist's_Fire.webp");
    transform: translateX(-50%) scaleX(-1);
}
.oil_flask {
    background-image: url("/images/bg3/Oil_Flask.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
}
.holy_water {
    background-image: url("/images/bg3/Holy_Water.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 80%);
}
.acid_vial {
    background-image: url("/images/bg3/Acid_Vial.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 80%);
}


.potion_of_healing {
    background-image: url("/images/bg3/Potion_of_Healing.png");
}
.potion_of_poison {
    background-image: url("/images/bg3/Potion_of_Healing.png");
    filter: hue-rotate(67deg)
}
.potion_of_healing2 {
    background-image: url("/images/bg3/Potion_of_Greater_Healing.webp");
}
.potion_of_healing3 {
    background-image: url("/images/bg3/Potion_of_Superior_Healing.webp");
}
.potion_of_healing4 {
    background-image: url("/images/bg3/Potion_of_Supreme_Healing.webp");
    transform: translateX(-50%) scaleX(-1);
}
.elixir_of_health {
    background-image: url("/images/bg3/Elixir_of_Health.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
}
.potion_of_vitality {
    background-image: url("/images/bg3/Potion_of_Vitality.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
}
.potion_of_animal_friendship {
    background-image: url("/images/bg3/Potion_of_Animal_Speaking.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
    transform: translateX(-50%) scaleX(-1);
}
.potion_of_heroism {
    background-image: url("/images/bg3/Elixir_of_Heroism.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
}
.potion_of_diminution {
    background-image: url("/images/bg3/Elixir_of_The_Colossus.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
}
.potion_of_growth {
    background-image: url("/images/bg3/Elixir_of_The_Colossus.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
}
.potion_of_climbing {
    background-image: url("/images/bg3/Potion_of_Glorious_Vaulting.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
}
.potion_of_clairvoyance {
    background-image: url("/images/potion_of_clairvoyance.webp");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
}
.potion_of_speed {
    background-image: url("/images/bg3/Potion_of_Speed.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
}
.potion_of_flying {
    background-image: url("/images/bg3/Potion_of_Flying.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
}
.potion_of_invisibility {
    background-image: url("/images/bg3/Potion_of_Invisibility.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
}
.potion_of_longevity {
    background-image: url("/images/bg3/Potion_of_Invisibility.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
    filter: sepia(90%);
}
.potion_of_love {
    background-image: url("/images/bg3/Potion_of_Invisibility.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
    filter:  hue-rotate(170deg) brightness(91%) sepia(70%) hue-rotate(290deg) saturate(1.5);
}
.potion_of_fire_breath {
    background-image: url("/images/bg3/Oil_of_Combustion.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
    transform: translateX(-50%) scaleX(-1);
}
.potion_of_water_breathing {
    background-image: url("/images/bg3/Hearthlight_Bomb.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 80%);
    filter: hue-rotate(300deg) saturate(0.8) brightness(0.8);
    transform: translateX(-50%) scaleX(-1);
}
.potion_of_short_rest {
    background-image: url("/images/bg3/Potion_of_Angelic_Reprieve.png");
}


.potion_of_acid_resistance {
    background-image: url("/images/bg3/Elixir_of_Acid_Resistance.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
}
.potion_of_cold_resistance {
    background-image: url("/images/bg3/Elixir_of_Cold_Resistance.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
}
.potion_of_fire_resistance {
    background-image: url("/images/bg3/Elixir_of_Fire_Resistance.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
}
.potion_of_force_resistance {
    background-image: url("/images/bg3/Elixir_of_Force_Resistance.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
}
.potion_of_lightning_resistance {
    background-image: url("/images/bg3/Elixir_of_Lightning_Resistance.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
}
.potion_of_necrotic_resistance {
    background-image: url("/images/bg3/Elixir_of_Necrotic_Resistance.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
}
.potion_of_poison_resistance {
    background-image: url("/images/bg3/Elixir_of_Poison_Resistance.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
}
.potion_of_psychic_resistance {
    background-image: url("/images/bg3/Elixir_of_Psychic_Resistance.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
}
.potion_of_radiant_resistance {
    background-image: url("/images/bg3/Elixir_of_Radiant_Resistance.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
}
.potion_of_thunder_resistance {
    background-image: url("/images/bg3/Elixir_of_Thunder_Resistance.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
}
.potion_of_invulnerability {
    background-image: url("/images/bg3/Elixir_of_Universal_Resistance.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
}
.potion_of_hill_giant_strength {
    background-image: url("/images/bg3/Elixir_of_Hill_Giant_Strength.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
    transform: translateX(-50%) scaleX(-1);
    filter: hue-rotate(45deg);
}
.potion_of_frost_giant_strength {
    background-image: url("/images/bg3/Elixir_of_Hill_Giant_Strength.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
    transform: translateX(-50%) scaleX(-1);
    filter: hue-rotate(160deg)
}
.potion_of_stone_giant_strength {
    background-image: url("/images/bg3/Elixir_of_Hill_Giant_Strength.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
    transform: translateX(-50%) scaleX(-1);
    filter: saturate(20%)
}
.potion_of_fire_giant_strength {
    background-image: url("/images/bg3/Elixir_of_Hill_Giant_Strength.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
    transform: translateX(-50%) scaleX(-1);
    filter: saturate(-20deg)
}
.potion_of_cloud_giant_strength {
    background-image: url("/images/bg3/Elixir_of_Cloud_Giant_Strength.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
}
.potion_of_storm_giant_strength {
    background-image: url("/images/bg3/Elixir_of_Cloud_Giant_Strength.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
    filter: hue-rotate(200deg);
}
.oil_of_etheralness {
    background-image: url("/images/bg3/Hearthlight_Bomb.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 80%);
    filter: saturate(0);
    transform: translateX(-50%) scaleX(-1);
}
.oil_of_sharpness {
    background-image: url("/images/bg3/Diluted_Oil_of_Sharpness.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 80%);
}
.oil_of_slipperiness {
    background-image: url("/images/bg3/Elixir_of_Guileful_Movement.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 80%);
    transform: translateX(-50%) scaleX(-1);
}
.basic_poison {
    background-image: url("/images/bg3/Simple_Toxin.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
}
.antidote {
    background-image: url("/images/bg3/Antidote.png");
    mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 50%, transparent 70%);
}


.set1{
    --n:3; /* scaling factor */
    /* coordinates of the image */
    background-image: url("/images/potion_set_1.png");
    height:calc(512px / var(--n));
    width:calc(512px / var(--n));
	background-position-x: calc(var(--i)/var(--n) * 512px);
    background-position-y: calc((var(--i) + var(--j))/var(--n) * 512px);
    background-size:calc(2048px / var(--n)) calc(2048px / var(--n));
}
.set2{
    --n:1.1; /* scaling factor */
    /* coordinates of the image */
    background-image: url(/images/potion_set_2.png);
    height: calc(170px / var(--n));
    width: calc(170px / var(--n));
    background-position-x: calc(var(--i)/var(--n) * 174.66px);
    background-position-y: calc((var(--j))/var(--n) * 175.25px + 0px);
    background-size: calc(1572px / var(--n)) calc(1402px / var(--n));
}