/* CSS files add styling rules to your content */
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  margin: 1em;
}

.app {
  display: grid;
  grid: "controls palette" 1fr "debug debug" auto / auto 1fr;
  gap: 1rem;
  min-height: calc(100svh - 4rem);
}

@media screen and (max-width: 640px) {
  .app {
    grid: "controls" auto "palette" auto "debug" auto / 1fr;
  }
}

.controls {
  display: grid;
  grid-template-columns: auto 1fr 4ch;
  align-items: start;
  align-self: start;
  gap: 0.5rem;
  overflow: hidden;
  grid-area: controls;
}

.val-preview {
  font-family: monospace;
}

label {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1/-1;
  align-items: center;
  gap: 0.5em;
  padding: 0.25rem 0;
}

input {
  min-width: auto;
  width: 100px;
}
input[type="range"] {
  width: 100%;
  min-width: 20px;
}
.output {
  grid-area: palette;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  grid-auto-rows: 1fr;
}

.color {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: normal 13px monospace;
  padding: 2rem;
}

.debug {
  grid-area: debug;
}

canvas {
  max-width: 256px;
}