html, body {
  background: gray;
  margin:0;
  padding:0;
  inset: 0;
  justify-content: center;
}

* {
  image-rendering: pixelated;
}

h1 {
  margin:0;
  padding:0;
  color: blue;
  text-align: center;
}

canvas {
  padding: 0;
  margin: auto;
  display: block;
  image-rendering: pixelated;
  background-color: white;
}

.tiles {
  inset: 0;
  display: block;
  position: absolute;
  width: 100px;
  height: 100%;
  background-color: lightblue;
}

button, .tile {
  margin: 10px;
  width: 80px;
  height: 80px;
  background-size: 640px 640px;
}

button:nth-child(7) {
  background-image: url('./assets/tilemap.png');
  background-position: -0px -0px;
}

button:nth-child(8) {
  background-image: url('./assets/tilemap.png');
  background-position: -80px -0px;
}

button:nth-child(9) {
  background-image: url('./assets/tilemap.png');
  background-position: -160px -0px;
}

button:nth-child(10) {
  background-image: url('./assets/tilemap.png');
  background-position: -240px -0px;
}

.txt-btn {
  color: white;
  font-family: 'Courier New', Courier, monospace;
  font-style: italic;

  text-align: center;
}

#save {
  background-color: red;
}

#triggerLoadLevel {
  background-color: blue;
}

#triggerLoadTileMap {
  background-color: green;
}

#clear {
  background-color: black;
}

.loader {
  display: none;
}

#editor { 
  position: absolute;
  inset: 0;
  top: 70%;
  bottom: 20px;
  width: 50%;
  height: 30%;
  padding: 0;
  margin: auto;
  display: block;
}

.options {
  position: absolute;
  right: 10px;
  top: 20px;
  width: 300px;
  height: 600px;
  background-color: rgba(255, 255, 255, 0.5);
}