.sprite-images-and-components {
    z-index: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    height: 600px;
    width: 1000px;
}

.you {
    /* toggle display flex to none and back on and off when selecting through menus */
    display: none;
    position: absolute;
    top: 75%;
    left: 40%;
    transform: translate(-50%, -50%);
    scale: 4;
    animation: slide-in-left 1s ease-in-out;
    animation: attack-right 0.3  reverse 2 direction fill-mode;
}   @media screen and (max-height: 430px) {
    .you {
        scale: 3.15;
        top: 70%;
        left: 40%;
    }
}

@keyframes slide-in-left {
    from {
        left: 20%;
        opacity: 0;
    }
    to {
        left: 40%;
        opacity: 1;
    }
}

@keyframes attack-right {
    from {
        left: 40%; 
    } 50% {
        left: 80%; 
    }
}


.oponent {
    z-index: 0;
    display: none;
    position: absolute;
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%);
    scale: 3;
    animation: slide-in-right 1s ease-in-out;
}   @media screen and (max-height: 430px) {
    .oponent {
        scale: 2.25;
        top: 50%;
        left: 75%;
    }
}

@keyframes slide-in-right {
    from {
        left: 100%;
        opacity: 0;
    }
    to {
        left: 80%;
        opacity: 1;
    }
}


/* death animation */
@keyframes fadeOut {
    from {
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    to {
        animation-timing-function: ease-in-out;
        opacity: 0;
    }
}

/* player attack sprite gifs against ai */

.player-fire-attack { 
    display: none;
    position: absolute;
    top: 5%;
    left: 60%;
}

.player-water-attack { 
    display: none;
    position: absolute;
    top: 10%;
    left: 55%;
}

.player-grass-attack { 
    display: none;
    position: absolute;
    top: 5%;
    left: 55%;
}

.player-electric-attack { 
    display: none;
    position: absolute;
    top: 25%;
    left: 65%;
}

/* ai attack sprite gifs against player */

.ai-fire-attack { 
    display: none;
    position: absolute;
    top: 30%;
    left: 20%;
}

.ai-water-attack { 
    display: none;
    position: absolute;
    top: 30%;
    left: 15%;
}

.ai-grass-attack { 
    display: none;
    position: absolute;
    top: 25%;
    left: 15%;
}

.ai-electric-attack { 
    display: none;
    position: absolute;
    top: 50%;
    left: 25%;
}