.Battle {
position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%);
  width:100%;
  height: 100%;
  background-image: url(../Images/Battle/BattleArea.png);
  background-size: cover;
  image-rendering: pixelated;
}

.Battle_hero_div, .Battle_enemy_div {
  position: absolute;
  transform: scale(4.5);
  width: 32px;
  height: 32px;
  overflow: hidden;
  background: url(../Images/Characters/shadow.png) no-repeat no-repeat;
}
.Battle_hero_img, .Battle_enemy_img {
  pointer-events: none;
}
.Battle_hero_div {
  top: 40%;
  left: 20%;
}
.Battle_hero_img {
  transform: translateX(-896px);
}
.Battle_enemy_img {
  transform: translateX(-768px);
  
}
.Battle_enemy_div {
  top:40%;
  right: 20%;
}
.Spell_div {
  position: absolute;
  transform: scale(4.5);
  left:195%;
  top:20%;
  width:64px;
  height: 64px;
  overflow:hidden;
}
.Spell_img {
  position:absolute;
  left: 0;
}




@keyframes battle-damage-blink {
  to {
    visibility: hidden;
  }
}
.battle-damage-blink {
  animation: battle-damage-blink 0.3s steps(2, start) infinite;
}


@keyframes spell-animation {
  from {
    transform: translate3d(0px, 0,0);
  }
  to {
    transform: translate3d(-100%, 0,0);
  }
}
.animating-spell {
  animation: spell-animation 1s steps(10) infinite;
}
@keyframes hero-animation {
  from {
    transform: translate3d(-896px, 0,0);
  }
  to {
    transform: translate3d(-1024px, 0,0);
  }
}
.animating-hero {
  animation: hero-animation 1s steps(4) infinite;
}

@keyframes hero-animation {
  from {
    transform: translate3d(-896px, 0,0);
  }
  to {
    transform: translate3d(-1024px, 0,0);
  }
}
.animating-hero {
  animation: hero-animation 1s steps(4) infinite;
}
@keyframes enemy-animation {
  from {
    transform: translate3d(-768px, 0,0);
  }
  to {
    transform: translate3d(-896px, 0,0);
  }
}
.animating-enemy {
  animation: enemy-animation 1s steps(4) infinite;
}
@media (max-width: 299px) {
  .Battle_hero_div, .Battle_enemy_div, .Spell_div {
    transform: scale(1.2); /* Scale down for very small screens */
  }
}

/* For screens between 300px and 399px */
@media (min-width: 300px) and (max-width: 399px) {
  .Battle_hero_div, .Battle_enemy_div, .Spell_div {
    transform: scale(1.5); /* Slightly larger scale */
  }
}

/* For screens between 400px and 499px */
@media (min-width: 400px) and (max-width: 499px) {
  .Battle_hero_div, .Battle_enemy_div, .Spell_div {
    transform: scale(1.9); /* Larger scale */
  }
}

/* For screens between 500px and 599px */
@media (min-width: 500px) and (max-width: 599px) {
  .Battle_hero_div, .Battle_enemy_div, .Spell_div {
    transform: scale(2.3); /* Larger scale */
  }
}

/* For screens between 600px and 799px */
@media (min-width: 600px) and (max-width: 799px) {
  .Battle_hero_div, .Battle_enemy_div, .Spell_div {
    transform: scale(3); /* Much larger scale */
  }
}

/* For screens between 800px and 999px */
@media (min-width: 800px) and (max-width: 999px) {
  .Battle_hero_div, .Battle_enemy_div, .Spell_div {
    transform: scale(3.5); /* Larger scale */
  }
}

/* For screens between 1000px and 1060px */
@media (min-width: 1000px) and (max-width: 1060px) {
  .Battle_hero_div, .Battle_enemy_div, .Spell_div {
    transform: scale(4); /* Larger scale */
  }
}

/* For ideal screen size (1061px) */
@media (min-width: 1061px) and (max-width: 1200px) {
  .Battle_hero_div, .Battle_enemy_div, .Spell_div {
    transform: scale(5); /* Default scale for ideal size */
  }
}

/* For larger screens (greater than 1200px) */
@media (min-width: 1201px) {
  .Battle_hero_div, .Battle_enemy_div, .Spell_div {
    transform: scale(6); /* Scale up for larger screens */
  }
}