body {
  margin: 0;
  display: flex;
  flex-direction: column;
}
label {
  user-select: none;
}

#canvi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  height: 85vh;
  flex-shrink: 1;
}

#drawContainer {
  display: grid;
  justify-items: center;
  align-items: center;
  overflow: scroll;
  resize: horizontal;
}

#drawArea {
  border: 4px black solid;  
  width: calc(64px * var(--scale));
  height: calc(64px * var(--scale));
  margin: 16px;
  background-image: url("./checkerboard.png");
  background-size: calc(var(--checkerScale) * var(--scale) * 1px);
  image-rendering: pixelated;
  display: grid;
}
#drawArea > canvas {
  grid-row: 1; grid-column: 1;
  width: calc(64px * var(--scale));
  height: calc(64px * var(--scale));
}
#drawCanvasOverlay {
  pointer-events: none;
}

.controls-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.edit-controls > label {
  padding: 0 12px;
}
.edit-controls > button {
  border: lightgray 2px outset;
}
.edit-controls > button.selected {
  background-color: aqua;
}
#selection-info {
  float: right;
  margin-right: 8px;
}

#model-visibility {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: fit-content;
}

.instructions {
  padding: 0 12px;
}

#load-skin h1 {
  margin: 0;
}
#load-skin[open] {
  display: grid;
  grid-row-gap: 8px;
}