body{
    height: 100px;
}

/* Vida */

#caja{
    width: 1fr;
    height: 15px;
    background-color: rgb(190, 190, 190);
    border: 7px solid rgb(190, 190, 190);
    margin-top: 5px;
    border-radius: 7px;
    position: relative;
}

#barra{
    border-radius: 2px;
    width: 100%;
    height: 100%;
    background-color: limegreen;
    position: absolute;
    z-index: 2;
    animation-name: colorbarra;
    animation-duration: 101s;
    animation-play-state: paused;
    animation-delay: 0s;
}

@keyframes colorbarra {
    0% {
        background-color: limegreen;
    }
    20% {
        background-color: limegreen;
    }
    60% {
        background-color: orange;
    }
    80%{
        background-color: red;
    }
    100% {
        background-color: darkred;
    }
}

#inferior{
    border-radius: 2px;
    width: 100%;
    height: 100%;
    background-color: darkgreen;
    position: absolute;
    z-index: 1;
    animation-name: colorbarra2;
    animation-duration: 101s;
    animation-play-state: paused;
    animation-delay: 0s;
}

@keyframes colorbarra2 {
    0% {
        background-color: darkgreen;
    }
    20% {
        background-color: darkgreen;
    }
    60% {
        background-color: chocolate;
    }
    80%{
        background-color: darkred;
    }
    100% {
        background-color: black;
    }
}

/* Anima */

#cajaAnima{
    width: 1fr;
    height: 5px;
    background-color: rgb(190, 190, 190);
    border: 4px solid rgb(190, 190, 190);
    margin-top: -4px;
    border-radius: 7px;
    position: relative;
}

#barraAnima{
    border-radius: 2px;
    width: 100%;
    height: 100%;
    background-color: DeepSkyBlue;
    position: absolute;
    z-index: 2;
}

#inferiorAnima{
    border-radius: 2px;
    width: 100%;
    height: 100%;
    background-color: SteelBlue;
    position: absolute;
    z-index: 1;
}

/* Textos */

#textos{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-top: -17px;
}

#TextoVida{ 
    color: #000000;
    margin-top: -17px;
    margin-left: 24px;
    margin-bottom: 0px;
    font-size: 92px;
    text-shadow:
                -2px -2px 0 #ffffff,
                2px -2px 0 #ffffff,
                -2px 2px 0 #ffffff,
                2px 2px 0 #ffffff,
                -3px 0px 0 #ffffff,
                3px 0px 0 #ffffff,
                0px -3px 0 #ffffff,
                0px 3px 0 #ffffff;
}

#TextoAnima{ 
    color: SteelBlue;
    margin-bottom: 10px;
    font-size: 45px;
    text-shadow:
                -2px -2px 0 #ffffff,
                2px -2px 0 #ffffff,
                -2px 2px 0 #ffffff,
                2px 2px 0 #ffffff,
                -3px 0px 0 #ffffff,
                3px 0px 0 #ffffff,
                0px -3px 0 #ffffff,
                0px 3px 0 #ffffff;
}