body {
  display: grid;
  grid-template-columns: min(100vh, 100vh) min(100vh, 100vh);
  grid-template-rows: 80vh;
  background-color: black;
  font-family: monospace;
}

#v-div-1 {
  display: none;
}

canvas {
  cursor: crosshair;
}

#textureCanvas {
  width: 50vw;
  height: 50vw;
  background-color: black;
  visibility: none;
}

#mainCanvas {
  width: min(100vh, 100vh);
  height: min(100vh, 100vh);
}

#penCanvas {
  width: 0vw;
  height: 30vh;
}

#v-div-0 {
  display: grid;
  grid-template-rows: 16em calc(80vh - 16em);
}

#v-div-1 {
  display: grid;
  grid-template-rows: 3em 13em;
  height: 16em;
}

#rendering-options {
  height: 16em;
}

#h-div-1 {
  display: grid;
  grid-template-columns: 10vw 0vw;
}

#model-select {
  height: 3em;
  width: 10vw;
}

#penCanvas {
  width: 10vw;
  height: 16em;
}

fieldset {
  border: none;
}

#rendering-options label,
legend h3 {
  height: 2em;
  flex: 0 0 auto;
  color: grey;
}

legend {
  color: grey;
  height: 2em;
  flex: 0 0 auto;
  font-size: large;
  padding: 1em 0 0 0;
}

#rendering-options checkbox {
  height: 2em;
  flex: 0 0 auto;
  color: grey;

}

#canvas-controls {
  display: grid;
  grid-template-columns: 20vh 10vh;
}

#paletteCanvas {
  width: 30vw;
  height: calc(80vh - 16em);
  background-color: orange;
}

#v-div-2 {
  display: grid;
  width: 24vw;
  height: 26vh;
  grid-template-rows: 24vw 2vw;
}

#buttons {
  width: 24vw;
  display: grid;
  grid-template-columns: repeat(8, 2vw);
  grid-template-rows: repeat(2, 2vw);
}

#buttons .color,
#buttons .action {
  width: 2vw;
  height: 2vw;

  /* simulated bevel */
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.6),
    /* top-left highlight */
    inset -1px -1px 0 rgba(0, 0, 0, 0.3);
  /* bottom-right shadow */
}

.color-1 {
  background-color: #FF4C4C;
}

/* bright red */
.color-2 {
  background-color: #800000;
}

/* dark red */
.color-3 {
  background-color: #FF94C2;
}

/* pastel pink */
.color-4 {
  background-color: #FF944D;
}

/* bright orange */
.color-5 {
  background-color: #FFEB99;
}

/* pastel yellow */
.color-6 {
  background-color: #FFEB3B;
}

/* bright yellow */
.color-7 {
  background-color: #AEEA00;
}

/* bright lime */
.color-8 {
  background-color: #C8FACC;
}

/* pastel green */
.color-9 {
  background-color: #00C853;
}

/* bright green */
.color-10 {
  background-color: #006400;
}

/* dark green */
.color-11 {
  background-color: #B2EBF2;
}

/* pastel cyan/blue */
.color-12 {
  background-color: #448AFF;
}

/* bright blue */
.color-13 {
  background-color: #003399;
}

/* dark blue */
.color-14 {
  background-color: #7C4DFF;
}

/* bright violet */
.color-15 {
  background-color: #F8BFFF;
}

/* pastel violet/pink */
.color-16 {
  background-color: #3C1A78;
}

/* dark violet */