/* stylesheet */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  image-rendering: pixelated;
}

body  {
  background-color:#000;
  height: 100vh;
}

#bg_img {
  height: 100vh;
  width: 100vw;
  position: fixed;
  transform: scale(4);
}

canvas {
  width: auto;
  max-height: 100%;
  display: block;
  background-color:rgb(127,127,127);
}

@media(max-height: calc(256px * 12)) {
  body {
    background-size: calc(256px * 11);
  }
  canvas {
    outline: solid 11px #000;
    height: calc(256px * 11);
    margin: calc(50vh - 128px * 11) auto auto auto;
  }
}

@media(max-height: calc(256px * 11)) {
  body {
    background-size: calc(256px * 10);
  }
  canvas {
    outline: solid 10px #000;
    height: calc(256px * 10);
    margin: calc(50vh - 128px * 10) auto auto auto;
  }
}

@media(max-height: calc(256px * 10)) {
  body {
    background-size: calc(256px * 9);
  }
  canvas {
    outline: solid 9px #000;
    height: calc(256px * 9);
    margin: calc(50vh - 128px * 9) auto auto auto;
  }
}

@media(max-height: calc(256px * 9)) {
  body {
    background-size: calc(256px * 8);
  }
  canvas {
    outline: solid 8px #000;
    height: calc(256px * 8);
    margin: calc(50vh - 128px * 8) auto auto auto;
  }
}

@media(max-height: calc(256px * 8)) {
  body {
    background-size: calc(256px * 7);
  }
  canvas {
    outline: solid 7px #000;
    height: calc(256px * 7);
    margin: calc(50vh - 128px * 7) auto auto auto;
  }
}

@media(max-height: calc(256px * 7)) {
  body {
    background-size: calc(256px * 6);
  }
  canvas {
    outline: solid 6px #000;
    height: calc(256px * 6);
    margin: calc(50vh - 128px * 6) auto auto auto;
  }
}

@media(max-height: calc(256px * 6)) {
  body {
    background-size: calc(256px * 5);
  }
  canvas {
    outline: solid 5px #000;
    height: calc(256px * 5);
    margin: calc(50vh - 128px * 5) auto auto auto;
  }
}

@media(max-height: calc(256px * 5)) {
  body {
    background-size: calc(256px * 4);
  }
  canvas {
    outline: solid 4px #000;
    height: calc(256px * 4);
    margin: calc(50vh - 128px * 4) auto auto auto;
  }
}

@media(max-height: calc(256px * 4)) {
  body {
    background-size: calc(256px * 3);
  }
  canvas {
    outline: solid 3px #000;
    height: calc(256px * 3);
    margin: calc(50vh - 128px * 3) auto auto auto;
  }
}

@media(max-height: calc(256px * 3)) {
  body {
    background-size: calc(256px * 2);
  }
  canvas {
    outline: solid 2px #000;
    height: calc(256px * 2);
    margin: calc(50vh - 128px * 2) auto auto auto;
  }
}

@media(max-height: calc(256px * 2)) {
  body {
    background-size: calc(256px * 1);
  }
  canvas {
    outline: solid 1px #000;
    height: calc(256px * 1);
    margin: calc(50vh - 128px * 1) auto auto auto;
  }
}