:root {
    --pixel-size: 2px;
   --grid-cell: calc( var(--pixel-size) * 16);
   --bg: #d5a989;
}

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

html, body {
    height: 95%;
 }

body {
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
 }

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

.frame {
    /* This is just for Pen decoration */
    width: calc(var(--pixel-size) * 176);
    height: calc(var(--pixel-size) * 144);
    outline: var(--pixel-size) solid #9e6c49;
    z-index:1; 
    position:relative;
 }
 
 .camera {
    width: calc(var(--pixel-size) * 176);
    height: calc(var(--pixel-size) * 144);
    overflow: hidden;
    position: absolute;
 }

.map{
    image-rendering: pixelated;
    background-image: url("Room2.gif");
    background-size: 100%;
    width: calc(11 * var(--grid-cell));
    height: calc(9 * var(--grid-cell));
    position: relative;
}


.character {
    width: calc( var(--grid-cell)* 1.8 );
    height: calc( var(--grid-cell)* 1.8 );
    position: absolute;
    overflow:hidden;
    z-index: 2; /* Ensure the character is below the top layer */
}

.shadow {
    width: calc( var(--grid-cell)* 2 );
    height: calc( var(--grid-cell)* 2 );
    position: absolute;
    left:0;
    top:0;
    background: url("https://assets.codepen.io/21542/DemoRpgCharacterShadow.png") no-repeat no-repeat;
    background-size: 100%;
 }

.character_spritesheet {
    position: absolute;
    background: url("character_sheet.png") no-repeat no-repeat;
    background-size: 100%;
    width: calc( var(--grid-cell)* 8 );
   height: calc( var(--grid-cell)* 8 );
 }

 .top_map {
    background-image: url("Room3.gif");
    background-size: 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}



 .character[facing="right"] .character_spritesheet {
    background-position-y: calc( var(--pixel-size) * -32 );
 }
 .character[facing="up"] .character_spritesheet {
    background-position-y: calc( var(--pixel-size) * -64 );
 }
 .character[facing="left"] .character_spritesheet {
    background-position-y: calc( var(--pixel-size) * -96 );
 }
 .character[walking="true"] .character_spritesheet {
    animation: walkAnimation 0.6s steps(4) infinite; 
 }

 
 @keyframes walkAnimation {
   from {
     transform: translate3d(0%,0%,0);
   }
   to {
     transform: translate3d(-100%,0%,0);
   }
 }

















 .dpad {
    position:absolute;
    right: calc(var(--pixel-size) * 2);
    bottom: calc(var(--pixel-size) * 2);
    width: calc(var(--pixel-size) * 37);
    height: calc(var(--pixel-size) * 38);
    z-index: 5;
 }
 .dpad-button {
    appearance:none;
    outline:0;
    border:0;
    background:transparent;
    padding:0;
    cursor:pointer;
 }
 .dpad-button svg {
    display:block;
    height: calc(var(--pixel-size) * 13);
 }
 
 .dpad-button.pressed .Arrow_arrow-inset { stroke:#c9493d; }
 .dpad-button.pressed .Arrow_arrow-body { stroke:#c3392c; }
 
 .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;
 }
 
 .dpad {
    user-select:none;
 }
 
 
 .corner_topleft,
 .corner_topright,
 .corner_bottomleft,
 .corner_bottomright {
    position: absolute;
    width: var(--pixel-size);
    height: var(--pixel-size);
    background: var(--bg);
    z-index:2;
 }
 
 .corner_topleft {
    top: calc(var(--pixel-size) * -1);
    left: calc(var(--pixel-size) * -1);
 }
 .corner_topright {
    top: calc(var(--pixel-size) * -1);
    right: calc(var(--pixel-size) * -1);
 }
 .corner_bottomleft {
    bottom: calc(var(--pixel-size) * -1);
    left: calc(var(--pixel-size) * -1);
 }
 .corner_bottomright {
    bottom: calc(var(--pixel-size) * -1);
    right: calc(var(--pixel-size) * -1);
 }