.colorwall{
background-color:#333333;
width:41px;
height:41px;
border:none;
position:absolute;
}

.colorwall.bordered{
width:31px;
height:31px;
border-width: 5px;
border-color: #00000044;
border-style: solid;
position:absolute;
}

.movingwall {
    background-color: #575757;
    width: 31px;
    height: 31px;
    border-width: 5px;
    border-color: #1f1f1f;
    border-style: solid;
    position: absolute;
    z-index:1;
}
.wall{
background-color: grey;
width:31px;
height:31px;
border-width: 5px;
border-color: #000;
border-style: solid;
position:absolute;
}
.wall.dfs {
box-shadow:inset 0 0 0 3px #6ea4b8;
}

.wall.dfs.up {
border-top-color: #6ea4b8;
}
.wall.dfs.down {
border-bottom-color: #6ea4b8;
}
.wall.dfs.left {
border-left-color: #6ea4b8;
}
.wall.dfs.right {
border-right-color: #6ea4b8;
}

.wall.dfs.lavadfs {
box-shadow:inset 0 0 0 3px #ff9a00;
}

.wall.dfs.lavadfs.up {
border-top-color: #ff9a00;
}
.wall.dfs.lavadfs.down {
border-bottom-color: #ff9a00;
}
.wall.dfs.lavadfs.left {
border-left-color: #ff9a00;
}
.wall.dfs.lavadfs.right {
border-right-color: #ff9a00;
}



.wall.spawnwall {
    background: url(assets/spawnwall.png);
    transform: rotate(90deg);
    image-rendering: pixelated;
    width: 41px;
    height: 41px;
    border: none;
    position: absolute;
}


.voidout{
background-color: transparent;
width:31px;
height:31px;
border-width: 5px;
border-color: transparent;
border-style: solid;
position:absolute;
}

.border{
    background-color: black;
    height: 40px;
    width: 40px;
    box-shadow: 0 0 0 10px black;
    position: absolute;
    z-index: -1;
}

.lightheal {
    background-color: #FFFFFF88;
    width: 73px;
    height: 73px;
    border-width: 5px;
    border-color: #000;
    border-style: solid;
    position: absolute;
    translate: -21px -21px;
    animation-timing-function: step-end;
    animation-name:lightheal;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    z-index: 4;
}

@keyframes lightheal {
0% {
    background-color: #FFFFFF22;
}
25% {
    background-color: #FFFFFF27;
}
50% {
    background-color: #FFFFFF32;
}
75% {
    background-color: #FFFFFF27;
}
100% {
    background-color: #FFFFFF22;
}
}


.lightheal {
    background-color: #FFFFFF88;
    width: 73px;
    height: 73px;
    border-width: 5px;
    border-color: #000;
    border-style: solid;
    position: absolute;
    translate: -21px -21px;
    animation-timing-function: step-end;
    animation-name:lightheal;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    z-index: 4;
}

@keyframes lightheal {
0% {
    background-color: #FFFFFF22;
}
25% {
    background-color: #FFFFFF27;
}
50% {
    background-color: #FFFFFF32;
}
75% {
    background-color: #FFFFFF27;
}
100% {
    background-color: #FFFFFF22;
}
}


.lightheal.gold {
    background-color: #FFFF0088;
    animation-name:goldheal;
    z-index: 6;
}

@keyframes goldheal {
0% {
    background-color: #FFFF0022;
}
25% {
    background-color: #FFFF0027;
}
50% {
    background-color: #FFFF0032;
}
75% {
    background-color: #FFFF0027;
}
100% {
    background-color: #FFFF0022;
}
}

.web {
    width: 83px;
    height: 83px;
    position: absolute;
    transform: translate(-20px, -20px);
    background: url(assets/web/web1.png);
    image-rendering: pixelated;
}



