:root {
    --normal: #A8A77A;
    --fire: #F3733F;
    --water: #8ED8F6;
    --electric: #F7D02C;
    --grass: #BDD84E;
    --ice: #96D9D6;
    --fighting: #FDBD46;
    --poison: #0A5F6D;
    --ground: #FCB23C;
    --psychic: #E6AFD0;
    --bug: #A6B91A;
    --rock: #B6A136;
    --ghost: #735797;
    --dragon: #889AD1;
    --fairy: #D685AD;
  }
.water {
    background: url(./img/water_bg.png);
    background-size: cover;
  }
.fire {
  background: url(./img/fire_bg.png);
  background-size: cover;
}
.grass {
  background: url(./img/grass_bg.png);
  background-size: cover;
}
.bug {
  background: url(./img/bug_bg.png);
  background-size: cover;
}
.normal {
  background: url(./img/normal_bg.png);
  background-size: cover;
}
.electric {
  background: url(./img/electric_bg.png);
  background-size: cover;
}
.fighting {
  background: url(./img/fighting_bg.png);
  background-size: cover;
}
.ghost {
  background: url(./img/ghost_bg.png);
  background-size: cover;
}
.rock {
  background: url(./img/rock_bg.png);
  background-size: cover;
}
.ground {
  background: url(./img/ground_bg.png);
  background-size: cover;
}
.poison {
  background: url(./img/poison_bg.png);
  background-size: cover;
}
.psychic {
  background: url(./img/psychic_bg.png);
  background-size: cover;
}
.fairy {
  background: url(./img/fairy_bg.png);
  background-size: cover;
}
.ice {
  background: url(./img/ice_bg.png);
  background-size: cover;
}
.dragon {
  background: url(./img/dragon_bg.png);
  background-size: cover;
}
.mew {
  background: url(./img/mew_bg.png);
  background-size: cover;
}
.mewtow {
  background: url(./img/mewtow_bg.png);
  background-size: cover;
}

.blank {
  background: url(./img/blank_bg.png);
  background-size: cover;
  background-position: 50%, 0%;
}

.fireShadow::before,
.fire-bg {
  background: var(--fire);
}
.waterShadow::before,
.water-bg {
  background: var(--water);
}
.grassShadow::before,
.grass-bg {
  background: var(--grass);
}
.bugShadow::before,
.bug-bg {
  background: var(--bug);
}
.normalShadow::before,
.normal-bg {
  background: var(--normal);
}
.electricShadow::before,
.electric-bg {
  background: var(--electric);
}
.poisonShadow::before,
.poison-bg {
  background: var(--poison);
}
.psychicShadow::before,
.psychic-bg {
  background: var(--psychic);
}
.fightingShadow::before,
.fighting-bg {
  background: var(--fighting);
}
.rockShadow::before,
.rock-bg {
  background: var(--rock);
}
.ghostShadow::before,
.ghost-bg {
  background: var(--ghost);
}
.groundShadow::before,
.ground-bg {
  background: var(--ground);
}
.fairyShadow::before,
.fairy-bg {
  background: var(--fairy);
}
.iceShadow::before,
.ice-bg {
  background: var(--ice);
}
.dragonShadow::before,
.dragon-bg {
  background: var(--dragon);
}

.mixShadow::before {
  background: linear-gradient(217deg,#f6e652, rgba(8, 209, 39, 0) 70.71%),
            linear-gradient(127deg, #ff9441, rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, #529AD0, rgba(0,0,255,0) 70.71%);
}
.mixShadowfour::before {
  background: linear-gradient(217deg,#529AD0, rgba(8, 209, 39, 0) 70.71%),
            linear-gradient(217deg,#f6e652, rgba(8, 209, 39, 0) 99.71%),
            linear-gradient(127deg, #ff9441, rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, #8b7b62, rgba(0,0,255,0) 70.71%);
}



.grass-shadow {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
} 
.grass-shadow:hover {
  transform: rotateX(10deg) rotateY(5deg) translateZ(10px);
  box-shadow: 0 8px 16px var(--grass); 
}


.normal-shadow {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
} 
.normal-shadow:hover {
  transform: rotateX(10deg) rotateY(5deg) translateZ(10px);
  box-shadow: 0 8px 16px var(--normal); 
}

.fire-shadow {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
} 
.fire-shadow:hover {
  transform: rotateX(10deg) rotateY(5deg) translateZ(10px);
  box-shadow: 0 8px 16px var(--fire); 
}

.water-shadow {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
} 
.water-shadow:hover {
  transform: rotateX(10deg) rotateY(5deg) translateZ(10px);
  box-shadow: 0 8px 16px var(--water); 
}

.electric-shadow {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
} 
.electric-shadow:hover {
  transform: rotateX(10deg) rotateY(5deg) translateZ(10px);
  box-shadow: 0 8px 16px var(--electric); 
}

.ice-shadow {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
} 
.ice-shadow:hover {
  transform: rotateX(10deg) rotateY(5deg) translateZ(10px);
  box-shadow: 0 8px 16px var(--ice); 
}

.fighting-shadow {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
} 
.fighting-shadow:hover {
  transform: rotateX(10deg) rotateY(5deg) translateZ(10px);
  box-shadow: 0 8px 16px var(--fighting); 
}

.poison-shadow {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
} 
.poison-shadow:hover {
  transform: rotateX(10deg) rotateY(5deg) translateZ(10px);
  box-shadow: 0 8px 16px var(--poison); 
}

.ground-shadow {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
} 
.ground-shadow:hover {
  transform: rotateX(10deg) rotateY(5deg) translateZ(10px);
  box-shadow: 0 8px 16px var(--ground); 
}

.psychic-shadow {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
} 
.psychic-shadow:hover {
  transform: rotateX(10deg) rotateY(5deg) translateZ(10px);
  box-shadow: 0 8px 16px var(--psychic); 
}

.bug-shadow {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
} 
.bug-shadow:hover {
  transform: rotateX(10deg) rotateY(5deg) translateZ(10px);
  box-shadow: 0 8px 16px var(--bug); 
}

.rock-shadow {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
} 
.rock-shadow:hover {
  transform: rotateX(10deg) rotateY(5deg) translateZ(10px);
  box-shadow: 0 8px 16px var(--rock); 
}

.ghost-shadow {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
} 
.ghost-shadow:hover {
  transform: rotateX(10deg) rotateY(5deg) translateZ(10px);
  box-shadow: 0 8px 16px var(--ghost); 
}

.dragon-shadow {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
} 
.dragon-shadow:hover {
  transform: rotateX(10deg) rotateY(5deg) translateZ(10px);
  box-shadow: 0 8px 16px var(--dragon); 
}

.fairy-shadow {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
} 
.fairy-shadow:hover {
  transform: rotateX(10deg) rotateY(5deg) translateZ(10px);
  box-shadow: 0 8px 16px var(--fairy); 
}