@font-face {
   font-family: 'Arcade Normal';
   font-style: .6rem;
   font-weight: normal;
   src: local('Arcade Normal'), url('../fonts/arcade-font/ARCADE_N.woff') format('woff');
}

@font-face {
   font-family: elif;
   src: url('../fonts/alphabet_of_magi/ALPMAGI.TTF') format('woff'),
      url('../fonts/alphabet_of_magi/ALPMAGI.woff') format('truetype');


}

:root {
   --pixel-size: 2px;
   --grid-cell: calc(var(--pixel-size) * 16);
   --bg: black;
   --pointer: url(../resources/cursorPointer.png);

}

@media(min-width: 700px) {
   :root {
      --pixel-size: 3px;
   }
}

@media(min-width: 1000px) {
   :root {
      --pixel-size: 4px;
   }
}

/* @media( min-width: 1000px ) {
    :root {
       --pixel-size: 5px;
    }
 } */

html,
body {
   height: 100%;
   overflow: hidden;
   -webkit-touch-callout: none;
   /* iOS Safari */
   -webkit-user-select: none;
   /* Safari */
   -khtml-user-select: none;
   /* Konqueror HTML */
   -moz-user-select: none;
   /* Firefox */
   -ms-user-select: none;
   /* Internet Explorer/Edge */
   user-select: none;
   /* Non-prefixed version, currently
                                   supported by Chrome and Opera */

   cursor: url(../resources/cursor.png), auto;
}

body {
   background: var(--bg);
}

button {
   cursor: url(../resources/cursorPointer.png), auto !important;
}

#game {
   width: 100%;
   height: 100%;
}

.telif {
   font-family: 'elif';
}

.hidden-m-text {
   font-family: 'elif';
   position: fixed;
   width: 200%;
   color: white;
}

.pixel-art {
   image-rendering: pixelated;
}

.full-view {
   width: 100%;
   height: 100%;
}

.full-width {
   width: 100%;
}

.full-height {
   height: 100%;
}

.at-top {
   position: absolute;
   top: 0px;
}

.at-bottom {
   position: absolute;
   bottom: 0px;
}

.right {
   position: absolute;
   right: 0px;
}

.left {
   position: absolute;
   left: 0px;
}

.frame {
   position: fixed;
   z-index: 1;
   /* 
    border: solid rgb(0, 255, 234) 2px;*/
   overflow: hidden;

   /*background:#111;*/
}

.camera {
   /* width: calc(var(--pixel-size) * 160);
    height: calc(var(--pixel-size) * 144);*/
   width: 100% !important;
   height: 100% !important;
   overflow: hidden;
   /*background: #000;*/
   position: relative;
   word-break: break-all !important;

}

.blur {
   filter: blur(3px);
}

.hpbar {
   width: 100px;
   height: 10px;
   border: solid #ffffff;
   background: #290101;
   border-radius: 1px;
   box-shadow: 1px 1px #111;
   position: relative;
}

.hpbar .bar {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0px;
   left: 0px;
   z-index: 1;
   background: #c00202;

}

.hpbar .bar-text {
   width: 100%;
   height: 100%;
   color: white;
   position: absolute;
   top: 0px;
   left: 0px;
   z-index: 2;
   text-align: center;
   font-size: .7rem !important;
   line-height: .7rem;
}

.progress-bar {
   width: calc(100% - 2px);
   height: calc(100% - 2px);
   border: solid #ffffff;
   background: #023d05;
   border-radius: 1px;
   box-shadow: 1px 1px #111;
}

.progress-bar .progress {
   width: 100%;
   height: 100%;
   background: green;

}

.progress-bar .progress-text {
   width: 100%;
   height: 100%;
   color: white;
   position: absolute;
   top: 0px;
   left: 0px;
   z-index: 2;
   text-align: center;
   font-size: .7rem !important;
   line-height: .7rem;
}

.map {
   image-rendering: pixelated;
   /*background-image: url("https://assets.codepen.io/21542/CameraDemoMap.png");
    width: calc(13 * var(--grid-cell));
    height: calc(10 * var(--grid-cell));
    */
   background-size: 100%;

   position: relative;
}

.overmap {
   image-rendering: pixelated;
   background-color: transparent;
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   z-index: 5;
   background-repeat: no-repeat;
   background-size: contain;
}


.bgmap {
   image-rendering: pixelated;
   background-color: transparent;
   background-repeat: no-repeat;
   background-size: contain;
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   z-index: 0;
   transition: transform .3s;

}


