@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
/* task 4 */
#field {
    background-image: url('./images/bgMenu.jpg');
    background-position: absolute;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

/* classes */
.border-special {
    border-width: 3px;
}
.game-shadow {
    color:black;
    text-shadow: 2px 2px #FFFF00;
}
.bg-body {
    background-image: url('./images/bgMenu.jpg');
    background-position: absolute;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.game-text {
    font-family: 'Press Start 2P';
}
.text-footer {
    font-size: .8rem;
}
.text-footer-title {
    font-size: 1rem;
}
/* ids */
#character-selection-image {
    height: 400px;
}

#button-character {
    width: 300px;
}

#pokeballSelect {
    width: 20px;
}

.auto-font-size-header {
    font-size: 3rem;
}

.auto-font-size-titles {
    font-family: 'Press Start 2P';
    font-size: 2rem;
}

.auto-font-size-description {
    font-family: 'Press Start 2P';
    font-size: 1rem;
}

.auto-font-size-button {
    font-size: 1.5rem;
}

.auto-image-battle-front {
    height: 150px;
}

.auto-image-battle-back {
    height: 350px;
}

.background-battle-ui {
    background-color: white;
}

.button-battle {
    width: 250px
}

.auto-font-size-health {
    margin-top: 1.3rem;
    width: 90%;
    font-family: 'Press Start 2P';
    color:black;
    font-size: .7rem;
}


@keyframes shakeCharacter {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes fadeAway {
    from { opacity: 100%; }
    to { opacity: 0%; }
}

@keyframes glowHeal {
    from { filter: saturate(100%) }
    to { filter: saturate(200%) }
}

/* #playerHealthBar {
    width: 100%;
}

#opponentHealthBar {
    width: 100%;
} */