#view-container > .view.combat {
    xborder:5px solid lime;
    justify-content: start;
} 

#zone-title {
    xborder: 1px solid red;
    pointer-events: none;
    padding:5px 50px;
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(0,0,0,.8) 20%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0) 100%);

    font-family: Georgia, 'Times New Roman', Times, serif;
    xfont-family:consolas,monospace;
    text-transform: uppercase;
    font-size:1.1em;
    text-align:center;
    letter-spacing:3px;

  

    /*
    text-shadow: 
        0 0 1vw #FA1C16, 
        0 0 3vw #FA1C16, 
        0 0 5vw #FA1C16, 
        0 0 5vw #FA1C16, 
        0 0 .4vw #FED128, 
        0px 0px 0px #806914
    ;
    */

    text-shadow: 0px 0px 13px rgb(255, 255, 255);  

    color: #e70000;
    color: #ffda53;
    color:#c0ab82;
}

#enemy-container {
    xborder:10px solid lime;
    height:100%;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    padding-top:20px;
}

#enemy-name-container {
    xborder:1px solid orange;
    text-align: center;
    height:10%;
    xmargin-top:40px;
    padding:0px 20px 0px 20px;
    xpadding:20px;
    display:flex;

    align-items: end;
    justify-content: center;
}

#enemy-name{
    xborder:1px solid orange;
    font-size:1.7em;
    font-family: Georgia, serif;
    color:rgb(236, 187, 139);
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.99),
                 2px 2px 0px rgba(0, 0, 0, 0.99);
}

#enemy-type-container {
    xborder:1px solid orange;
    text-align: center;
    height:8%;
    padding:5px;
    display:flex;
}

#enemy-type-image {
    xborder: 1px solid rgb(0, 0, 0, 1);
    border-radius:50px;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0, 0.99);
    height:20px;
    aspect-ratio:1/1;
    xfilter: sepia(100%) contrast(200%) brightness(100%);
    filter: hue-rotate(70deg) brightness(80%);
    xfilter:  contrast(500%) brightness(50%);
}

#enemy-type {
    xborder:1px solid orange;
    margin-left:5px;
    font-size:1em;
    xfont-family: Georgia, serif;
    font-family: consolas, monospace;
    color:rgb(162, 128, 94);
    xcolor:rgb(173, 173, 173);
    
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.99),
                 2px 2px 0px rgba(0, 0, 0, 0.99);
    
   
}

#enemy-image-container {
    border:3px solid rgb(141, 91, 0);
    border-radius:4px;
    xtext-align: center;
    xwidth:100%;

    height:60%;
    xmax-width:70%;
    aspect-ratio: 1/1;
  

    display:flex;
    justify-content: center;
    margin-bottom:10px;
    will-change: transform;
}

#enemy-image-container > .damage-overlay {
    position:absolute;
    height:100%;
    aspect-ratio: 1/1;
    background-color:rgba(255, 255, 255, 0.1);
}


#enemy-image {
    border: 5px solid rgb(0, 0, 0);
    xposition:absolute;
    border-radius:5px;
    xborder-style: outset;

    xaspect-ratio: 1/1;
    width:100%;
    height:100%;

    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    ximage-rendering: pixelated;

    border-style: solid;
    background-color:black;
	border-image-source: url('../img/border_red.png');
	border-image-slice: 150;
	border-image-width: 3em;
	border-image-outset: 0;
	border-image-repeat: round;
    box-shadow: inset 0px 0px 10px 10px rgba(0,0,0, 0.99),
                5px 5px 5px 0px rgba(0, 0, 0, 0.5),
                0px 0px 10px 0px rgba(0, 0, 0, 0.8);
    
    xborder-radius:5em ;
}


#enemy-image-container.damaged {
    xfilter:brightness(1) saturate(1) contrast(0.7);
    xfilter:contrast(0.7);
    xfilter:brightness(0.6) saturate(1) contrast(0.8);
    transform: translateY(-5px);
}


#enemy-hp-bar-container {
    xborder:3px solid black;
    border:3px outset rgb(86, 56, 0);
    xborder:3px outset rgb(86, 36, 0);
    border-radius: 3px;
    position:relative;
    overflow:hidden;
    width: 80%;
    height: 2em;
    xmargin-top:10px;
    background-color:rgba(0, 0, 0, 0.99);
    box-shadow: 
        0px 0px 5px 5px rgba(0, 0, 0, 0.5), 
        3px 3px 3px 0px rgba(0, 0, 0, 0.5)
    ;


    xoutline: thick double #330000;
  
}

#enemy-hp-bar-container > .border-layer {
    xborder: 1px solid rgb(0, 0, 0);
    border-radius:3px;
    position:absolute;
    z-index:1;
    width:100%;
    height:100%;
    xborder-style: solid;
    xbackground-color:black;
    
    /*
	border-image-source: url('../img/border_red.png');
	border-image-slice: 150;
	border-image-width: 5em;
	border-image-outset: 5;
	border-image-repeat: stretch;
    */

    border-image-source: url('../img/border_grey.png');
	border-image-slice: 6;
	border-image-width: 6px;
	border-image-outset: 0;
	border-image-repeat: stretch;
    
    box-shadow: 
        inset 0px 0px 5px 5px rgba(0, 0, 0, 0.8),
        5px 5px 5px 0px rgba(0, 0, 0, 0.8),
        0px 0px 10px 0px rgba(0, 0, 0, 0.8)
    ;



    xbackground-image: linear-gradient(green,lightgreen);
          
}

#enemy-hp-bar-container > .border-layer:after{
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.1));
    xbox-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.99);
}


#enemy-hp-bar-container.damaged {
    xfilter:brightness(0.8);
    xtransform: translateX(-5px);
}

#enemy-hp-bar-container > .bar {
    position:absolute;
    width: 100%;
    height: 100%;
    transition: width 0.05s;
    will-change: width;
}

#enemy-hp-bar-container > .bar.main {
    background-color:rgb(118, 0, 0);
    background-color:rgb(90, 0, 0);
}

#enemy-hp-bar-container > .bar.bg {
    transition: width 0.3s;
    transition-timing-function: linear;
    xtransition-delay: 100ms;
    background-color:rgb(118, 110, 0);
}

#enemy-hp-bar-container > .hp-container {
    xborder:1px solid lime;
    position:absolute;
    width: 100%;
    height: 100%;

    font-family: consolas, monospace;
    color:rgb(196, 196, 196);

    font-size:0.9em;
    xfont-family: Georgia, serif;
	text-transform: uppercase;
    color:#ffffff;
    xtext-shadow: 0px 0px 10px orange, 0px 0px 5px rgb(160, 160, 160);
    text-shadow:1px 1px 2px rgba(0, 0, 0, 0.99);


    display:flex;
    flex-direction: row;
    align-items: center;
    xpadding-left:10px;
}

#enemy-hp-bar-container > .hp-container > .current {
    xborder:1px solid grey;
    width:50px;
    text-align: right;
}