.Entity {
   position: absolute;
   top: 0px;
   left: 0px;
   width: calc(var(--grid-cell));
   height: calc(var(--grid-cell));
}

.Avatar {
   position: absolute;
   overflow: hidden;
   bottom: 0px;
   left: 0px;
   filter: drop-shadow(1px -5px 2px #222);
}

.Entity.boss {
   filter: drop-shadow(0px 0px 16px red);
}

.Entity.boss .Avatar {
   overflow: unset;
}

.Entity.boss .Avatar .avatar-image {
   transform: scale(2);
}


.cell-debug {
   width: calc(var(--grid-cell));
   height: calc(var(--grid-cell));
   /*border:1px solid red;*/
   background: white;
   position: absolute;
   top: 0px;
   left: 0px;
}

.bpad {
   position: fixed;
   right: calc(var(--pixel-size) * 5);
   bottom: calc(var(--pixel-size) * 1);
   z-index: 2;
   user-select: none;
   height: calc(var(--pixel-size) * 25);
   background: #0000004d;
   border-radius: 5px;
}

.bpad div {
   float: left;
   margin: calc(var(--pixel-size) * 6);
}

.dpad {

   position: fixed;
   left: calc(var(--pixel-size) * 5);
   bottom: 20px;
   z-index: 2;
   user-select: none;
   width: calc(var(--pixel-size) * 37);
   height: calc(var(--pixel-size) * 38);
   background: #0000004d;
   border-radius: 50%;
}

.dpad-button {
   appearance: none;
   outline: 0;
   border: 0;
   background: transparent;
   padding: 0;
   cursor: var(--pointer);
}

.dpad-button svg {
   display: block;
   height: calc(var(--pixel-size) * 13);
}

.dpad-button.pressed .Arrow_arrow-inset {
   stroke: #07c2cc;
}

.dpad-button.pressed .Arrow_arrow-body {
   stroke: #17dfea;
}

.dpad-up {
   position: absolute;
   left: calc(var(--pixel-size) * 12);
   top: 0;
}

.dpad-down {
   position: absolute;
   bottom: var(--pixel-size);
   left: calc(var(--pixel-size) * 12);
}

.dpad-left {
   position: absolute;
   top: calc(var(--pixel-size) * 12);
   left: 0;
}

.dpad-right {
   position: absolute;
   top: calc(var(--pixel-size) * 12);
   right: 0;
}


.arcade-font {
   font-family: 'Arcade Normal';
   font-size: .7rem;
}




/**

KEY BUTTON

*/

.btn-key {
   font-family: 'Arcade Normal';
   image-rendering: pixelated;
   background-image: url("../resources/button.png");
   background-size: cover;
   background-position: 0px 0px;
   background-color: transparent;
   width: calc(var(--pixel-size) * 13);
   height: calc(var(--pixel-size) * 13);
   line-height: calc(var(--pixel-size) * 11);
   font-size: calc(var(--pixel-size) * 4);
   text-align: center;
   text-shadow: 1px 1px 1px #111;
   border: none;
   color: #5f5f5f;
   cursor: var(--pointer);
}

.btn-key.active {
   background-position-x: calc(var(--pixel-size) * 13);
   border: none;
   color: #17dfea;
   line-height: calc(var(--pixel-size) * 13);
}

.btn-key.active,
.btn-key:active svg {
   margin-top: 5px;
}

.btn-key-space {

   background-position: -80px -432px !important;
   transform: scale(2);
}


.noselect {
   -webkit-touch-callout: none;
   /* iOS Safari */
   -webkit-user-select: none;
   /* Safari */
   -khtml-user-select: none;
   /* Konqueror HTML */
   -moz-user-select: none;
   /* Firefox */
   -ms-user-select: none;
   /* Internet Explorer/Edge */
   user-select: none;
   /* Non-prefixed version, currently
                                   supported by Chrome and Opera */
}

.valign {
   display: flex;
   justify-content: center;
   align-items: center;
}

.row {
   display: flex;
   justify-content: center;
}

.row .col-6 {
   height: 100%;
   width: calc(100% / 6);
}

.row .col-5 {
   height: 100%;
   width: calc(100% / 5);
}

.row .col-4 {
   height: 100%;
   width: calc(100% / 4);
}

.row .col-2 {
   height: 100%;
   width: calc(100% / 2);
}

.row .col-3 {
   height: 100%;
   width: calc(100% / 3);
}

.center {
   margin: 0 auto;
   text-align: center;
}

.text-muted {
   color: #646464;
}

.pull-right {
   float: right;
}

.pull-left {
   float: left;
}

.animated.delay-01 {
   animation-delay: 0.1s !important;
}

.animated.delay-02 {
   animation-delay: 0.2s !important;
}

.animated.delay-03 {
   animation-delay: 0.3s !important;
}

.animated.delay-04 {
   animation-delay: 0.4s !important;
}

.animated.delay-05 {
   animation-delay: 0.5s !important;
}

.animated.delay-1 {
   animation-delay: 1s !important;
}

.animated.delay-2 {
   animation-delay: 2s !important;
}

.animated.delay-3 {
   animation-delay: 3s !important;
}

.animated.delay-4 {
   animation-delay: 4s !important;
}

.animated.delay-5 {
   animation-delay: 5s !important;
}


.animated.delay-01 {
   animation-delay: 0.1s !important;
}

.animated.delay-02 {
   animation-delay: 0.2s !important;
}

.animated.delay-03 {
   animation-delay: 0.3s !important;
}

.animated.delay-04 {
   animation-delay: 0.4s !important;
}

.animated.delay-05 {
   animation-delay: 0.5s !important;
}




.animated.float {
   animation: float 2s ease-in-out infinite;
}


.Avatar.float,
.item.float {
   animation: avatar-float 2s ease-in-out infinite;
}

@keyframes pulsate {
   0% {
      transform: scale(0.1);
      opacity: .4;
   }

   50% {
      opacity: 1;
   }

   100% {
      transform: scale(1.2);
      opacity: .5;
   }
}

@keyframes float {
   0% {
      box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
      transform: translatey(0px);
   }

   50% {
      box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
      transform: translatey(-2px);
   }

   100% {
      box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
      transform: translatey(0px);
   }
}

@keyframes avatar-float {
   0% {
      filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.6));
      transform: translatey(0px);
   }

   50% {
      filter: drop-shadow(0 25px 15px rgba(0, 0, 0, 0.2));
      transform: translatey(-2px);
   }

   100% {
      filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.6));
      transform: translatey(0px);
   }
}

