/* ABILITIES */
.energy-shield {
    position: absolute;
    animation: spin 4s linear infinite;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    box-shadow:
        inset 0 0 50px #fff,
        inset 20px 0 60px violet,
        inset -20px 0 60px #0ff,
        inset 20px 0 300px violet,
        inset -20px 0 300px #0ff,
          0 0 50px #fff,
          -10px 0 60px violet,
          10px 0 60px #0ff;
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* HEALTH BAR */
.health-bar {
    height: 30px;
    width: 10px;
    border-radius: 2px 4px;
    box-sizing: border-box;
    -ms-transform: skewX(10deg);
    /* IE 9 */
    -webkit-transform: skewX(10deg);
    /* Safari */
    transform: skewX(10deg);
    position:relative;
    /*   opacity:0; */
}

.health-bar-success {
    background: linear-gradient(0deg, #83FA21 0%, #C8FF9B 84%);
}

.health-bar-warning {
    background: linear-gradient(0deg, goldenrod 0%, gold 84%);
}

.health-bar-danger {
    background: linear-gradient(0deg, #8B0000 0%, #DC143C 84%);
}

.text-health-bar-success {
    background: linear-gradient(0deg, #83FA21 0%, #C8FF9B 84%);
    color: transparent;
    background-clip: text;
}

.text-health-bar-warning {
    background: linear-gradient(0deg, goldenrod 0%, gold 84%);
    color: transparent;
    background-clip: text;
}

.text-health-bar-danger {
    background: linear-gradient(0deg, #8B0000 0%, #DC143C 84%);
    color: transparent;
    background-clip: text;
}