* {
    text-align: center;
    font-size: 20px;
    color: white;
    font-family: Palatino;
}

/*
*:hover {
    border: 1px solid yellow;
}
*/

body {
    display: flex;
    justify-content: center;
    background: black;
}

#pop-up-container {
    width: 100%;
    height: 110%;
    z-index: 1;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 1);
}
#pop-up-container p {
    margin: 5px;
    font-size: 16px;
    display: inline-block;
}
#pop-up-container p:hover {
    font-weight: bold;
}

#player-party {
    border: 3px solid white;
    width: 500px;
    height: 175px;
}

#canvas {
    background-image: url("img/grass-background.png");
    background-size: cover;
    display: block;
    justify-content: center;
    align-items: center;
    width: 1280px;
    height: 720px;
}

#party-info {
    width: 25%;
    height: 100%;
}

.character-info {
    display: flex;
    margin: 5%;
    width: 100%;
    height: 25%;
}
.character-info h1 {
    text-align: center;
    font-size: 16px;
    width: 33%;
    margin: 10px;
}
.character-info p {
    font-size: 14px;
    margin: 15px;
}

#game-log {
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    height: auto;
}

#description {
    padding: 5%;
    width: 300px;
    font-size: 30px;
}

#menu {
    padding: 5%;
    width: 435px;
}

.option {
    margin: 15px;
    text-align: left;
    font-size: 28px;
}
.option:hover {
    font-weight: bold;
}

#player-screen {
    display: inline-block;
    padding-top: 65px;
    width: 33%;
    height: 100%;
}

#enemy-screen {
    display: inline-block;
    width: 66%;
    height: 100%;
}

#game-screen {
    display: flex;
    width: 100%;
    height: 66%;
}

.character-img {
    display: block;
    height: 80px;
    width: 80px;
    transform: scaleX(-1);
    margin: 5% auto;
}

.enemy-info {
    display: inline-block;
    height: 100px;
    margin: 10%;
}

.enemy-health-bar {
    background: red;
    width: 100px;
    height: 10px;
    margin: 5%;
}

#enemy-target {
    border: 4px solid white;
}

.enemy-img {
    transform: scaleX(-1);
    width: 100px;
    height: 100px;
}

.target {
    border: 5px solid white;
    border-radius: 5px;
}

.selected-character {
    transform: translateX(150px) scaleX(-1);
}

.pick-job {
    display: inline-block;
    width: 110px;
    height: 150px;
    padding: 5px
}
.pick-job img {
    width: 95%;
    height: auto;
}
.pick-job p {
    text-align: center;
    font-size: 16px;
}
.pick-job:hover {
    border: 3px solid white;
}


.hit {
    animation: damaged 1s linear 1;
}

.heal {
    animation: healed 2s linear 1;
}

.alive {
    animation: sway 2s linear infinite;
}

.damaged {
    animation: sway 5s linear infinite;
}

.dead {
    filter: invert(100%);
}

/* animations */
@keyframes moving {
    0% { transform: scaleX(-1) translateY(-5px); }
    50% { transform: scaleX(-1) translateY(0px); }
    100% { transform: scaleX(-1) translateY(-5px); }
}

@keyframes sway {
    0% { transform: scaleX(-1) translate(-5px, 0px); }
    12% { transform: scaleX(-1) translate(-5px, -5px); }
    25% { transform: scaleX(-1) translate(0px, -5px); }
    37% { transform: scaleX(-1) translate(5px, -5px); }
    50% { transform: scaleX(-1) translate(5px, 0px); }
    62% { transform: scaleX(-1) translate(5px, -5px); }
    75% { transform: scaleX(-1) translate(0px, -5px); }
    87% { transform: scaleX(-1) translate(-5px, -5px); }
    100% { transform: scaleX(-1) translate(-5px, 0px); }
}

@keyframes damaged {
    0% { background: red; }
    100% { background: none; }
}

@keyframes healed {
    0% { background: green; }
    100% { background: none; }
}