@keyframes pulse {
   0% {
      transform: scale(0.8);
   }

   50% {
      transform: scale(1.2);
   }

   100% {
      transform: scale(.8);
   }
}


.actionicon {
   position: absolute;
   top: -24px;
   left: 16px;
   width: 16px !important;
   height: 16px !important;
   image-rendering: pixelated !important;
   background-color: transparent !important;
   background-image: url("../resources/maptile.png") !important;
   transform: scale(2);

}

.effect-animation {
   position: absolute;
}

.effect-animation.effect-icon {
   width: 16px !important;
   height: 16px !important;
   image-rendering: pixelated !important;
   background-color: transparent !important;
   background-image: url("../resources/maptile.png") !important;

}

.scale5 {
   transform: scale(5) !important;
}

.scale3 {
   transform: scale(3) !important;
}


.floating-up-text {
   font-size: 1.5rem;
   font-family: "Arcade normal";
   text-shadow: 0px 1px 2px #f9f9f9;
}

.damage-text {
   font-size: 1.5rem;
   font-family: "Arcade normal";
   text-shadow: 0px 1px 2px #f9f9f9;
}

.ui-message-toast {

   position: fixed;
   bottom: 30px;
   left: 0px;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 100;
}

.ui-message-toast .toast {
   margin: 0 auto;
   background-color: black;
   color: white;
   width: auto;
   height: 2rem;
   line-height: 2rem;
   border-radius: 12px;
   padding: 12px;
   border: white solid;
   border-left: none;
   border-right: none;
   box-shadow: 0px 2px 14px 6px #4b4b4b;
}

.ui-message-panel {
   position: fixed;
   z-index: 99;
   top: 3rem;
   /*calc(45% - (var(--grid-cell) * 2));*/
   left: 1rem;

   height: 100px;
   box-shadow: 0px 2px 14px 6px #4b4b4b;
   background: #222020;
   margin: 0 auto;
   display: flex;
   justify-content: center;
   align-items: center;
   border: solid #fff6d3 5px;
   border-radius: 5px;
   border-left: none;
   border-right: none;
   font-weight: bold;
   color: #fff;
}

