.yourelementWin{
   animation: yourattackWin 1.5s;
}

.yourelementLose{
   animation: yourattackLose 1.5s;
}

.yourelementTie{
   animation: yourattackTie 1.5s;
}

.yourelementPhysical{
   animation: yourattackPhysical 1.5s;
}


.enemyelementWin{
   animation: enemyattackWin 1.5s;
}

.enemyelementLose{
   animation: enemyattackLose 1.5s;
}

.enemyelementTie{
   animation: enemyattackTie 1.5s;
}

.enemyelementPhysical{
   animation: enemyattackPhysical 1.5s;
}

.hidden {
   display: none;
}

.getHit{
    animation: getHit 0.7s;
}

.youMoveRight{
    animation: youMoveRight 1s;
}

.enemyMoveLeft{
    animation: enemyMoveLeft 1s;
}

.enemyMovePhysical{
    animation: enemyMoveLeft 1s;
}

.selected{
    /* outline: 2px solid red; */
    transform: rotateX(20deg);
    border: 3px solid green;              /* border */
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.7); /* shadow */
}

.starWarsText {
    animation: starWarsText 20s forwards;
}

.hidden{
    display:none;
}

/* #charmanderCharacter:hover{
    box-shadow: 4px 6px 12px rgba(247, 243, 243, 0.993);
    cursor: pointer;
} */

.slowlyAppear {
    animation: slowlyAppear 14s forwards;
}

@keyframes yourattackWin {
     0% {
         transform: translateX(0px) translateY(0px);

     }
     100% {
         transform: translateX(550px) translateY(-150px);
;
     }
 }
    

 @keyframes yourattackLose {
     0% {
         transform: translateX(0px) translateY(0px);
     }
     50%{
        transform: translateX(225px) translateY(-75px);
          opacity:10%;
     }
     100% {
         transform: translateX(225px) translateY(-75px);
        opacity:10%;
     }
 }
    
@keyframes yourattackTie {
     0% {
         transform: translateX(0px) translateY(0px);
     }
     90%{
        transform: translateX(225px) translateY(-75px);
     }
     100% {
         transform: translateX(225px) translateY(-75px) scale(1.1); opacity: 0.2;
     }
 }

 @keyframes yourattackPhysical {
     0% {
         transform: translateX(0px) translateY(0px);
     }
     40%{
        transform: translateX(225px) translateY(-75px) scale(1.05);
     }
     100% {
         transform: translateX(265px) translateY(-60px) scale(1.05);
     }
 }

 @keyframes enemyattackWin {
     0% {
         transform: translateX(0px) translateY(0px);
     }
     100% {
         transform: translateX(-550px) translateY(200px);
     }
 }

 
 @keyframes enemyattackLose {
     0% {
         transform: translateX(0px) translateY(0px);
     }
     50% {
         transform: translateX(-225px) translateY(100px);
         opacity:10%;
         

     }
    100% {
         transform: translateX(-225px) translateY(100px);
        opacity:10%;
     }
 }

 
 
 @keyframes enemyattackTie {
     0% {
         transform: translateX(0px) translateY(0px);
     }
     90%{ 
         transform: translateX(-290px) translateY(130px) scale(1.1)
     }
     100% {
         transform: translateX(-290px) translateY(130px) scale(1.1); opacity:0.2;
     }
 }

  @keyframes enemyattackPhysical {
     0% {
         transform: translateX(0px) translateY(0px);
     }
     40%{ 
         transform: translateX(-270px) translateY(140px) scale(1.05)
     }
     100% {
         transform: translateX(-300px) translateY(100px) scale(1.05);
     }
 }
    
@keyframes getHit {
	0%,
    10%,
    20%,
    30%,
    40%,
    50%,
    60%,
    70%,
    80%,
	90%,
	100% {
		opacity: 1;
	}
    15%,
	25%,
    35%,
    45%,
    55%,
    65%,
	75%,
    85%,
    95% {
		opacity: 0;
	}
}


@keyframes youMoveRight {
    0% {
        transform: translateX(-200px);
    }
    100% {
        transform: translateX(0px);
    }
}

@keyframes enemyMoveLeft {
    0% {
        transform: translateX(200px);
    }
    100% {
        transform: translateX(-0px);
    }
}

@keyframes slowlyAppear {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes starWarsText {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-20px);
        opacity: 0;
    }
}

@media (max-width: 400px) {
    #burgericon{
        display: block;
    }
    #navdesktop{
        display:none;
    }

    #rightHeaderContainer{
        display:flex;
    }

    #userIcon{
        display:none;
    }
}

@media (max-width: 768px) {
    #burgericon{
        display: inline-block;
    }
    #navdesktop{
        display:none;
    }
    #rightHeaderContainer{
        display:flex;
    }

}

@media (min-width: 768px) {
    #burgericon{
        display: none;
    }
    #navdesktop{
        display:flex;
    }
    #rightHeaderContainer{
        display:flex;
    }
}