UI {
    position: absolute;
    width: 100%;
    height: 100%;
   
    background-color: rgba(52, 26, 199, 0);
    opacity: 0;

    .npc 
    {
        transition: opacity 0.5s ease-in-out;
      
        width: 100%;
        height: 100%;
        position: relative;
        
        flex-direction: column;

        .npc-name {
        position: relative;
      
        height: 15%;
        width: 25%;

        top: 60px;
        left: 110px;
        transform: translate(50%, 0%);
        color: white;
        font-size: 28px;
        font-weight: 600;
        font-family:Geneva;
        background-color: rgba(211, 0, 0, 0.801);
        text-shadow: 0px 3px 1px #000000;

        
      
        color: rgb(255, 255, 255);
        border-radius: 5px;
        justify-content: center;
        text-align: center;
        align-items: center;
       
        
        
        }
        .ability
        {
            position: relative;
            height:13%;
            width: 100%;
            top: 70px;
            left: 20%;
            justify-content: center;
            align-items: center;
       
            background-color: rgba(41, 175, 29, 0);
           


        
        
            .npc-ability 
            {
               
                position:relative;
                height: 70%;
                width: 4.5%;
                flex-direction: row;
                 flex-direction: column;
                bottom: 14%;
                left: -250%;
                color: rgb(255, 255, 255);
                text-shadow: 1px 2px 0px #000000;
               
                background-color: rgba(255, 136, 0, 0);
                font-size: 40px;
               
                background-image: url("/ui/textures/fire.png");
                background-position-x: 0%;
                background-position-y: 1%;
                background-size: contain;
                
                align-items: center;
                justify-content: center;
                background-size: cover;
            
                
                opacity: 0;
                border-radius: 100px;
                
                
        
                &.show {
                    opacity: 1;
                }
            }
            .npc-ability3
            {
               
                position:relative;
                height: 70%;
                width: 4.5%;
                flex-direction: row;
                 flex-direction: column;
                bottom: 14%;
                left: -250%;
                color: rgb(255, 255, 255);
                text-shadow: 1px 2px 0px #000000;
               
                background-color: rgba(255, 136, 0, 0);
                font-size: 40px;
               
                background-image: url("/ui/textures/snow.png");
                background-position-x: 0%;
                background-position-y: 1%;
                background-size: contain;
                
                align-items: center;
                justify-content: center;
                background-size: cover;
            
                
                opacity: 0;
                border-radius: 100px;
                
                
        
                &.show {
                    opacity: 1;
                }
            }
            .npc-ability4
            {
               
                position:relative;
                height: 70%;
                width: 4.5%;
                flex-direction: row;
                 flex-direction: column;
                bottom: 14%;
                left: -240%;
                color: rgb(131, 2, 2);
                text-shadow: 1px 2px 0px #000000;
                
                background-color: rgba(255, 255, 255, 0.685);
                font-size: 40px;
            
                background-image: url("/ui/textures/storm.png");
                background-position-x: -5%;
                background-position-y: -4%;
                background-size: cover;
                border-width: 1px;
                border-color: rgb(255, 255, 255);
                opacity: 10;
                align-items: center;
                justify-content: center;
                background-size: cover;
            
                
                opacity: 0;
                border-radius: 100px;
                
                
        
                &.show {
                    opacity: 1;
                }
                .dot {
                width: 10px;
                height: 10px;
                background-color: rgb(255, 255, 255);
                border-radius: 50%;
                margin: 5px;
                }
            }
            .npc-ability2
            {
               
                position: relative;
                    height: 70%;
                    width: 4.5%;
                    flex-direction: row;
                    flex-direction: column;
                    bottom:6%;
                    left: -360%;
                    color: rgb(255, 255, 255);
                    text-shadow: 1px 2px 0px #000000;
                
                    background-color: rgb(255, 255, 255);
                    font-size: 40px;
                
                    background-image: url("/ui/textures/run.png");
                    background-position-x: 0%;
                    background-position-y: 0%;
                    border-width: 1px;
                    border-color: rgb(0, 0, 0);
                    background-repeat: no-repeat;
                    background-size: contain;
                
                    align-items: center;
                    justify-content: center;
                    background-size: cover;
                
                
                    opacity: 0;
                    border-radius: 100px;
                    .debuff{
                        position: absolute;
                        width: 20px;
                        left: 3px;
                        top: 0px;
                        height: 20px;
                        background-color: rgba(255, 255, 255, 0);
                        border-radius: 50%;
                        margin: 5px;
                        background-image: url("/ui/textures/debuff.png");
                        background-position: center;
                        background-size: cover;
                        
                    }
                
        
                &.show {
                    opacity: 1;
                }
            }
                .npc-ability2_bleed
                {
                
                    position: relative;
                        height: 70%;
                        width: 4.5%;
                        flex-direction: row;
                        flex-direction: column;
                        bottom:6%;
                        left: -330%;
                        color: rgba(255, 255, 255, 0.363);
                        text-shadow: 1px 2px 0px #000000;
                    
                        background-color: rgba(255, 255, 255, 0);
                        font-size: 40px;
                    
                        background-image: url("/ui/textures/sword.png");
                        background-position-x: 0%;
                        background-position-y: 0%;
                        
                        border-color: rgb(0, 0, 0);
                        background-repeat: no-repeat;
                        background-size: contain;
                    
                        align-items: center;
                        justify-content: center;
                        background-size: cover;
                    
                    
                        opacity: 0;
                        
                        .debuff{
                            position: absolute;
                            width: 15px;
                            left: -3.5px;
                            top: 3px;
                            height: 15px;
                            background-color: rgba(255, 255, 255, 0);
                            border-radius: 50%;
                            margin: 5px;
                            background-image: url("/ui/textures/blood.png");
                            background-position: center;
                            background-size: cover;
                            
                        }
                    
            
                    &.show {
                        opacity: 1;
                    }
                }
        }
        
        
        
    }

    

        .npc-level {
            position: relative;
            height: 25%;
            width: 25%;
            left: 40.5%;
            top: 13.9%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: bold;
            color: rgb(255, 255, 255);
            text-shadow: 1px 2px 0px black;
            border-radius: 50%;
            background-color: rgb(0, 4, 255);
            border: 2px solid white;
            z-index: 100;
            .n{
              
                
            }
          
    
            &.level-1 {
               
                font-size: 16px;
                width: 90px;
                height: 20px;
                border-bottom-width: 0px;
                background-color: #1a1a1a;
                border: 2px solid #ffffff;
                
            }
    
            &.level-5 {
            font-size: 16px;
                width: 90px;
                height: 20px;
                border-bottom-width: 0px;
                background-color: #000000;
                border: 2px solid #ffcc00;
            }
    
            &.level-10 {
                font-size: 16px;
                    width: 90px;
                    height: 20px;
                    border-bottom-width: 0px;
                background-color: #746200;
                border: 2px solid #ff9900;
            }
    
            &.level-15 {
                font-size: 16px;
                    width: 90px;
                    height: 20px;
                    border-bottom-width: 0px;
                background-color: #3441b6;
                border: 2px solid #ff6600;
            }
    
            &.level-20 {
                font-size: 16px;
                    width: 90px;
                    height: 20px;
                    border-bottom-width: 0px;
                background-color: #2871b6;
                border: 2px solid #ff3300;
            }
    
            &.level-25 {
                font-size: 16px;
                    width: 90px;
                    height: 20px;
                    border-bottom-width: 0px;
                background-color: #1c85a5;
                border: 2px solid #ff0000;
            }
    
            &.level-30 {
                font-size: 16px;
                    width: 90px;
                    height: 20px;
                    border-bottom-width: 0px;
                background-color: #13a500;
                border: 2px solid #cc0000;
            }
    
            &.level-35 {
            font-size: 16px;
                width: 90px;
                height: 20px;
                border-bottom-width: 0px;
                background-color: #74a501;
                border: 2px solid #990000;
            }
    
            &.level-40 {
        font-size: 16px;
            width: 90px;
            height: 20px;
            border-bottom-width: 0px;
                background-color: #310072;
                border: 2px solid #660000;
            }
    
            &.level-45 {
            font-size: 16px;
                width: 90px;
                height: 20px;
                border-bottom-width: 0px;
                background-color: #6100a1;
                border: 2px solid #330000;
            }
            &.level-50 {
            font-size: 16px;
                width: 90px;
                height: 20px;
                border-bottom-width: 0px;
                background-color: #b90038;
                border: 2px solid #000000;
            }
            &.level-55 {
        font-size: 16px;
            width: 90px;
            height: 20px;
            border-bottom-width: 0px;
                background-color: #a59a00;
                border: 2px solid #000000;
            }
            &.level-60 {
                font-size: 16px;
                    width: 90px;
                    height: 20px;
                    border-bottom-width: 0px;
                background-color: #ce0000;
                border: 2px solid #000000;
            }
            &.level-65 {
            font-size: 16px;
                width: 90px;
                height: 20px;
                border-bottom-width: 0px;
                background-color: #1a9b00;
                border: 2px solid #000000;
            }
            &.level-70 {
                font-size: 16px;
                    width: 90px;
                    height: 20px;
                    border-bottom-width: 0px;
                background-color: #00e0bb;
                border: 2px solid #000000;
            }
            &.level-75 {
            font-size: 16px;
                width: 90px;
                height: 20px;
                border-bottom-width: 0px;
                background-color: #250030;
                border: 2px solid #000000;
            }
            &.level-80 {
                font-size: 16px;
                    width: 90px;
                    height: 20px;
                    border-bottom-width: 0px;
                background-color: #794400;
                border: 2px solid #000000;
            }
            &.level-85 {
                font-size: 16px;
                    width: 90px;
                    height: 20px;
                    border-bottom-width: 0px;
                background-color: #000000;
                border: 2px solid #000000;
            }
            &.level-90 {
                font-size: 16px;
                    width: 90px;
                    height: 20px;
                    border-bottom-width: 0px;
                background-color: #aa68ff;
                border: 2px solid #000000;
            }
            &.level-95 {
            font-size: 16px;
                width: 90px;
                height: 20px;
                border-bottom-width: 0px;
                background-color: #00aa63;
                border: 2px solid #000000;
            }
            &.level-100 {
                font-size: 16px;
                    width: 90px;
                    height: 20px;
                    border-bottom-width: 0px;
                    color:black;
                    text-shadow: 1px 2px 0px white;
                background-color: #ffffff;
                border: 2px solid #000000;
            }
        }
    

    .zombie-healthbar-container {
        position: relative;
        width: 100%;
        height: 25%;
        top: 5px;
        left: 0px;
        z-index: 0;
        opacity: 0;
        justify-content: center;
        align-items: center;
        
        transition: opacity 0.5s ease-in-out;
        
        &.show {
            opacity: 1;
        }

       .npc-health {
        width: 20%;
        flex-direction: column;
        align-items: center;
        font-size: 19px;
        background-color: rgba(0, 0, 0, 0.479); 
        color: white;
        text-shadow: 1px 2px 0px #000000;
        border-radius: 5px;
        justify-content: center;
        align-items: center;
        font-family: Geneva;
        font-weight: 1500;
        

        &.high-health {
            background: linear-gradient(to right, green, yellow);
        }

        &.medium-health {
            background: linear-gradient(to right, yellow, orange);
        }

        &.low-health {
            background: linear-gradient(to right, orange, red);
        }

        &.critical-health {
            background: linear-gradient(to right, red, darkred);
        }
        }

        .zombie-healthbar {
            position: relative;
            background-color: rgba(0, 0, 255, 0);
            width: 200px;
            height: 26px;
            bottom: 0px;
            left: 4%;
            top: 25%;
            transform: translate(10%, 0%);
            background-size: 100%;
            padding: 5px;
            
            

            .inner {
                flex-grow: 10;
                

                .fill {
                    
                    
                    
                }
            }
        }

        .zombie-backbar {
            position: absolute;
            z-index: 0;
            background-color: rgba(0, 0, 255, 0);
            width: 200px;
            height: 26px;
            bottom: 0px;
            left: 31%;
            top: 50%;
            background-blend-mode: multiply;
            background-size: 100%;
            padding: 5px;
                transform: translate(15%, 0%);
            border-radius: 100px;
            border: 1px solid rgba(238, 238, 238, 0);
            
            

            .inner {
                flex-grow: 10;

                .fill {
                    background-color: rgb(255, 0, 0);
                    height: 100%;
                    border-right: 1px solid rgb(255, 255, 255);
                    border-right-width: -11px;
                    border: 4px rgba(0, 0, 0, 0.521);
                    border-top-right-radius: -20px -50px;
                    border-top-width: 3px;
                    border-top-color: rgba(255, 255, 255, 0.219);
                    border-bottom-right-radius: 50px;
                    border-bottom-width: 1px;
                    
                }
            }
        }

        >p {
            position: absolute;
            
            color: rgb(255, 255, 255);
            text-shadow: 2px 0px 0px #000000;
            bottom: 20px;
        
            font-size: 16px;
          
            font-family: Geneva;
            font-weight: 1500;
            transition: opacity 0.5s ease-in-out;
            opacity: 1;
            flex-direction: column;
          
        
            
            
            

            
        }
    }
}