.ui-message-panel.black {
   background-color: #111 !important;
   color: white;
}

.ui-message-panel.playertalk {
   background-color: red !important;
   color: white;
}

.small {
   font-size: .4rem !important;
}

.red {
   color: red;
}

.green {
   color: green;
}

.purple {
   color: purple;
}

.blue {
   color: blue;
}

.ui-message-panel .container {
   margin: 0 auto;
   width: calc(100% - 10px);
   max-height: calc(100% - 10px);
   padding: 0px 2rem;
   font-size: 1.5rem;
}

.ui-message-panel .cursor {
   position: absolute;
   bottom: 10px;
   right: 10px;
   width: 16px;
   height: 16px;
   image-rendering: pixelated;
   background-color: transparent;
   background-image: url("../resources/maptile.png");
   background-position: 144px 16px;
   transform: scale(2);
   -webkit-animation: cursor-animation 2s ease-in-out infinite;
   ;
   animation: cursor-animation 2s ease-in-out infinite;
   ;
}




.UI-floating-menu {
   position: fixed;
   z-index: 200;
   min-width: 100px;
   min-height: 40px;
   max-height: 90%;
   overflow: auto;
   box-shadow: 1px 3px 2px 3px #111111a6;
}

.UI-menu-option {
   max-width: 300px;
   min-height: 40px;
   background-color: #fff;
   border: thin solid #d1d1d1;
   text-align: center;
   line-height: 40px;
   text-shadow: 0px 1px #d1d1d1;
   font-family: 'Arcade normal';
   box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
   font-size: .6rem;
}

.UI-menu-option.selected {
   background-color: #dcf119;
}


#battlemapCursorSelector {
   position: absolute;
   width: var(--grid-cell);
   height: var(--grid-cell);
   border: dashed yellow;
   animation: float 2s ease-in-out infinite;
}

.decitionCell {
   position: absolute;
   width: var(--grid-cell);
   height: var(--grid-cell);
   border: dashed darkred;
   background-color: red;
}

.decitionCell.selected {
   background-color: yellow;
}


/*------------- NIMATIONS

 */

.animated.float {
   animation: float 2s ease-in-out infinite;
}

@keyframes pulsate {
   0% {
      transform: scale(0.1);
      opacity: .4;
   }

   50% {
      opacity: 1;
   }

   100% {
      transform: scale(1.2);
      opacity: .5;
   }
}

@keyframes float {
   0% {
      box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
      transform: translatey(0px);
   }

   50% {
      box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
      transform: translatey(-2px);
   }

   100% {
      box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
      transform: translatey(0px);
   }
}


@keyframes pulse {
   0% {
      transform: scale(0.8);
   }

   50% {
      transform: scale(1.2);
   }

   100% {
      transform: scale(.8);
   }
}


#SettingsHud {
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   z-index: 500;
}


#PlayerHud {
   position: fixed;
   top: 0px;
   right: 00px;
   z-index: 1;
}

#PlayerHud .sidewrapper {
   position: fixed;
   right: 0px;
   bottom: 0px;
   z-index: 3;
   border-radius: 8px;
   background: #646464;
   min-width: 200px;
   height: calc(100% - 2.9rem);
   padding: 5px;
   padding-right: 10px;
   font-weight: bold;
   border-left: solid #444;
}

#PlayerHud .bottomCornerWrapper {
   position: fixed;
   bottom: 0px;
   left: 1rem;

}

#PlayerHud .bottomCornerWrapper.onbattle {
   left: calc(50% - 8rem);
   bottom: 2rem;
   transition: all .5s;
}

#PlayerHud .topBarWrapper {
   position: fixed;
   top: 0px;
   left: 0px;
   background-color: #646464;
   width: 100%;
   height: 2.3rem;
   z-index: 1;
   border-bottom: solid #444;
   box-shadow: 1px 1px 2px #646464;
}

#PlayerHud .bottomCornerWrapper #HotKeysItems .col {
   background-color: #000000ad;
}

#PlayerHud .bottomCornerWrapper.onbattle #HotKeysItems .col {
   margin: 0px .5rem;
}

#PlayerHud .topBarWrapper .player-text {
   font-size: 1.2rem;
   color: white;
   text-shadow: 1px 1px 3px black;
   width: 100%;
   text-align: left;
   padding-left: 1rem;
}

