.tower {
    text-align: center;
}

.towerball {
    border-radius: 50%;
    position: relative;
    background-color: lightgrey;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    text-align: center;
}

.towerinnerbar {
    background: -moz-linear-gradient(90deg, blue 0%, aqua 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, aqua), color-stop(100%, blue)); /* safari4+,chrome */
    background: -webkit-linear-gradient(90deg, blue 0%, aqua 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(90deg, blue 0%, aqua 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(90deg, blue 0%, aqua 100%); /* ie10+ */
    background: linear-gradient(0deg, blue 0%, aqua 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='aqua', endColorstr='blue',GradientType=0 ); /* ie6-9 */
    height: 100%;
    width: 100%;
    -webkit-transition: height .6s ease;
    -moz-transition: height .6s ease;
    -o-transition: height .6s ease;
    transition: height .6s ease;
}

.stem {
    margin-top: -5px;
    display: inline-block;
}

.internalmetertext {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    font-weight: 900;
    color: red;
}