body{
    text-align: center;

    background-color: black;
    color: white;
}
*{
    margin:0;
    padding:0;
}
.hp{
    color: green;
    font-size: 100px;
}

.bar {
    display: table-cell;
    position: inherit;
    width: 600px;
    height: 25px;
    background: linear-gradient(to bottom, #000000 0%,#a5a5a5 100%);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid black;
    vertical-align: middle;
    text-align: center;
}

.bar__progress {
    width: 0%;
    height: 100%;
    position: inherit;
    background: linear-gradient(to bottom, #53cbf1 0%,#05abe0 43%,#05abe0 50%,#05abe0 50%,#05abe0 58%,#53cbf1 99%);
    box-shadow: 3px 0 5px 0px rgb(48, 48, 48);
    transition: width 1s 0s ease-in;
}

.header{
    width: 100%;
    height: 25px;
    margin: 10px auto 10px auto;
    display: flex;
    justify-content: center;
}

.prob{
    width: 80px;
    height: 100%;
}

.text{
    text-shadow: -1px -1px darkblue,
    0 1px 0 white;
    color: blue;
    transition: all 1s;
    padding-top: 3px;
    padding-left: 10px;
}