.dialogue-box-cont {
    border-radius:5px;
    width:100%;
    height:100px;
    display:flex;
    align-items: start;
    justify-content: start;
    padding:10px 5px 10px 10px;
    font-family:Consolas, Monospace, 'Courier New';
    background-color:rgba(0, 0, 0, 0.99);
    box-shadow: 
        inset 0px 0px 3px 3px rgba(0, 0, 0, 0.5),
        0px 0px 5px 0px rgba(0, 0, 0, 0.6),
        5px 5px 5px 0px rgba(0, 0, 0, 0.3)
    ;
    overflow:hidden;

    background-color: #101215;
	background-image: repeating-linear-gradient(180deg, #0e0e0e, #0e0e0e 0.3em, #101215 0.3em, #101215 0.6em);

    border:5px double rgb(71, 71, 71);
    border-style: solid;
    border-image-source: url('../img/border.png');
    border-image-slice: 50;
    border-image-width: 1em 1em;
    border-image-outset: 0;
    border-image-repeat: stretch;
    background-color:rgb(24, 24, 31);

   
}

.dialogue-box-cont > .image-cont {
    height:100%;
    aspect-ratio: 1/1;
    display:flex;
    align-items: center;
    justify-content: center;
    margin-right:10px;
    border-radius:5px;
    position:relative;
}

.dialogue-box-cont > .image-cont > .layer {
    position:absolute;
    border-radius:3px;
    height:100%;
    width:100%;
    aspect-ratio: 1/1;
    opacity:1.0;
}

.dialogue-box-cont > .image-cont > .image.layer {
    filter:saturate(1) brightness(0.9) contrast(1) hue-rotate(310deg);
    mix-blend-mode: normal; /* normal hard-light multiply  difference */
    box-shadow: inset 0px 0px 10px 5px rgba(0, 0, 0, 0.6);
    background-image: url('https://i.imgur.com/1E3GP4A.png');
    /*https://i.imgur.com/mNeSH3x.png https://i.imgur.com/1E3GP4A.png https://i.imgur.com/F2wfEys.jpeg */
    background-position: 40% 30%;
    background-repeat: no-repeat;
    background-size: 140%;
    animation: glitch 2s linear infinite;
}

.dialogue-box-cont > .image-cont > .image.layer.thumbnail {
    background-image: url('https://i.imgur.com/6HjKw3U.jpeg');
}



.dialogue-box-cont > .image-cont > .layer.stripes {
    background-color: #101215;
	background-image: repeating-linear-gradient(180deg, #5b5b5b, #5b5b5b 2px, #ffffff 2px, #ffffff 4px);
    background-size: 100% 8px;
   

    background: linear-gradient(to top, #000000, #000000, #ffffff, #ffffff);
    background-size: cover;
    background-size: 100% 4px;

    filter:brightness(0.9);
    opacity:0.1;
    /* @keyframes duration | easing-function | delay | iteration-count | direction | fill-mode | play-state | name */
    animation: bg-move 10s linear 0s infinite;
}
@keyframes bg-move {
    0% {
        background-position: 0 0
	}
	100% {
        background-position: 0 100px
	}
}

   


.dialogue-box-cont > .text-cont {
    xborder:1px solid grey;
    height:100%;
    flex:1;
    xpadding:5px;
    display:flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}

.dialogue-box-cont > .text-cont > .name-cont {
    xborder:1px solid grey;
    position:relative;
    display:inline-flex;
    width:50%;

    height:30%;
    color:#00c867;
}

.dialogue-box-cont > .text-cont > .name-cont > .layer {
    xborder:1px solid grey;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;

}

.dialogue-box-cont > .text-cont > .name-cont > .normal.layer {
    text-shadow: 0px 0px 5px rgba(0, 255, 0, 1);
    opacity:0.9;
  
    xcolor: transparent;
}

.dialogue-box-cont > .text-cont > .name-cont > .glitch.layer {
   color: rgb(0, 255, 195);;
}

.dialogue-box-cont > .text-cont > .name-cont > .glitch.layer:nth-child(2) {
	transform: translateX(-2%);
	animation: glitch-anim-1 3s infinite linear alternate;
  
}
.dialogue-box-cont > .text-cont > .name-cont > .glitch.layer:nth-child(3) {
	transform: translateX(2%) translateY(2%);
	animation: glitch-anim-2 2.3s -.8s infinite linear alternate;
}
.dialogue-box-cont > .text-cont > .name-cont > .glitch.layer:nth-child(4) {
	transform: translateX(2%) ;
	animation: glitch-anim-flash 0.2s infinite linear;
}
.dialogue-box-cont > .text-cont > .name-cont > .glitch.layer:nth-child(5) {
	transform: translateX(-2%);
	animation: glitch-anim-1 1.2s 0.3s infinite linear alternate backwards;
}

.dialogue-box-cont > .text-cont > .text {
    xborder:1px solid grey;
    height:70%;
    width:100%;
    flex:1;
}