#PlayerHud .topBarWrapper .floor-text {
   font-size: 1.2rem;
   color: yellow;
   text-shadow: 1px 1px 3px black;
   width: 100%;
   font-weight: bold;
   text-align: center;

}

.key-text,
.bosskey-text,
.gold-text {
   font-size: 1.2rem;
   color: orange;
   text-shadow: 1px 1px 3px black;
   font-weight: bold;
   text-align: center;
}

#HotKeysItems {
   min-width: 4rem;
   height: 4rem;
   transform: scale(1.5);
   padding: 2rem;
}

#HotKeysItems .col {
   width: 4rem;
   height: 4rem;
   border: solid #646464;
   float: left;
   color: white;
}

#HotKeysItems .col .item-text {
   padding: 5px;
}

#HotKeysItems .col .item-bind-key {
   width: 2rem;
   height: 2rem;
   line-height: 1.5rem;
   left: -5px;
}

#playerhpbar {
   width: 100%;

}

#gearWrapper {
   border: thin solid;
   background-color: #c1c1c1;
   width: 100%;
   min-height: 40%;
   border-radius: 3px;
}

#gearWrapper .grid-cell {
   min-height: 3rem;
}

#gearWrapper .gear-cell-stats {
   width: 69%;
   float: left;
   height: 100%;
   padding-top: .2rem
}

#gearWrapper .gear-item {
   border: thin solid;
   cursor: var(--pointer);
}

#gearWrapper .gear-cell-icon {
   width: 100%;
   height: 100%;
   position: relative;
   background-color: grey;
}

#statstablewrapper {
   background-color: white;
   border: inset #c1c1c1;
   padding: .2rem;
}

#statstablewrapper .grid-cell {
   border: thin solid #c1c1c1;
}

#statstablewrapper .grid-cell-label {
   width: 39%;
   float: left;
   height: 100%;

}

#statstablewrapper .grid-cell-value {
   width: 60%;
   float: left;
   text-align: right;
   height: 100%;
   overflow: hidden;
   /*
   display: flex;
   justify-content: right;
   align-items: center;*/
}

.bottom-cell-level-txt {
   position: absolute;
   bottom: .1rem;
   right: .1rem;
   padding: .1rem;

}

.gear-cell-icon .bottom-cell-level-txt:not(.off) {

   background-color: white;
}

.gray-filter {
   filter: grayscale();
}

.rarity.rarity-1 {
   background-color: green !important;
}

.rarity.rarity-2 {
   background-color: blue !important;
}

.rarity.rarity-3 {
   background-color: purple !important;
}

.rarity.rarity-4 {
   background-color: yellow !important;
}

.rarity.rarity-5 {
   background-color: orange !important;
}

.rarity-glow-1 {
   filter: drop-shadow(0px 0px 1px green)
}

.rarity-glow-2 {
   filter: drop-shadow(0px 0px 1px blue)
}

.rarity-glow-3 {
   filter: drop-shadow(0px 0px 1px purple)
}

.rarity-glow-4 {
   filter: drop-shadow(0px 0px 1px yellow)
}

.rarity-glow-5 {
   filter: drop-shadow(0px 0px 1px orange)
}

.icon-heart {
   background-image: url("../resources/maptile.png");
   background-position: 0px 16px;
   width: 16px;
   height: 16px;
   transform: scale(1.4);
   image-rendering: pixelated;
}

.item-weapon {
   background-position: 0px -208px !important;
   transform: scale(2);
}

.item-shield {
   background-position: 0px -304px !important;
   transform: scale(2);
}

.item-helmet {
   background-position: 0px -320px !important;
   transform: scale(2);
}

.item-cloth {
   background-position: 0px -288px !important;
   transform: scale(2);
}

.item-ring {
   background-position: -32px -144px !important;
   transform: scale(2);
}

.item-collar {

   background-position: -64px -144px !important;
   transform: scale(2);

}

.inventory-icon {
   background-image: url("../resources/maptile.png");
   background-position: 0px -64px;
   width: 16px;
   height: 16px;
   transform: scale(2);
   image-rendering: pixelated;
}

.float-left {
   float: left;
}

.float-right {
   float: right;
}

#worldKeyHud {
   position: absolute;
   width: var(--grid-cell);
   height: var(--grid-cell);
   border: thin yellow;
}

.capitalize {
   text-transform: capitalize;
}

.item-key {
   background-position: 0px -128px !important;
}

.item-bosskey {
   background-position: -32px -128px !important;
}

