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

.pixelify-sans {
  font-family: "Pixelify Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

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

html, body {
  height: 100%;
  overflow: hidden;
  font-family: "Pixelify Sans", sans-serif;
}

body {
  background: var(--bg);
  /* display: flex;
  align-items: center;
  justify-content: center; */
  background-image: url(../media/space_back.gif);
}
#border{
    position: relative;
    width: calc(var(--pixel-size) * 900);
    height: calc(var(--pixel-size) * 600);
    background-color: white;
    background-image: url(../media/floor.jpg);
    background-size: calc(var(--pixel-size) * 50);
    border: solid #000000;
}

#control{
    position: absolute;
    top: 0px;
    background-color: white;
    border: 1px solid black;
    padding: 10px;
    border-radius: 30px;
    text-decoration: none;
    color: #000000;
}

#fence{
  position: absolute;
  width:calc(var(--pixel-size) * 800);
  height: calc(var(--pixel-size) * 500);
    border: 100px solid transparent;
  border-image: url(../media/fence.png) 40% round;
  z-index: 10;
}

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


.character {
  width: calc(var(--grid-cell) * 2);
  height: calc(var(--grid-cell) * 2);
  position: absolute;
  overflow: hidden;
}

.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("../media/Lou.png") no-repeat no-repeat;
  background-size: 100%;
  width: calc(var(--grid-cell) * 4);
  height: calc(var(--grid-cell) * 6);
}

.character[facing=right] .character_spritesheet {
    background-position-y: calc(var(--pixel-size) * -66);
  
}

.character[facing=up] .character_spritesheet {
  background-position-y: calc(var(--pixel-size) * -32);  
  
}

.character[facing=left] .character_spritesheet {
  background-position-y: calc(var(--pixel-size) * -98);
}

.character[walking=true] .character_spritesheet {
  animation: walkAnimation 0.6s steps(2) infinite;
}

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

#level2{
  z-index: 20;
  position: fixed;
  top: 10px;
}
#dialog {
  position: fixed;
  background-image: url('../media/text.png');
  background-repeat: no-repeat;
  background-size:calc(var(--pixel-size) * 150) ;
  width: calc(var(--pixel-size) * 150);
  height: calc(var(--pixel-size) * 80);
  z-index: 30;
  text-align: center;
  align-content: center;

}
#dirt{
  position: absolute;
    width: 500px; 
    height: 100px; 
    top: 400px; 
    left: 1000px;
    background-image: url(../media/dirt.png);
    background-repeat: repeat;
    background-size: 100px;
    z-index: 40;
}
#market{ 
  position: absolute;
    width: calc(var(--pixel-size) * 800);
    height: 300px; 
    top: 800px; 
    left: 150px;
    background-image: url(../media/market-removebg-preview.png);
    background-repeat: repeat;
    background-size: 650px;
}

#qr{
  position: relative;
  left: calc(50% - 400px);
  top: calc(50% - 400px);
}
#terug{
  background-color: aliceblue;
  padding: 20px;
  text-decoration: none;
  color: #000000;
}