.healing{background-color: grey;height: 15px;width: 15px;border-width: 5px;border-color: #000;border-style: solid;position:absolute;translate: 8px 8px;}
.healing:before {content:"";width: 14.5px;height: 14.5px;rotate: 45deg;position: absolute;background-color:grey;}

.healing.ty1{background-color: cyan;}
.healing.ty1:before {background-color: #ddffff;}

.healing.ty2{background-color: red;}
.healing.ty2:before {background-color: #ff6666;}

.healing.ty3{background-color: gold;}
.healing.ty3:before {background-color: #ffe55c;}




.bullet{background-color: grey;height: 5px;width: 5px;border-width: 5px;border-color: #000;border-style: solid;position:absolute;translate: 13px 13px;z-index:4;}
.bullet:before {content:"";width: 5px;height: 5px;rotate: 45deg;position: absolute;background-color:grey;}

.bullet.ty1{background-color: #7a4879;}
.bullet.ty1:before {background-color: #9e5e9d;}

.bullet.ty1.lavabullet{background-color: #ffa500;}
.bullet.ty1.lavabullet:before {background-color: #ffa850;}

.bullet.ty1.icebullet{background-color: #02f5d9;}
.bullet.ty1.icebullet:before {background-color: #54fcff;}

.bulletshadow{opacity:0.2;color:white;background-color: white;height: 5px;width: 5px;border-width: 5px;border-color: white;border-style: solid;position:absolute;translate: 13px 13px;z-index:4;}
.bulletshadow {opacity:0.2;content:"";width: 5px;height: 5px;rotate: 45deg;position: absolute;background-color:white;}

.bulletshadow.lightbulletshadow{opacity:0.5;color:white;background-color: white;border-color: white;}
.bulletshadow.darkbulletshadow{opacity:0.5;color:#880643;background-color:#880643;border-color:#880643;}



.lightammo{background-color: grey;height: 15px;width: 15px;border-width: 5px;border-color: #000;border-style: solid;position:absolute;translate: 8px 8px;animation: lightammobefore 1s linear infinite;}
.lightammo:before {content:"";width: 14.5px;height: 14.5px;rotate: -45deg;transform: skew(10deg, 10deg);position: absolute;background-color:grey;animation: lightammobefore 1.25s linear infinite;}


.lightammo.ty1{animation: lightammobefore 4s linear infinite; scale: 0.8;}
.lightammo.ty1:before {animation: lightammobefore 4s linear infinite;}

.lightammo.ty2{animation: lightammobefore 1.75s linear infinite;scale: 0.9;}
.lightammo.ty2:before {animation: lightammobefore 1.75s linear infinite;}

.lightammo.ty3{animation: lightammobefore 0.75s linear infinite;scale: 1.1;}
.lightammo.ty3:before {animation: lightammobefore 0.75s linear infinite;}

.shardammo {
    background-color: cyan;
    height: 5px;
    width: 5px;
    border: none;
    position: absolute;
    transform: translate(18px, 10px);
    box-shadow: 1px 0 0 0px cyan, -1px 0px 0 0px cyan, 0 -3px 0 0px cyan, 2px 4px 0 0px cyan, -2px 4px 0 0px cyan, 3px 6px 0 0px cyan, -3px 6px 0 0px cyan, 0 8px 0 0px cyan, -2px 12px 0 0px cyan, 2px 12px 0 0px cyan, -4px 15px 0 0px cyan, 4px 15px 0 0px cyan;
}

@keyframes lightammobefore {
    0% {
    background:white;
    }
    25% {
    background:#ffd0d0;
    }
    50% {
    background:#ffffcb;
    }
    75% {
    background:#cacaff;
    }
    100% {
    background:white;
    }
}




.darkammo{background-color: grey;height: 15px;width: 15px;border-width: 5px;border-color: #000;border-style: solid;position:absolute;translate: 8px 8px;animation: darkammobefore 1s linear infinite;}
.darkammo:before {content:"";width: 14.5px;height: 14.5px;rotate: -45deg;transform: skew(10deg, 10deg);position: absolute;background-color:grey;animation: darkammobefore 1.25s linear infinite;}


.darkammo.ty1{animation: darkammobefore 4s linear infinite; scale: 0.8;}
.darkammo.ty1:before {animation: darkammobefore 4s linear infinite;}

.darkammo.ty2{animation: darkammobefore 1.75s linear infinite;scale: 0.9;}
.darkammo.ty2:before {animation: darkammobefore 1.75s linear infinite;}

.darkammo.ty3{animation: darkammobefore 0.75s linear infinite;scale: 1.1;}
.darkammo.ty3:before {animation: darkammobefore 0.75s linear infinite;}

@keyframes darkammobefore {
    0% {
    background:#541b36;
    }
    25% {
    background:#541b3f;
    }
    50% {
    background:#541b54;
    }
    75% {
    background:#541b3f;
    }
    100% {
    background:#541b36;
    }
}




.lightheal:before {
    content: "";
    background-color: grey;
    width: 6px;
    height: 6px;
    border-width: 5px;
    border-color: #000;
    border-style: solid;
    position: absolute;
    left: 30px;
    top: 30px;
    animation-name: lighthealit;
    animation-timing-function: step-end;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    z-index: 4;
}

@keyframes lighthealit {
0% {
    background-color: #AAAAAA;
}
25% {
    background-color: #CCCCCC;
}
50% {
    background-color: #FFFFFF;
}
75% {
    background-color: #CCCCCC;
}
100% {
    background-color: #AAAAAA;
}
}

.wall.woodA{
background-color: #674c29;
}
.wall.woodB{
background-color: #5e4c39;
}
.wall.exType{
background-color: #969061;
z-index:3;
}
.wall.magma{
background-color: #4e3333;
}
.iwall{
background-color: transparent;
width:31px;
height:31px;
border-width: 5px;
border-color: transparent;
border-style: solid;
position:absolute;
}
.carpet {
background-color: #c44356;
width:31px;
height:31px;
border-width: 5px;
border-color: #000;
border-style: solid;
position:absolute;
}
.carpet.red {
background-color: #AA0000;
}
.carpet.blue {
background-color: #5555FF;
}
.carpet.yellow {
background-color: #FFFF55;
}
.carpet.green {
background-color: #55FF55;
}
.carpet.purple {
background-color: #AA00AA;
}

.carpet.up {
border-top-color: transparent;
}
.carpet.down {
border-bottom-color: transparent;
}
.carpet.left {
border-left-color: transparent;
}
.carpet.right {
border-right-color: transparent;
}
.torch{
background-color: transparent;
width:31px;
height:31px;
border-width: 5px;
border-color: transparent;
border-style: solid;
position:absolute;
z-index: 1;
}
.torch img{
transform: translate(-5px,-5px);
pointer-events: none;
image-rendering: pixelated;
}
.slider-i{
background-color: transparent;
width:31px;
height:31px;
border-width: 5px;
border-color: transparent;
border-style: solid;
position:absolute;
z-index: 0;
}
.slider-i img{
transform: translate(-5px,-5px);
pointer-events: none;
image-rendering: pixelated;
}

.slider-i >img.right {
rotate:0deg
}

.slider-i >img.bottom,.slider-i >img.down {
rotate:90deg;
translate: -10px;
}

.slider-i >img.left {
rotate:180deg;
translate: -10px -10px;
}

.slider-i >img.top,.slider-i >img.up {
rotate:-90deg;
translate: 0 -10px;
}

.bench{
background-color: transparent;
width:31px;
height:31px;
border-width: 5px;
border-color: transparent;
border-style: solid;
position:absolute;
z-index:2;
}
.bench>img{
transform: translate(-5px,-5px);
pointer-events: none;
image-rendering: pixelated;
position:absolute;
}

.bench>img:nth-child(2) {
    transform: translate(-5px,-23px);
    pointer-events: none;
    image-rendering: pixelated;
    transition: opacity 0.75s, transform 0.75s;
    position: fixed;
	 z-index:3;
}

.bench>img.hide:nth-child(2) {
    transform: translate(-5px,-5px);
    opacity: 0;
}

.health-block-i {
    background-color: transparent;
    width: 41px!important;
    height: 41px!important;
    background: url(assets/healthblock.png);
    border-style: none!important;
    border: none;
    position: absolute;
    z-index: 1;
	image-rendering:pixelated;
}
.health-block-i>img{
transform: translate(-5px,-5px);
pointer-events: none;
image-rendering: pixelated;
position:absolute;
}
.health-block-i>img.zImg{
transform: translate(1px,-23px)!important;
}

.health-block-i>img.zImg.hide{
transform: translate(1px,-5px)!important;
}

.health-block-i>img:nth-child(2) {
    transform: translate(-5px,-23px);
    pointer-events: none;
    image-rendering: pixelated;
    transition: opacity 0.75s, transform 0.75s;
    position: fixed;
	 z-index:3;
}

.health-block-i>img.hide:nth-child(2) {
    transform: translate(-5px,-5px);
    opacity: 0;
}




.dark-armor-i{
background-color: transparent;
width:31px;
height:31px;
border-width: 5px;
border-color: transparent;
border-style: solid;
position:absolute;
z-index: 1;
}
.dark-armor-i>img{
transform: translate(-5px,-5px);
pointer-events: none;
image-rendering: pixelated;
position:absolute;
}
/*
.dark-armor-i>img:nth-child(2) {
    transform: translate(-5px,-23px);
    pointer-events: none;
    image-rendering: pixelated;
    transition: opacity 0.75s, transform 0.75s;
    position: fixed;
	 z-index:3;
}

.dark-armor-i>img.hide:nth-child(2) {
    transform: translate(-5px,-5px);
    opacity: 0;
}*/


.imageitem{
background-color: transparent;
width:31px;
height:31px;
border-width: 5px;
border-color: transparent;
border-style: solid;
position:absolute;
z-index: 1;
}
.imageitem>img{
transform: translate(-5px,-5px);
pointer-events: none;
image-rendering: pixelated;
position:absolute;
}


.dashcape{
background-color: transparent;
width:31px;
height:31px;
border-width: 5px;
border-color: transparent;
border-style: solid;
position:absolute;
}

.icecape{
background-color: transparent;
width:31px;
height:31px;
border-width: 5px;
border-color: transparent;
border-style: solid;
position:absolute;
}


.watercape{
background-color: transparent;
width:31px;
height:31px;
border-width: 5px;
border-color: transparent;
border-style: solid;
position:absolute;
}


.sharpcape{
background-color: transparent;
width:31px;
height:31px;
border-width: 5px;
border-color: transparent;
border-style: solid;
position:absolute;
}

.firecape{
background-color: transparent;
width:31px;
height:31px;
border-width: 5px;
border-color: transparent;
border-style: solid;
position:absolute;
}


.snowywall{
background-color: #9b9b9b;
width:31px;
height:31px;
border-width: 5px;
border-color: #000;
border-style: solid;
position:absolute;
}
.key-cape{
background-color: #bdb000;
width:31px;
height:31px;
border-width: 5px;
border-color: #988e01;
border-style: solid;
position:absolute;
}
.key-cape-block{
background-color: #bdb000;
width:31px;
height:31px;
border-width: 5px;
border-color: #000;
border-style: solid;
position:absolute;
}
.key-cape>img {
    transform: translate(-5px,-23px);
    pointer-events: none;
    image-rendering: pixelated;
    transition: opacity 0.75s, transform 0.75s;
    position: fixed;
	 z-index:3;
}
.key-cape>img.hide {
    transform: translate(-5px,-5px);
    opacity: 0;
}

.key-drift{
background-color: #26f1ff;
width:31px;
height:31px;
border-width: 5px;
border-color: #23dbe8;
border-style: solid;
position:absolute;
}
.key-drift-block{
background-color: #26f1ff;
width:31px;
height:31px;
border-width: 5px;
border-color: #000;
border-style: solid;
position:absolute;
}
.key-drift>img {
    transform: translate(-5px,-23px);
    pointer-events: none;
    image-rendering: pixelated;
    transition: opacity 0.75s, transform 0.75s;
    position: fixed;
	 z-index:3;
}
.key-drift>img.hide {
    transform: translate(-5px,-5px);
    opacity: 0;
}
.key-wild{
background-color: #eda540;
width:31px;
height:31px;
border-width: 5px;
border-color: #db9a3d;
border-style: solid;
position:absolute;
}
.key-wild-block{
background-color: #eda540;
width:31px;
height:31px;
border-width: 5px;
border-color: #000;
border-style: solid;
position:absolute;
}
.key-wild>img {
    transform: translate(-5px,-23px);
    pointer-events: none;
    image-rendering: pixelated;
    transition: opacity 0.75s, transform 0.75s;
    position: fixed;
	 z-index:3;
}
.key-wild>img.hide {
    transform: translate(-5px,-5px);
    opacity: 0;
}
.key-pool{
background-color: #626fe3;
width:31px;
height:31px;
border-width: 5px;
border-color: #505bba;
border-style: solid;
position:absolute;
}
.key-pool-block{
background-color: #626fe3;
width:31px;
height:31px;
border-width: 5px;
border-color: #000;
border-style: solid;
position:absolute;
}
.key-pool>img {
    transform: translate(-5px,-23px);
    pointer-events: none;
    image-rendering: pixelated;
    transition: opacity 0.75s, transform 0.75s;
    position: fixed;
	 z-index:3;
}
.key-pool>img.hide {
    transform: translate(-5px,-5px);
    opacity: 0;
}

.key-acid{
background-color: #58754d;
width:31px;
height:31px;
border-width: 5px;
border-color: #475e3e;
border-style: solid;
position:absolute;
}
.key-acid-block{
background-color: #646e60;
width:31px;
height:31px;
border-width: 5px;
border-color: #000;
border-style: solid;
position:absolute;
}
.key-acid-block.actived {
background-color: #31f738;
}
.key-acid>img {
    transform: translate(-5px,-23px);
    pointer-events: none;
    image-rendering: pixelated;
    transition: opacity 0.75s, transform 0.75s;
    position: fixed;
	 z-index:3;
}
.key-acid>img.hide {
    transform: translate(-5px,-5px);
    opacity: 0;
}


.key-dark{
background-color: #6c1c49;
width:31px;
height:31px;
border-width: 5px;
border-color: #381f2d;
border-style: solid;
position:absolute;
}
.key-dark>img {
    transform: translate(-5px,-23px);
    pointer-events: none;
    image-rendering: pixelated;
    transition: opacity 0.75s, transform 0.75s;
    position: fixed;
	 z-index:3;
}
.key-dark>img.hide {
    transform: translate(-5px,-5px);
    opacity: 0;
}







.deathwall{
background-color: #222;
width:31px;
height:31px;
border-width: 5px;
border-color: #000;
border-style: solid;
position:absolute;
z-index:1;
}
.deathwall.void:before{
    content: "";
    display: block;
    background-color: black;
    width: 30px;
    height: 30px;
    transform: rotate(45deg) translate(-4px, 0px) scale(0.6);
    border-style: dashed;
}
.switch{
background-color: #ff0000;
width:31px;
height:31px;
border-width: 5px;
border-color: #dd0000;
border-style: solid;
position:absolute;
}
.water{
background-color: #1212af;
height: 41px;
width: 41px;
border-style: none;
position: absolute;
z-index: -2;
}
.freezewater{
background-color: #19c3ff;
height: 41px;
width: 41px;
border-style: none;
position: absolute;
z-index: -2;
}
.poison{
background-color: purple;
height: 41px;
width: 41px;
border-style: none;
position:absolute;
z-index:-2;
}
.acid{
background-color: green;
height: 41px;
width: 41px;
border-style: none;
position:absolute;
z-index:-2;
}
.lava{
background-color: orange;
height: 41px;
width: 41px;
border-style: none;
position:absolute;
z-index:-2;
animation-timing-function: step-end;
animation-name:lava;
animation-iteration-count: infinite;
animation-duration: 1s;
}

.lava.texture1{
animation-delay: -0.8s;
}
.lava.texture2{
animation-delay: -0.6s;
}
.lava.texture3{
animation-delay: -0.4s;
}
.lava.texture4{
animation-delay: -0.2s;
}
.lava.texture5{
animation-delay: 0s;
}

@keyframes lava {
0% {
    background-color: #ffa500;
}
25% {
    background-color: #ff9a00;
}
50% {
    background-color: #ff9000;
}
75% {
    background-color: #ff9a00;
}
100% {
    background-color: #ffa500;
}
}








.display {
z-index:0;
}





.tile{
background-color: yellow;
width:31px;
height:31px;
border-width: 5px;
border-color: #adad23;
border-style: solid;
position:absolute;
}
.tile.a{
background-color: #18d918;
width:31px;
height:31px;
border-width: 5px;
border-color: #0f860f;
border-style: solid;
position:absolute;
}
.tile.b{
background-color: red;
width:31px;
height:31px;
border-width: 5px;
border-color: #7c0202;
border-style: solid;
position:absolute;
}
.tile>img {
    transform: translate(-5px,-23px);
    pointer-events: none;
    image-rendering: pixelated;
    transition: opacity 0.75s, transform 0.75s;
    position: fixed;
	 z-index:3;
}
.tile>img.hide {
    transform: translate(-5px,-5px);
    opacity: 0;
}
.enemy.darkplayer {
background-color: #960096;
border-color: #000;
width: 25px;
height: 25px;
transform: translate(3px, 3px);
}
.enemy{
background-color: purple;
width:31px;
height:31px;
border-width: 5px;
border-color: white;
border-style: solid;
position:absolute;
z-index:1;
}


.enemy.statedamaged1 {
filter: sepia(0.25);
}
.enemy.statedamaged2 {
filter: sepia(0.75);
}



.enemy.hitted {
filter: grayscale(100) contrast(0) brightness(100)!important;
}

.enemy.door {
    width: 41px;
    height: 41px;
    border: none;
    background-color: transparent;
    background-image: url("assets/door/doorclosedstate.png");
    image-rendering: pixelated;
}
.enemy.door.opening {
    background-image: url("assets/door/dooropeningstate.png");
}
.enemy.door.open {
    background-image: url("assets/door/dooropenstate.png");
}
.enemy.door.left {transform: rotate(180deg);}
.enemy.door.up,.enemy.door.top {transform: rotate(-90deg);}
.enemy.door.down,.enemy.door.bottom {transform: rotate(90deg);}

.enemy.door.hitted {
filter:none!important;
}
.enemy.door.disabled {
filter:grayscale(1)!important;
}

.enemy.reference1{
background-color: purple;
width:31px;
height:31px;
border-width: 5px;
border-color: yellow;
border-style: solid;
position:absolute;
}

.enemy.reference2{
background-color: red;
width:31px;
height:31px;
border-width: 5px;
border-color: yellow;
border-style: solid;
position:absolute;
}
.enemy.reference3 {
background-color: red;
width: 25px;
height: 25px;
border-width: 5px;
border-color: #180000;
border-style: solid;
position: absolute;
transform: translate(3px, 3px);
}
.enemy.block{
background-color: #c53f3f;
width:31px;
height:31px;
border-width: 5px;
border-color: #000;
border-style: solid;
position:absolute;
}

.enemy.block.wall{
background-color: grey!important;
width:31px;
height:31px;
border-width: 5px;
border-color: #000;
border-style: solid;
position:absolute;
}

.enemy.block.wall.spawnwall{
    background: url(assets/spawnwall.png);
    transform: rotate(90deg);
    image-rendering: pixelated;
    width: 41px!important;
    height: 41px!important;
    border: none;
    border-style: unset!important;
    border-width: 0!important;
    position: absolute;
}


.enemy.block.light{
background-color: #ffc5c5;
width:31px;
height:31px;
border-width: 5px;
border-color: #000;
border-style: solid;
position:absolute;
}

.enemy.block.dark{
background-color: #5c0621;
width:31px;
height:31px;
border-width: 5px;
border-color: #000;
border-style: solid;
position:absolute;
}

.enemy.block.annihilator{
background:radial-gradient(circle, rgba(255,216,138,1) 0%, rgba(0,0,0,1) 50%, rgba(255,255,255,1) 100%);
width:31px;
height:31px;
border-width: 5px;
border-color: #000;
border-style: solid;
position:absolute;
}

.enemy.block.shard{
background-color: #49aab6;
width:31px;
height:31px;
border-width: 5px;
border-color: #000;
border-style: solid;
position:absolute;
}



.enemy.minion {
background-color: #ea005b;
border-color: white;
z-index: 1;
}
.enemy.minion2 {
background-color: #00ae81;
border-color: white;
z-index: 1;
}
.malhead {
    background-color: transparent;
    width: 31px;
    height: 31px;
    border-radius: 17.5px;
    border-width: 5px;
    border-color: transparent;
    border-style: solid;
    position: absolute;
    z-index:3;
}
.maldesign {
    background-color: #d6a13e;
    width: 31px;
    height: 31px;
    border-radius: 17.5px;
    border-width: 5px;
    border-color: #000;
    border-style: solid;
    position: absolute;
    z-index:3;
    top:-4px;
    left:-4px;
}
.malbody.idle>.malleg {
    animation-duration: 0s;
}
.maldesign.idle{animation-name:tired;animation-duration: 1.2s;animation-iteration-count: infinite;}
@keyframes tired {
    0% {
        translate: 1.5px 0;
    }
    12.5% {
        translate: 1px 1px;
    }
    25% {
        translate: 0 1.5px;
    }
    37.5 {
        translate: -1px 1px;
    }
    50% {
        translate: -1.5px 0;
    }
    62.5% {
        translate: -1px -1px;
    }
    75% {
        translate: 0 -1.5px;
    }
    87.5% {
        translate: 1px -1px;
    }
    100% {
        translate: 0 0;
    }
}
.malleg {
    width: 80px;
    height: 5px;
    background-color: #222;
    position: absolute;
    box-shadow: 0 0 0 2px #000;
    top: 5px;
}
.malbody {
    height: 31px;
    position: absolute;
    width: 31px;
    border-width: 5px;
}
.malleg {
    width: 80px;
    height: 5px;
    background-color: #222;
    position: absolute;
    box-shadow: 0 0 0 2px #000;
    top: 5px;
}
.malleg:nth-child(1){animation-delay:0s;animation-duration: 0.75s;animation-name:leg1;animation-iteration-count: infinite;top: 3px;}
.malleg:nth-child(2){animation-delay:0.25s;animation-duration: 0.75s;animation-name:leg2;animation-iteration-count: infinite;top: 2px;}
.malleg:nth-child(3){animation-delay:0.5s;animation-duration: 0.75s;animation-name:leg3;animation-iteration-count: infinite;top: 3px;}
.malleg:nth-child(4){background-color:yellow;animation-delay: 0.75s;animation-duration: 0.75s;animation-name:leg4;animation-iteration-count: infinite;}
@keyframes leg1 {
0% {transform: translate(35px, 10px) rotate(0deg);}
25% {transform: translate(30px, 20px) rotate(20deg);}
50% {transform: translate(32px, 0px) rotate(-20deg);}
75% {transform: translate(35px, 10px) rotate(0deg);}
100% {transform: translate(35px, 10px) rotate(0deg);}
}
@keyframes leg2 {
0% {transform: translate(-15px, 35px) rotate(90deg) translate(35px, 10px) rotate(0deg);}
25% {transform: translate(-15px, 35px) rotate(90deg) translate(30px, 20px) rotate(20deg);}
50% {transform: translate(-15px, 35px) rotate(90deg) translate(32px, 0px) rotate(-20deg);}
75% {transform: translate(-15px, 35px) rotate(90deg) translate(35px, 10px) rotate(0deg);}
100% {transform: translate(-15px, 35px) rotate(90deg) translate(35px, 10px) rotate(0deg);}
}
@keyframes leg3 {
0% {transform: translate(-49px, 20px) rotate(180deg) translate(35px, 10px) rotate(0deg);}
25% {transform: translate(-49px, 20px) rotate(180deg) translate(30px, 20px) rotate(20deg);}
50% {transform: translate(-49px, 20px) rotate(180deg) translate(32px, 0px) rotate(-20deg);}
75% {transform: translate(-49px, 20px) rotate(180deg) translate(35px, 10px) rotate(0deg);}
100% {transform: translate(-49px, 20px) rotate(180deg) translate(35px, 10px) rotate(0deg);}
}
@keyframes leg4 {
0% {transform: translate(-31px, -15px) rotate(270deg) translate(35px, 10px) rotate(0deg);}
25% {transform: translate(-31px, -15px) rotate(270deg) translate(30px, 20px) rotate(20deg);}
50% {transform: translate(-31px, -15px) rotate(270deg) translate(32px, 0px) rotate(-20deg);}
75% {transform: translate(-31px, -15px) rotate(270deg) translate(35px, 10px) rotate(0deg);}
100% {transform: translate(-31px, -15px) rotate(270deg) translate(35px, 10px) rotate(0deg);}
}



.maldesign1 {
    position: absolute;
    width: 14px;
    height: 14px;
    left: 8px;
    top: 8px;
    background-color: #4a4a4a;
    box-shadow: 0 0 0 2.5px #000;
    border-radius: 50%;
    transform:scale(0.75) translate(0px, -0.5px)
}

.maldesign1>span:nth-child(1) {
    left: 3.5px;
    width: 7px;
    height: 7px;
    position: absolute;
    background-color: #d6a13e;
    top: 3.5px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #000;
}

.maldesign1>span:nth-child(1):before {
    top: -2px;
    background-color: #4a4a4a;
    content: "";
    width: 2px;
    height: 12px;
    position: absolute;
    transform: rotate(45deg);
    left: 2px;
}
.maldesign1>span:nth-child(1):after {
    top: -2px;
    background-color: #4a4a4a;
    content: "";
    width: 2px;
    height: 12px;
    position: absolute;
    transform: rotate(-45deg);
    left: 2px;
}




.fodweapon {
    background-color: #302230;
    width: 45px;
    height: 8px;
    border-width: 5px;
    border-color: black;
    border-style: solid;
    position: absolute;
    left: -11.5px;
    top: 7.5px;
}
.foddesign {
    background-color: purple;
    width: 31px;
    height: 31px;
    border-width: 5px;
    border-color: black;
    border-style: solid;
    position: absolute;
    border-radius: 16px;
    left: -4px;
    top: -4px;
}
.fod {
    background-color: purple;
    width: 31px;
    height: 31px;
    border-width: 5px;
    border-color: black;
    border-style: solid;
    position: absolute;
    border-radius: 16px;
    z-index:3;
}

.foddesign:before {
    content: "";
    width: 20px;
    height: 20px;
    background-color: white;
    position: absolute;
    left: 5px;
    top: 5px;
    rotate: 45deg;
    box-shadow: 0 0 0 5px black;
}





.enemy.mm {
    background-color: #ff8919;
    border-color: #ffa046;
}

.mmside {
    background-color: #ff8919;
    border-color: #2f1e0f;
    width: 31px;
    height: 31px;
    border-width: 5px;
    border-style: solid;
    position: absolute;
    translate: -4.5px -4.5px;
}


.enemy.mm.bt {
    background-color: #19d9ff;
    border-color: #144a42;
}

.enemy.mm.bt > .mmside {
    background-color: #19d9ff;
    border-color: #4ae0de;
}


.mmside.three {
    left: -40px;
}
.mmside.one {
    left: 40px;
}
.mmside.four{
    top: -40px;
}
.mmside.two {
    top: 40px;
}

.mmside.destroyed {
    visibility: hidden;
}


.enemy.wraith {
scale:3.5;
}

.arm.left {
    transform: rotate(90deg);
    top: 10px;
}

.arm {
    width: 47px;
    height: 20px;
    top: 5px;
    left: 3px;
    box-shadow: 0 0 0 5px #1F1F1F;
    position: relative;
    background-color: #555555;
    transform-origin: 15px;
}

.arm.right {
    transform: rotate(-90deg);
    transform-origin: 5px 0px;
    top: -0px;
}

.wraithdesign {
    background-color: #757575;
    width: 31px;
    height: 31px;
    border-width: 5px;
    border-color: #282828;
    border-style: solid;
    position: absolute;
    z-index: 1;
    translate: -4.5px -4.5px;
}

.arms {
    width: 31px;
    height: 31px;
    border-width: 5px;
    border-style: solid;
    border-color:transparent;
    position: absolute;
    z-index: 1;
    translate: -4.5px -4.5px;
    rotate: -198deg;
}



.enemy.jelly {
    background-color: #FFFFFF77;
    border-color: #FFFFFFAA;
    z-index: 4;
    animation-name: jelly;
    animation-duration: 8s;
    animation-iteration-count: infinite;
	transition: top 0.5s, left 0.5s;
}
.jelly.jbig {
scale:1.5;
}

@keyframes jelly {
  0% { transform: translate(0.8px, 0.8px); }
  10% { transform: translate(-0.8px, -1.6px); }
  20% { transform: translate(-2.4px, 0px);}
  30% { transform: translate(2.4px, 1.6px);}
  40% { transform: translate(0.8px, -0.8px);}
  50% { transform: translate(-0.8px, 1.6px);}
  60% { transform: translate(-2.4px, 0.8px);}
  70% { transform: translate(2.4px, 0.8px);}
  80% { transform: translate(-0.8px, -0.8px);}
  90% { transform: translate(0.8px, 1.6px);}
  100% { transform: translate(0.8px, -1.6px);}
}


.enemy.hostdefender {
    border-color: #e2e2e2;
    background-color: white;
}

.enemy.hostdefender.darker {
    border-color: #cc0443;
    background-color: black;
}

.enemy.host {
    background-color: #05ffef;
}

.enemy.host.darker {
    background-color: #05ff7a;
}



.saw {
    background-color: #AAAAAA;
    width: 31px;
    height: 31px;
    border-width: 5px;
    border-color: #000;
    border-style: solid;
    position: absolute;
    animation-name: saw;
    animation-duration: 0.25s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.saw.dark {
background-color:#62244c;
z-index:1;
}
.saw.void {
background-color:#111111;
z-index:1;
}
@keyframes saw {
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(360deg);
}
}
.saw.top {
    animation-name: none!important;
    animation-duration: 0s!important;
    transform: translate(-4px, -4px) rotate(45deg)!important;
}
.t {
    background-color: transparent;
    width: 31px;
    height: 31px;
    border-width: 5px;
    border-color: #00000055;
    border-style: solid;
    position: absolute;
    color: white;
    font-family: "Roboto",sans-serif;
    font-size: 27;
    text-indent: 1000000px;
}
@keyframes voidFloat {
  0% { transform: translate(1px, 1px); }
  10% { transform: translate(-1px, -2px); }
  20% { transform: translate(-3px, 0px);}
  30% { transform: translate(3px, 2px);}
  40% { transform: translate(1px, -1px);}
  50% { transform: translate(-1px, 2px);}
  60% { transform: translate(-3px, 1px);}
  70% { transform: translate(3px, 1px);}
  80% { transform: translate(-1px, -1px);}
  90% { transform: translate(1px, 2px);}
  100% { transform: translate(1px, -2px);}
}
.portal {
    background-color: #ffffff;
    width: 31px;
    height: 31px;
    border-width: 5px;
    border-color: #e2e2e2;
    border-style: solid;
    position: absolute;
    animation-name: saw;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    z-index:10;
}
.portal.top {
    animation-name: none!important;
    animation-duration: 0s!important;
    transform: translate(-4px, -4px) rotate(45deg)!important;
}
.portal.dark {
    background-color: #6a466f;
    border-color: #38263b;
}
.portal.dark>.portal.top {
    background-color: #6a466f;
    border-color: #38263b;
}

.spendbox{
background-color: transparent;
width:31px;
height:31px;
border-width: 5px;
border-color: transparent;
border-style: solid;
position:absolute;
z-index:2;
}
.spendbox>img{
transform: translate(-5px,-5px);
pointer-events: none;
image-rendering: pixelated;
position:absolute;
}

.spendbox>img:nth-child(2) {
    transform: translate(-5px,-23px);
    pointer-events: none;
    image-rendering: pixelated;
    transition: opacity 0.75s, transform 0.75s;
    position: fixed;
	 z-index:3;
}

.spendbox>img.hide:nth-child(2) {
    transform: translate(-5px,-5px);
    opacity: 0;
}





.enemyapproach{
background-color: transparent;
width:31px;
height:31px;
border-width: 5px;
border-color: transparent;
border-style: solid;
position:absolute;
z-index:5;
}
.enemyapproach>img{
transform: translate(-5px,-5px);
pointer-events: none;
image-rendering: pixelated;
position:absolute;
}




.failureblock{
background-color: transparent;
width:31px;
height:31px;
border-width: 5px;
border-color: transparent;
border-style: solid;
position:absolute;
}
.failureblock>img{
transform: translate(-5px,-5px);
pointer-events: none;
image-rendering: pixelated;
position:absolute;
}
.moneyblock {
    background-color: white;
    width: 31px;
    height: 31px;
    border: black solid 4px;
    border-radius: 5px;
    position: absolute;
}
.moneyblock:before {
    background-color: white;
    width: 24px;
    height: 24px;
    transform: rotate(45deg);
    border: black solid 4px;
    border-radius: 5px;
    content: "";
    display: block;
}




.item{
width:31px;
height:31px;
border-width: 5px;
border-style: solid;
position:absolute;
z-index: 1;
}
.item>img.zImg {
    transform: translate(-5px,-23px);
    pointer-events: none;
    image-rendering: pixelated;
    transition: opacity 0.75s, transform 0.75s;
    position: fixed;
	 z-index:3;
}
.item>img.zImg.hide {
    transform: translate(-5px,-5px);
    opacity: 0;
}



.cannon-i {
    height: 10px;
    transform: translate(0px, 10px);
    background-color: grey;
}
.cannon-i:before {content:"";width: 12px;height: 12px;background-color: #926363;border-style: solid;border-width: 5px;border-color: black;position:absolute;transform: translate(8px,-12px) skew(15deg,15deg);}
.cannon-i:after {content:"";width: 12px;height: 12px;background-color: #926363;border-style: solid;border-width: 5px;border-color: black;position:absolute;transform: translate(8px,2px) skew(-15deg,-15deg);}
.cannon-i>span:nth-child(2) {
    width: 25px;
    height: 10px;
    left: 6px;
    display: block;
    background-color: #b07777;
    position:absolute;
    z-index: 1;
}






.charge-i {
    height: 10px;
    transform: translate(0px, 10px);
    background-color: transparent;
    border-color: transparent;
}
.charge-i:before {content:"";width: 12px;height: 12px;background-color: #fd6161;border-style: solid;border-width: 5px;border-color: black;position:absolute;transform: translate(5px,-12px) skew(0deg,-25deg);}
.charge-i:after {content:"";width: 12px;height: 12px;background-color: #fd6161;border-style: solid;border-width: 5px;border-color: black;position:absolute;transform: translate(5px,2px) skew(0deg,25deg);}

.charge-i>span:nth-child(2) {
    width: 25px;
    height: 4px;
    left: 4px;
    display: block;
    background-color: #c9c9c9;
    position:absolute;
    z-index: 1;
    transform: rotate(180deg);
    border-right: black solid 10px;
    box-shadow: 0 0 0 5px black;
    border-top: transparent solid 5px;
    border-bottom: transparent solid 5px;
}



.lightcannon-i {
    height: 10px;
    transform: translate(0px, 10px);
    background-color: transparent;
    border-color: transparent;
	z-index: 0;
}
.lightcannon-i:before {content:"";width: 12px;height: 12px;background-color: #d2d2d2;border-style: solid;border-width: 5px;border-color: black;position:absolute;transform: translate(5px,-12px) skew(-20deg,-25deg);}
.lightcannon-i:after {content:"";width: 12px;height: 12px;background-color: #d2d2d2;border-style: solid;border-width: 5px;border-color: black;position:absolute;transform: translate(5px,2px) skew(20deg,25deg);}

.lightcannon-i>span:nth-child(2) {
    width: 25px;
    height: 4px;
    left: 4px;
    display: block;
    border: black solid 4px;
    background-color: #c9c9c9;
    position:absolute;
    z-index: 1;
}


.darkcannon-i {
    height: 10px;
    transform: translate(0px, 10px);
    background-color: transparent;
    border-color: transparent;
}
.darkcannon-i:before {content:"";width: 12px;height: 12px;background-color: #62244c;border-style: solid;border-width: 5px;border-color: black;position:absolute;transform: translate(9px,-14px) rotate(45deg);}
.darkcannon-i:after {content:"";width: 12px;height: 12px;background-color: #62244c;border-style: solid;border-width: 5px;border-color: black;position:absolute;transform: translate(9px,4px) rotate(45deg);}

.darkcannon-i>span:nth-child(2) {
    width: 25px;
    height: 4px;
    left: 4px;
    display: block;
    border: black solid;
    background-color: #747474;
    position:absolute;
    z-index: 1;
}

.annihilatorcannon-i {
    height: 10px;
    transform: translate(0px, 10px);
    background-color: grey;
}
.annihilatorcannon-i:before {content:"";width: 12px;height: 12px;background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 14%, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 84%, rgba(255,216,138,1) 86%);border-style: solid;border-width: 5px;border-color: black;position:absolute;transform: translate(8px,-12px) skew(15deg,15deg);}
.annihilatorcannon-i:after {content:"";width: 12px;height: 12px;background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 14%, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 84%, rgba(255,216,138,1) 86%);border-style: solid;border-width: 5px;border-color: black;position:absolute;transform: translate(8px,2px) skew(-15deg,-15deg);}
.annihilatorcannon-i>span:nth-child(2) {
    width: 31px;
    height: 10px;
    display: block;
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 75%, rgba(0,0,0,1) 75%, rgba(0,0,0,1) 100%, rgba(255,255,255,1) 100%);
    position:absolute;
    z-index: 1;
    background-size: 10% 100%;
}

.bomblauncher-i {
    border-color: transparent;
}

.bomblauncher-i>span:nth-child(2) {
    background-color: #00c609;
    width: 21px;
    height: 21px;
    top: 5px;
    left: 5px;
    display: block;
    position: absolute;
    transform: rotate(45deg);
    box-shadow: 0 0 0 5px black;
}

.bomblauncher-i>span:nth-child(3) {
    background-color: #ff6900;
    width: 12px;
    height: 12px;
    top: 10px;
    left: 10px;
    display: block;
    position: absolute;
    box-shadow: 0 0 0 5px black;
}


.tripleshot-i {
    height: 10px;
    transform: translate(0px, 10px);
    background-color: #8c8c8c;
}
.tripleshot-i:before {content:"";width: 12px;height: 12px;background-color: #5d995d;border-style: solid;border-width: 5px;border-color: black;position:absolute;transform: translate(8px,-12px) skew(15deg,15deg);}
.tripleshot-i:after {content:"";width: 12px;height: 12px;background-color: #5d995d;border-style: solid;border-width: 5px;border-color: black;position:absolute;transform: translate(8px,2px) skew(-15deg,-15deg);}

.tripleshot-i>span:nth-child(2) {
    width: 12px;
    height: 12px;
    top: -6px;
    left: 15px;
    background-color: #925d99;
    border-style: solid;
    border-width: 5px;
    border-color: black;
    position: absolute;
    rotate: 45deg;
    z-index: 1;
}

.plasmashot-i {
    height: 10px;
    transform: translate(0px, 10px);
    background-color: grey;
}
.plasmashot-i:before {content:"";width: 12px;height: 12px;background-color: #17ff00;border-style: solid;border-width: 5px;border-color: black;position:absolute;transform: translate(8px,-13px) skew(-50deg,15deg);}
.plasmashot-i:after {content:"";width: 12px;height: 12px;background-color: #17ff00;border-style: solid;border-width: 5px;border-color: black;position:absolute;transform: translate(8px,2px) skew(50deg,-15deg);}
.plasmashot-i>span:nth-child(2) {
    width: 28px;
    height: 14px;
    left: 3px;
    top: -2px;
    display: block;
    background-color: #0d8b00;
    position:absolute;
    z-index: 1;
}

.targetter-i {
border-color:transparent;
}
.targetter-i:before {content:"";width: 12px;height: 12px;background-color: #57123f;border-style: solid;border-width: 5px;border-color: black;position:absolute;transform: translate(8px,-2px) skew(0deg,15deg);}
.targetter-i:after {content:"";width: 12px;height: 12px;background-color: white;border-style: solid;border-width: 5px;border-color: black;position:absolute;transform: translate(8px,12px) skew(0deg,-15deg);}

.targetter-i>span:nth-child(2) {
    content: "";
    width: 12px;
    height: 12px;
    background-color: #faff00;
    border-style: solid;
    border-width: 5px;
    border-color: black;
    position: absolute;
    z-index: 1;
    top: 5px;
    left: 8px;
}


.shard-i {
    border-color:transparent;
}
.shard-i>span:nth-child(2) {
    width: 11px;
    height: 21px;
    background-color: #00feff;
    position: absolute;
    left: 10px;
    top: 4px;
}

.shard-i>span:nth-child(3) {
    width: 3px;
    height: 11px;
    background-color: #00feff;
    position: absolute;
    left: 14px;
    top: -5px;
    box-shadow: 2px 4px #00feff, -2px 4px #00feff, -8px 23px #00feff, 8px 23px #00feff, 0px 28px #00feff, 2px 26px #00feff, -2px 26px #00feff;
}




.spike{
background-color: transparent;
width:31px;
height:31px;
border-width: 5px;
border-color: transparent;
border-style: solid;
position:absolute;
}


.spike:after {
content:"";
position:absolute;
width:31px;
height:31px;
background-color:#292929;
box-shadow:0 0 0 5px black;
z-index:1;
}

.spike:before {
content:"";
position:absolute;
width:31px;
height:31px;
background-color:grey;
rotate:45deg;
box-shadow:0 0 0 5px black;
z-index: -1;
}






@keyframes magmacaverns {
    0% {
        background-color:#251d1d
    }
    20% {
        background-color:#251e1e
    }
    40%{
        background-color:#261f1f
    }
    60%{
        background-color:#261f1f
    }
    80%{
        background-color:#251e1e
    }
    100%{
        background-color:#251d1d
    }
}

.magmacaverns {
    animation-name: magmacaverns;
    animation-iteration-count: infinite;
    animation-duration: 1s;
}



.hypershot-i {
background-color: red;
width:31px;
height:31px;
border-width: 5px;
border-color: #000;
border-style: solid;
position:absolute;
transition:opacity 0.5s;
}

.target {
    position: absolute;
    animation: target 4s linear infinite!important;
    background: url("assets/cannon/target.png");
    background-size: 100% 100%;
    opacity: 0.4;
    width: 41px;
    height: 41px;
}

.targetselected {
    position: absolute;
    animation: target 2s linear infinite!important;
    background: url("assets/cannon/targetselected.png");
    background-size: 100% 100%;
    opacity: 0.9;
    width: 41px;
    height: 41px;
}

@keyframes target {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}




.gate {
background-color: #EEEEEE;
width:31px;
height:31px;
border-width: 5px;
border-color: #000;
border-style: solid;
position:absolute;
font-family:'Roboto',sans-serif;
color:black;
font-size: 27px;
}

.fire-p {
    position: absolute;
    width: 41px;
    height: 41px;
    background-image: url(assets/particle/firedefense.png);
    background-size: 100% 100%;
	scale:0.75;
}

.health-circle {
	height: 21px;
    width: 21px;
    position: absolute;
    background: conic-gradient(from 0deg, black 0%, #01ff01 0%, #01ff01);
    border-radius: 50%;
    box-shadow: 0 0 0 2px #000;
    transform: translate(9px, -22px);
}

.character {
    background-color: white;
    width: 31px;
    height: 31px;
	border-style:solid;
	border-color:black;
	border-width:5px;
}

.metalwall {
    background: url(assets/wall/metalwallimg.png);
    width: 41px;
    height: 41px;
    border: none;
    position: absolute;
    image-rendering: pixelated;
}

.metalwallimg {
    position: absolute;
    width: 41px;
    height: 41px;
}

.metalwallimg.dir0 {
    transform:rotate(180deg);
    background: url(assets/wall/metalwallimgside.png);
}

.metalwallimg.dir1 {
    transform:rotate(-90deg);
    background: url(assets/wall/metalwallimgside.png);
}

.metalwallimg.dir2 {
    transform:rotate(0deg);
    background: url(assets/wall/metalwallimgside.png);
}

.metalwallimg.dir3 {
    transform:rotate(90deg);
    background: url(assets/wall/metalwallimgside.png);
}


.enemy.bisectonech {
    background-color: transparent;
    width: 31px;
    height: 31px;
    border-width: 5px;
    border-color: transparent;
    border-style: solid;
    position: absolute;
    z-index: 1;
    scale: 3.5;
}

.enemy>.bisectonechsegment1 {
    background-color: #8c587f;
    width: 26px;
    height: 11px;
    border-width: 5px;
    border-color: black;
    border-radius: 6px;
    border-style: solid;
    position: absolute;
    left: 23px;
    top: -10px;
	animation:bisectonech1 0.3s linear infinite;
}

.enemy>.bisectonechdesign {
    background-color: #8c587f;
    width: 31px;
    height: 31px;
    border-width: 5px;
    border-color: black;
    border-radius: 6px;
    border-style: solid;
    position: absolute;
    left: -4px;
    top: -4px;
}

.enemy>.bisectonechsegment2 {
    background-color: #8c587f;
    width: 26px;
    height: 11px;
    border-width: 5px;
    border-color: black;
    border-radius: 6px;
    border-style: solid;
    position: absolute;
    left: 23px;
    top: 21px;
	animation:bisectonech2 0.3s linear infinite;
}

.enemy>.bisectonechsegment3 {
    background-color: #8c587f;
    width: 21px;
    height: 21px;
    border-width: 5px;
    border-color: black;
    border-radius: 6px;
    border-style: solid;
    position: absolute;
    left: -20px;
    top: 0px;
}

@keyframes bisectonech1 {
0% {transform: translate(0,0);}
33.333% {transform: translate(0, 0.5px);}
66.666% {transform: translate(0,-0.5px);}
100% {transform: translate(0,0px);}
}

@keyframes bisectonech2 {
0% {transform: translate(0,0);}
33.333% {transform: translate(0,-0.5px);}
66.666% {transform: translate(0,0.5px);}
100% {transform: translate(0,0px);}
}