.item-gold {
   background-position: 0px -144px !important;
}

.item-potion {
   background-position: -128px -144px !important;
}


.item-jump {
   background-position: -144px -416px !important;
}

.item-escape {
   background-position: -160px -416px !important;
}

.battle-escape {
   background-position: -176px -416px !important;
}

.item-stairs {
   background-position: -128px -416px !important;
}

.icon-burn {
   background-position: 0px -416px !important;
}

.icon-poison {
   background-position: -16px -416px !important;
}

.icon-stun {
   background-position: -32px -416px !important;
}

.icon-bleed {
   background-position: -48px -416px !important;
}

.icon-spacebar {
   background-position: -208px -384px !important;
}

.icon-encounter {
   background-position: -192px -432px !important;
}

.icon-elite {
   background-position: -224px -432px !important;
}

.icon-boss {
   background-position: -240px -432px !important;
}

.icon-arrow {
   background-position: -176px -432px !important;
}

.item-icon {
   background-image: url("../resources/maptile.png");
   background-position: 0px 0px;
   width: 16px;
   height: 16px;
   image-rendering: pixelated;
}



.grid-wrapper {
   width: 100%;
   height: 100%;

   display: grid;
   grid-column-gap: .1rem;
   grid-row-gap: .1rem;
   border-bottom: thin solid;
}


.grid-wrapper .grid-cell {
   border-left: thin solid;
   border-top: thin solid;
   width: 100%;
   position: relative;
}

.grid-wrapper .grid-item-cursor-selector {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   box-shadow: yellow inset 0px 0px 2px 2px;
}

.front-screen {
   position: fixed;
   background-color: #1111116b;
   top: 0px;
   left: 0px;
   width: 100vw;
   height: 100vh;
   z-index: 200;
   color: orange;
   font-weight: bolder;

}

.front-screen-text {
   width: 100%;
   height: 100px;
   color: orange;
   font-size: 2rem;
   font-weight: bold;
   text-shadow: 2px 2px 4px #2a2a2a;
   margin: 25px 0px;
   border-bottom: #ffffff solid;
   background: #80808029;

}

.front-screen-text.dark {
   width: 100%;
   height: 100px;
   background: #000000d9;
   color: orange;
   font-size: 2rem;
   font-weight: bold;
   text-shadow: 0px 0px 10px grey;
   margin: 25px 0px;
   box-shadow: 0px 0px 10px 10px #000000d9;

}

.youlose,
.red-message-text {
   width: 100%;
   height: 100px;
   background: #000000d9;
   color: red;
   font-size: 2rem;
   font-weight: bold;
   text-shadow: 0px 0px 10px grey;
   margin: 25px 0px;
   box-shadow: 0px 0px 10px 10px #000000d9;
}

#battleBarsWrapper {
   position: relative;
   bottom: calc(-1 * var(--grid-cell));
   left: 0px;
   width: 100%;
   height: calc(100% + 3rem);
   z-index: 1;
   padding: 0px 5px;
   border-radius: 2px;
   cursor: var(--pointer);
}

#battleBarsWrapper .cooldown {
   height: 5px;
   border: none;
   background: transparent
}

#battleBarsWrapper .cooldown .progress {
   background: white;
}

#expWrapper {
   height: 30px;
   margin: 1rem 0px;
}

#expWrapper .progress-bar {
   background: orange !important;
}

#expWrapper .progress-bar .progress {
   background: yellow !important;
}

#expWrapper .progress-bar .progress-text {
   color: black !important;
}



.Avatar.stand-animation {
   -webkit-animation: stand-animation 2s ease-in-out infinite;
   ;
   animation: stand-animation 2s ease-in-out infinite;
   ;
}

.Avatar.walk-animation {
   -webkit-animation: walk-animation .5s ease-in-out infinite;
   ;
   animation: walk-animation .5s ease-in-out infinite;
   ;
}


@-webkit-keyframes stand-animation {

   from,
   50%,
   to {
      transform: scaleY(1) translate(0, 0);
   }

   25%,
   75% {
      transform: scaleY(.97) translate(0, 2.5%);
   }
}

@-webkit-keyframes walk-animation {

   from,
   50%,
   to {
      transform: rotate(0deg) translate(0, 0);
   }

   25%,
   75% {
      transform: rotate(0deg) translate(0, -4px);
   }
}



