style.css

body {
  font-family: sans-serif;
  font-size: 14px;
}

.metagrid {
  display: grid;
  width: auto;
  height: auto;
  grid-template-columns: minmax(120px, 160px) auto minmax(120px, 160px);
  grid-auto-rows: minmax(80px, 120px) auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  grid-auto-rows: minmax(80px, auto);
}

.cornerCell {
  //background-color: red;
}

.contrastSettings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  grid-auto-rows: minmax(80px, 240px) auto;
}

.hueSettings {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
  grid-template-columns: 1fr;
}

.addHue {
  grid-column: 1 / 2;
}

.swatch {
  //width: 200px;
  //height: 120px;
  //background-color: rgb(255, 255, 255);
  border-radius: 2px;
  padding: 8px;
}

textarea {
  width: 100%;
  max-width: 440px;
  height: 200px;
}


p {
  margin: 0px;
}

.swatchText {
  font-size: 0.6875rem;
  line-height: 1rem;
  opacity: 100%;
}

.nameInput {
  width: auto;
  minwidth: 80px;
  maxwidth: 160px;
}

.ack {
  opacity: 0%;
  transition: opacity 250ms ease;
  background-color: black;
  color: white;
  font-size: 0.75rem;
  padding: 4px;
  border-radius: 2px;
  float: right;
  //top: 8px;
  //right: 8px;
}