.pokemonHoloWrapper{
    display: inline-block;
    position: relative;
    box-shadow:
    0px 0px 5px -1px rgb(111, 0, 255),
    1px 1px 3px 0px rgb(0, 140, 255),
    -7px -7px 10px -5px transparent,
    7px 7px 10px -5px transparent,
    0 0 5px 0px rgba(255,255,255,0),
    0 55px 35px -20px rgba(0, 0, 0, 0.5);
    /* animation: holoCard 12s ease 0s 1; */
    z-index: 20;
    border-style: groove;
}

.pokemonHolo::before, .pokemonHolo:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: opacity 0.4s ease-in-out;
}


.pokemonHoloBefore::before, .pokemonHoloBefore:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
}

.pokemonHoloBefore:hover:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(
        110deg,
        transparent 40%,
        rgba(0, 153, 255, 0.25) 45%,
        rgba(0, 153, 255, 0.25) 50%,
        transparent 55%
    );
    background-position: var(--bg-pos-x) var(--bg-pos-y);
    background-size: 150% 100%;
    opacity: 1;
    filter: brightness(2) contrast(2);
    transition: background-position 0.1s ease;
    z-index: 2;
    mix-blend-mode: color-dodge;
}

.pokemonHolo:before {
    background-image: linear-gradient(135deg, #ff4d4d, #4d4dff, #4dff4d, #ff4dff);
    opacity: 0.1;
    mix-blend-mode: color-dodge;
}


.pokemonHolo:after {
    background-image: url("https://assets.codepen.io/13471/sparkles.gif"),
    url(https://assets.codepen.io/13471/holo.png),
    linear-gradient(125deg, #ff008450 15%, #fca40040 30%, #ffff0030 40%, #00ff8a20 60%, #00cfff40 70%, #cc4cfa50 85%);
    background-position: var(--bg-pos-x) var(--bg-pos-y);
    background-size: 160%;
    background-blend-mode: overlay;
    opacity: 0.5;
    mix-blend-mode: overlay;
    filter: brightness(1) contrast(1);
    mix-blend-mode: color-dodge;
}

.pokemonHolo:hover:before {
    opacity: 0.5;
}

.pokemonHolo:hover:after {
    opacity: 1;
}





@keyframes holoCard {
    0%, 100% {
        transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
    }
    5%, 8% {
        transform: rotateZ(0deg) rotateX(6deg) rotateY(-20deg);
    }
    13%, 16% {
        transform: rotateZ(0deg) rotateX(-9deg) rotateY(32deg);
    }
    35%, 38% {
        transform: rotateZ(3deg) rotateX(12deg) rotateY(20deg);
    }
    55% {
        transform: rotateZ(-3deg) rotateX(-12deg) rotateY(-27deg);
    }
}