#app{
    padding-bottom: 2em;
}
.healthbar, .ragebar{
    background: #c0c0c0;
    height: 25px;
    width: 40%;
    border-radius: 5px;
    border: #000 2px solid;
    margin: 0.5em auto;
}
@media only screen and (max-width: 480px) {
    .healthbar, .ragebar{
        width:90%;
    }
}
.ragebar--inner{
    border-radius: 5px;
    height: 21px;
    font-weight: bold;
    line-height: 21px;
    color: #fff;
    text-align: center;
    transition: width 500ms;
}
.healthbar--inner{
    border-radius: 5px;
    height: 21px;
    font-weight: bold;
    line-height: 21px;
    color: #fff;
    text-align: center;
    transition: width 500ms;
}
.sprite-container{
    width: 100%;
}
#player--sprite{
    height: 64px;
    width: 64px;
    margin: 0 auto;
    background: url('assets/sprites/player.png') 0px -704px;
    text-align: center;
}
#monster--sprite{
    height: 64px;
    width: 64px;
    text-align: center;
    margin: 0 auto;
}
.player-turn{
    background: #2239dd;
    color: #fff;
    margin-bottom:.25em;
    font-weight: bold;
}
.monster-turn{
    background: hsl(348, 100%, 61%);
    color: #fff;
    font-weight: bold;
    margin-bottom:.25em;
}
.ff2p{
    font-family: 'Press Start 2P', cursive;
}
.ffad{
font-family: 'Architects Daughter', cursive;
}