.weaponchar_div {
   position: absolute;
   z-index: 1;
   bottom: calc(50% - 12px);
   left: -5px;
   transform: scale(3) rotate(-80deg);
   z-index: 10;
}

.shieldchar_div {
   position: absolute;
   z-index: 1;
   top: calc(50% + 8px);
   right: -5px;
   transform: scale(3) rotate(2deg);
   z-index: 10;
}


.front-panel-wrapper {
   width: 100%;
   height: 100%;
   position: fixed;
   left: 0px;
   top: 0px;
   z-index: 999;
}

.front-panel {
   text-transform: capitalize;
   min-width: 40%;
   min-height: 200px;
}

.item-panel {
   border-radius: 5px;
   background: #222020;
   border: solid #fff;
   border-left: none;
   border-right: none;
   color: white;
   height: 4rem;
   font-size: 2rem;
   line-height: 2rem;
}

.front-panel .cursor {
   position: absolute;
   bottom: 3rem;
   transform: scale(3);
}

.panel-card {
   border-radius: 5px;
   background: #222020;
   border: solid #fff;
   border-left: none;
   border-right: none;
   color: white;
   min-height: 2rem;
   font-size: 2rem;
   line-height: 2rem;
}

.popover {
   position: fixed;
   top: 0px;
   left: 0px;
   z-index: 999;
}

.float-panel-card {
   border-radius: 5px;
   background: #222020;
   border: solid #fff;
   border-left: none;
   border-right: none;
   color: white;
   min-height: 2rem;
   padding: 5px;
   box-shadow: 0px 2px 14px 6px #4b4b4b;
}



.btn {
   background: #fff6d3;
   border: solid #8e2f15;
   border-radius: 5px;
   box-shadow: 0 2px 2px 0px #da7a34;
   font-family: 'Arcade Normal';
   color: #444;
   padding: 5px;
   cursor: var(--pointer);
}

.btn:after {
   width: 100%;
   height: 100%;
   border: thin solid #8e2f15;
   margin: 5px;
}

.btn:active {
   margin-top: 2px;
   color: #fff;
   background: #8e2f15;
   box-shadow: 0 1px 1px 0px #fff6d3;
   margin: 5px;
}

.char-selection-panel {
   height: 400px;
   width: 250px;
   float: left;
   margin: 10px;
}

.skill-selection-panel {
   height: 300px;
   width: 200px;
   float: left;
   margin-right: 10px;
}

.stats-levelup-panel {
   width: 300px;
}

.stats-levelup-panel .btn-add-stat {
   width: 2rem;
   height: 2rem;
   line-height: 1.1rem;
}

.stats-levelup-panel .row {
   border: thin solid white;
   border-left: none;
   border-right: none;
   height: 2.5rem;
}

.stats-levelup-panel .col {
   height: 100%;
}

.shadow-text {
   text-shadow: 1px 1px 2px #0d0000;
}

.life_text {
   text-shadow: 1px 2px 1px #0d0000;
   color: white;
}

.char-action-bar-wrapper {
   width: 100%;
   position: absolute;
   top: 50%;
   z-index: 19;
   border: 5px solid black;
   box-shadow: rgb(128 128 128 / 48%) 0px 0px 5px 5px;

}

#BattleControls {
   position: fixed;
   top: 3rem;
   right: 300px;
   background-color: #0d0000;
   border: white solid;
   padding: 5px;
   z-index: 10;
}

#BattleConsole {
   position: fixed;
   top: 6rem;
   left: 2rem;
   background-color: #0d0000;
   border: white solid;
   padding: 5px;
   z-index: 10;
   color: white;
   width: 300px;
   max-height: 200px;
   transition: all .5s;
}

#BattleConsole .console-log .line:first-child {
   border-bottom: thin solid white;
   margin-bottom: 1px;
}

.map-item {
   position: absolute;
}

#trinketszone {
   position: absolute;
   bottom: -2rem;
   min-width: 3rem;
   left: 2rem;
   height: 2rem;
   z-index: 3;

}



.particle {
   width: 5px;
   height: 5px;
   background-color: white;
   filter: brightness(200) drop-shadow(1px 0px 10px white);
}

.particle.ms {
   width: 25px;
   height: 25px;
}


.particle.dust {
   border-radius: 50%;
}


#final-m,
#intro-text {
   color: yellow;
   position: fixed;
   font-size: 2rem;
   top: -100px;
   text-align: center;
}

#main-intro {
   background: pink;
}