HealthBar {
    position: absolute;
    width: 100px;
    height: 96.1%;
    left: 4px;
    bottom: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;

    .hp_bar {
        width: 36px;
        height: 97%;
        background-color: #00000066;
        position: relative;
    }

    .hp_bar_overlay {
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: #ff3333;
        transition: height 0.1s ease-out, background-color 0.25s linear;
        transform-origin: bottom;
        position: absolute;
    }

    .hp_bar_delta {
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: white;
        transition: height 0.4s ease-out;
        transform-origin: bottom;
        position: absolute;
    }

    .hp_bar_border {
        border: 6px solid black;
        position: absolute;
        border-radius: 10px;
        width: 42px;
        height: 98%;
    }

    //.heart_icon {
    //    position: absolute;
    //    top: -30px;
    //    color: #fff;
    //    font-size: 80px;
    //    font-family: W10Emoji;
    //    justify-content: center;
    //    align-items: center;
    //}

    //.hp_label {
    //    font-size: 36px;
    //    color: #ffbbbb;
        //text-shadow: 2px 2px 1px black;
    //    text-stroke: 21px #550000dd;
    //    position: absolute;
    //    font-weight: 800;
    //    top: 29px;
        //font-family: Sono Sans;
    //    font-family: National Park;
    //}
}