html {
    /* For sticky footer */
    position: relative;
    min-height: 100%;
}
body {
    color: #fff;
    background-color:  #161523;
    background-image:  linear-gradient(#00000000 0px, #161523 100vh);
    background-repeat: no-repeat;
    animation: bgShift 90s  infinite;

    font-family: 'Roboto', sans-serif;

    min-height: 100%;
    /* For sticky footer */
    margin-bottom: 60px;
}

@keyframes bgShift {
    0%   {background-color:#191753;}
    33%  {background-color:#571346;}
    66%  {background-color:#401c64;}
    100% {background-color:#191753;}
}

/* For sticky footer */
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  min-height:60px;
}

.text-druid {
    color: #ff8000;
}
.text-dk {
    color: #c41e3b;
}
.text-hunter {
    color: #9dd367;
}
.text-mage {
    color: #68ccef;
}
.text-paladin {
    color: #e68cab;
}
.text-priest {
    color: #d7d7d7;
}
.text-rogue {
    color: #fff468;
}
.text-shaman {
    color: #4a76ff; /* originally #2359ff */
}
.text-warlock {
    color: #9382c9;
}
.text-warrior {
    color: #bb9b63;
}

.text-druid-important {
    color: #ff8000 !important;
}
.text-hunter-important {
    color: #9dd367 !important;
}
.text-mage-important {
    color: #68ccef !important;
}
.text-paladin-important {
    color: #e68cab !important;
}
.text-priest-important {
    color: #d7d7d7 !important;
}
.text-rogue-important {
    color: #fff468 !important;
}
.text-shaman-important {
    color: #4a76ff !important;
}
.text-warlock-important {
    color: #9382c9 !important;
}
.text-warrior-important {
    color: #bb9b63 !important;
}

.text-link {
    color: #0080ff;
}
.text-cyan {
    color: #30bce0;
}
.text-gold {
    color: #ffb400; /* gold coins */
}
.text-legendary {
    color: #ff8000;
}
.text-epic {
    color: #a335ee;
}
.text-rare {
    color: #0070dd;
}
.text-uncommon {
    color: #1eff00;
}
.text-muted {
    color: #8e959b !important;
}
.text-discord {
    color: #7289DA;
}

.text-unselectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.cursor-pointer {
    cursor: pointer;
}

/* Increase size on hover */
.grow {
    transition: all .2s ease-in-out;
}
.grow:hover {
    transform: scale(1.2);
}

.hide-child:hover .child-transparent {
    opacity: 1.0;
}

.child-transparent {
    opacity: 0.0;
    transition: 0.3s;
}

.readable {
    max-width:480px;
}

.pewable:active {
    transition: all 0.15s;
    transform: scale(1.8);
}

.pew {
    position: absolute;
    color:#fff;
    font-size: 16px;
    font-weight: 700;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
    z-index: 10;
    display: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
}

.pewable {
    z-index:1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}