@font-face {
  font-family: Inconsolata;
  src: url(d436e6cbc31e78bb4421.ttf);
  font-display: swap;
}

body, input {
  font-family: Inconsolata, monospace;
}

/* Mobile first */
html, body {
  height: 100vh;
  max-height: 100vh;
  width: 100vw;
}

body {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: stretch;
  margin: 0;
}

h1 {
	font-size: 2.5rem;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: 0.25em;
	margin-right: 0.25em;
}

.main {
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  align-items: stretch;
  grid-row-gap: 0.25em;
}

.footer {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-items: center;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.canvas-container {
  width: 100%;
  height: 100%;
  display: grid;
  justify-items: center;
  align-items: center;
}

#canvas {
  cursor: crosshair;
}

.controls {
  width: calc(100% - 2em);
  display: grid;
  grid-template-areas: "horiz horiz"
                       "lab rgb";
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
}

.controls-horiz {
  grid-area: horiz;
  width: 100%;
  display: grid;
  grid-template-areas: "slider swatch rgbhex";
  grid-template-columns: 1fr 4em 10ch;
  grid-column-gap: 0.25em;
  align-items: center;
}

#slider {
  grid-area: slider;
}

#swatch {
  grid-area: swatch;
  width: 4em;
  height: 4em;
  background-color: #fabd01;
}

#rgbhex {
  grid-area: rgbhex;
  height: 1.1em;
}

.controls-cie {
  grid-area: lab;
}

.controls-rgb {
  grid-area: rgb;
}

.controls-cie, .controls-rgb {
  display: grid;
  grid-template-areas:
    "l1 f1"
    "l2 f2"
    "l3 f3";
  grid-template-columns: 3ch 10ch;
}

#lab-field1-label, #rgb-field1-label {
  grid-area: l1;
}

#lab-field1, #rgb-field1 {
  grid-area: f1;
}

#lab-field2-label, #rgb-field2-label {
  grid-area: l2;
}

#lab-field2, #rgb-field2 {
  grid-area: f2;
}

#lab-field3-label, #rgb-field3-label {
  grid-area: l3;
}

#lab-field3, #rgb-field3 {
  grid-area: f3;
}

/* Mobile large, 620px */
@media screen and (min-width: 38.75em) {
}

/* Tablet Small 740px */
@media screen and (min-width: 46.25em) {
  h1 {
    font-size: 2.0em;
  }
}

/* 16.3 Tablet Large 880px */
@media screen and (min-width: 55em) {

}

/* Desktop Small 955px */
@media screen and (min-width: 59.6875em) {

}

/* Desktop Medium 1100px */
@media screen and (min-width: 68.75em) {

}

/* Desktop Large 1240px */
@media screen and (min-width: 77.5em) {

}

/* Desktop X-Large 1403px */
@media screen and (min-width: 87.6875em) {

}


/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbi5jc3MiLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSx3QkFBd0I7RUFDeEIsNENBQXNFO0VBQ3RFLGtCQUFrQjtBQUNwQjs7QUFFQTtFQUNFLG1DQUFtQztBQUNyQzs7QUFFQSxpQkFBaUI7QUFDakI7RUFDRSxhQUFhO0VBQ2IsaUJBQWlCO0VBQ2pCLFlBQVk7QUFDZDs7QUFFQTtFQUNFLGFBQWE7RUFDYiw0QkFBNEI7RUFDNUIsb0JBQW9CO0VBQ3BCLFNBQVM7QUFDWDs7QUFFQTtDQUNDLGlCQUFpQjtDQUNqQixpQkFBaUI7Q0FDakIsb0JBQW9CO0NBQ3BCLG1CQUFtQjtDQUNuQixvQkFBb0I7QUFDckI7O0FBRUE7RUFDRSxhQUFhO0VBQ2IsaUNBQWlDO0VBQ2pDLHFCQUFxQjtFQUNyQixvQkFBb0I7RUFDcEIsb0JBQW9CO0FBQ3RCOztBQUVBO0VBQ0UsYUFBYTtFQUNiLHFDQUFxQztFQUNyQyxxQkFBcUI7RUFDckIsaUJBQWlCO0VBQ2pCLG9CQUFvQjtBQUN0Qjs7QUFFQTtFQUNFLFdBQVc7RUFDWCxZQUFZO0VBQ1osYUFBYTtFQUNiLHFCQUFxQjtFQUNyQixtQkFBbUI7QUFDckI7O0FBRUE7RUFDRSxpQkFBaUI7QUFDbkI7O0FBRUE7RUFDRSx1QkFBdUI7RUFDdkIsYUFBYTtFQUNiO2dDQUM4QjtFQUM5Qiw2QkFBNkI7RUFDN0IsOEJBQThCO0VBQzlCLG1CQUFtQjtFQUNuQixxQkFBcUI7QUFDdkI7O0FBRUE7RUFDRSxnQkFBZ0I7RUFDaEIsV0FBVztFQUNYLGFBQWE7RUFDYiwyQ0FBMkM7RUFDM0MsbUNBQW1DO0VBQ25DLHVCQUF1QjtFQUN2QixtQkFBbUI7QUFDckI7O0FBRUE7RUFDRSxpQkFBaUI7QUFDbkI7O0FBRUE7RUFDRSxpQkFBaUI7RUFDakIsVUFBVTtFQUNWLFdBQVc7RUFDWCx5QkFBeUI7QUFDM0I7O0FBRUE7RUFDRSxpQkFBaUI7RUFDakIsYUFBYTtBQUNmOztBQUVBO0VBQ0UsY0FBYztBQUNoQjs7QUFFQTtFQUNFLGNBQWM7QUFDaEI7O0FBRUE7RUFDRSxhQUFhO0VBQ2I7OztXQUdTO0VBQ1QsK0JBQStCO0FBQ2pDOztBQUVBO0VBQ0UsYUFBYTtBQUNmOztBQUVBO0VBQ0UsYUFBYTtBQUNmOztBQUVBO0VBQ0UsYUFBYTtBQUNmOztBQUVBO0VBQ0UsYUFBYTtBQUNmOztBQUVBO0VBQ0UsYUFBYTtBQUNmOztBQUVBO0VBQ0UsYUFBYTtBQUNmOztBQUVBLHdCQUF3QjtBQUN4QjtBQUNBOztBQUVBLHVCQUF1QjtBQUN2QjtFQUNFO0lBQ0UsZ0JBQWdCO0VBQ2xCO0FBQ0Y7O0FBRUEsNEJBQTRCO0FBQzVCOztBQUVBOztBQUVBLHdCQUF3QjtBQUN4Qjs7QUFFQTs7QUFFQSwwQkFBMEI7QUFDMUI7O0FBRUE7O0FBRUEseUJBQXlCO0FBQ3pCOztBQUVBOztBQUVBLDJCQUEyQjtBQUMzQjs7QUFFQSIsInNvdXJjZXMiOlsid2VicGFjazovL2NvbG9ycGlja2VyLy4vc3JjL3N0eWxlLmNzcyJdLCJzb3VyY2VzQ29udGVudCI6WyJAZm9udC1mYWNlIHtcclxuICBmb250LWZhbWlseTogSW5jb25zb2xhdGE7XHJcbiAgc3JjOiB1cmwoXCIuL2ZvbnRzL0luY29uc29sYXRhL0luY29uc29sYXRhLVZhcmlhYmxlRm9udF93ZHRoLHdnaHQudHRmXCIpO1xyXG4gIGZvbnQtZGlzcGxheTogc3dhcDtcclxufVxyXG5cclxuYm9keSwgaW5wdXQge1xyXG4gIGZvbnQtZmFtaWx5OiBJbmNvbnNvbGF0YSwgbW9ub3NwYWNlO1xyXG59XHJcblxyXG4vKiBNb2JpbGUgZmlyc3QgKi9cclxuaHRtbCwgYm9keSB7XHJcbiAgaGVpZ2h0OiAxMDB2aDtcclxuICBtYXgtaGVpZ2h0OiAxMDB2aDtcclxuICB3aWR0aDogMTAwdnc7XHJcbn1cclxuXHJcbmJvZHkge1xyXG4gIGRpc3BsYXk6IGdyaWQ7XHJcbiAgZ3JpZC10ZW1wbGF0ZS1yb3dzOiAxZnIgYXV0bztcclxuICBhbGlnbi1pdGVtczogc3RyZXRjaDtcclxuICBtYXJnaW46IDA7XHJcbn1cclxuXHJcbmgxIHtcclxuXHRmb250LXNpemU6IDIuNXJlbTtcclxuXHRtYXJnaW4tdG9wOiAwLjVlbTtcclxuXHRtYXJnaW4tYm90dG9tOiAwLjVlbTtcclxuXHRtYXJnaW4tbGVmdDogMC4yNWVtO1xyXG5cdG1hcmdpbi1yaWdodDogMC4yNWVtO1xyXG59XHJcblxyXG4ubWFpbiB7XHJcbiAgZGlzcGxheTogZ3JpZDtcclxuICBncmlkLXRlbXBsYXRlLXJvd3M6IGF1dG8gMWZyIGF1dG87XHJcbiAganVzdGlmeS1pdGVtczogY2VudGVyO1xyXG4gIGFsaWduLWl0ZW1zOiBzdHJldGNoO1xyXG4gIGdyaWQtcm93LWdhcDogMC4yNWVtO1xyXG59XHJcblxyXG4uZm9vdGVyIHtcclxuICBkaXNwbGF5OiBncmlkO1xyXG4gIGdyaWQtdGVtcGxhdGUtY29sdW1uczogYXV0byBhdXRvIGF1dG87XHJcbiAganVzdGlmeS1pdGVtczogY2VudGVyO1xyXG4gIG1hcmdpbi10b3A6IDAuNWVtO1xyXG4gIG1hcmdpbi1ib3R0b206IDAuNWVtO1xyXG59XHJcblxyXG4uY2FudmFzLWNvbnRhaW5lciB7XHJcbiAgd2lkdGg6IDEwMCU7XHJcbiAgaGVpZ2h0OiAxMDAlO1xyXG4gIGRpc3BsYXk6IGdyaWQ7XHJcbiAganVzdGlmeS1pdGVtczogY2VudGVyO1xyXG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XHJcbn1cclxuXHJcbiNjYW52YXMge1xyXG4gIGN1cnNvcjogY3Jvc3NoYWlyO1xyXG59XHJcblxyXG4uY29udHJvbHMge1xyXG4gIHdpZHRoOiBjYWxjKDEwMCUgLSAyZW0pO1xyXG4gIGRpc3BsYXk6IGdyaWQ7XHJcbiAgZ3JpZC10ZW1wbGF0ZS1hcmVhczogXCJob3JpeiBob3JpelwiXHJcbiAgICAgICAgICAgICAgICAgICAgICAgXCJsYWIgcmdiXCI7XHJcbiAgZ3JpZC10ZW1wbGF0ZS1yb3dzOiBhdXRvIGF1dG87XHJcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAxZnIgMWZyO1xyXG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XHJcbiAganVzdGlmeS1pdGVtczogY2VudGVyO1xyXG59XHJcblxyXG4uY29udHJvbHMtaG9yaXoge1xyXG4gIGdyaWQtYXJlYTogaG9yaXo7XHJcbiAgd2lkdGg6IDEwMCU7XHJcbiAgZGlzcGxheTogZ3JpZDtcclxuICBncmlkLXRlbXBsYXRlLWFyZWFzOiBcInNsaWRlciBzd2F0Y2ggcmdiaGV4XCI7XHJcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAxZnIgNGVtIDEwY2g7XHJcbiAgZ3JpZC1jb2x1bW4tZ2FwOiAwLjI1ZW07XHJcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcclxufVxyXG5cclxuI3NsaWRlciB7XHJcbiAgZ3JpZC1hcmVhOiBzbGlkZXI7XHJcbn1cclxuXHJcbiNzd2F0Y2gge1xyXG4gIGdyaWQtYXJlYTogc3dhdGNoO1xyXG4gIHdpZHRoOiA0ZW07XHJcbiAgaGVpZ2h0OiA0ZW07XHJcbiAgYmFja2dyb3VuZC1jb2xvcjogI2ZhYmQwMTtcclxufVxyXG5cclxuI3JnYmhleCB7XHJcbiAgZ3JpZC1hcmVhOiByZ2JoZXg7XHJcbiAgaGVpZ2h0OiAxLjFlbTtcclxufVxyXG5cclxuLmNvbnRyb2xzLWNpZSB7XHJcbiAgZ3JpZC1hcmVhOiBsYWI7XHJcbn1cclxuXHJcbi5jb250cm9scy1yZ2Ige1xyXG4gIGdyaWQtYXJlYTogcmdiO1xyXG59XHJcblxyXG4uY29udHJvbHMtY2llLCAuY29udHJvbHMtcmdiIHtcclxuICBkaXNwbGF5OiBncmlkO1xyXG4gIGdyaWQtdGVtcGxhdGUtYXJlYXM6XHJcbiAgICBcImwxIGYxXCJcclxuICAgIFwibDIgZjJcIlxyXG4gICAgXCJsMyBmM1wiO1xyXG4gIGdyaWQtdGVtcGxhdGUtY29sdW1uczogM2NoIDEwY2g7XHJcbn1cclxuXHJcbiNsYWItZmllbGQxLWxhYmVsLCAjcmdiLWZpZWxkMS1sYWJlbCB7XHJcbiAgZ3JpZC1hcmVhOiBsMTtcclxufVxyXG5cclxuI2xhYi1maWVsZDEsICNyZ2ItZmllbGQxIHtcclxuICBncmlkLWFyZWE6IGYxO1xyXG59XHJcblxyXG4jbGFiLWZpZWxkMi1sYWJlbCwgI3JnYi1maWVsZDItbGFiZWwge1xyXG4gIGdyaWQtYXJlYTogbDI7XHJcbn1cclxuXHJcbiNsYWItZmllbGQyLCAjcmdiLWZpZWxkMiB7XHJcbiAgZ3JpZC1hcmVhOiBmMjtcclxufVxyXG5cclxuI2xhYi1maWVsZDMtbGFiZWwsICNyZ2ItZmllbGQzLWxhYmVsIHtcclxuICBncmlkLWFyZWE6IGwzO1xyXG59XHJcblxyXG4jbGFiLWZpZWxkMywgI3JnYi1maWVsZDMge1xyXG4gIGdyaWQtYXJlYTogZjM7XHJcbn1cclxuXHJcbi8qIE1vYmlsZSBsYXJnZSwgNjIwcHggKi9cclxuQG1lZGlhIHNjcmVlbiBhbmQgKG1pbi13aWR0aDogMzguNzVlbSkge1xyXG59XHJcblxyXG4vKiBUYWJsZXQgU21hbGwgNzQwcHggKi9cclxuQG1lZGlhIHNjcmVlbiBhbmQgKG1pbi13aWR0aDogNDYuMjVlbSkge1xyXG4gIGgxIHtcclxuICAgIGZvbnQtc2l6ZTogMi4wZW07XHJcbiAgfVxyXG59XHJcblxyXG4vKiAxNi4zIFRhYmxldCBMYXJnZSA4ODBweCAqL1xyXG5AbWVkaWEgc2NyZWVuIGFuZCAobWluLXdpZHRoOiA1NWVtKSB7XHJcblxyXG59XHJcblxyXG4vKiBEZXNrdG9wIFNtYWxsIDk1NXB4ICovXHJcbkBtZWRpYSBzY3JlZW4gYW5kIChtaW4td2lkdGg6IDU5LjY4NzVlbSkge1xyXG5cclxufVxyXG5cclxuLyogRGVza3RvcCBNZWRpdW0gMTEwMHB4ICovXHJcbkBtZWRpYSBzY3JlZW4gYW5kIChtaW4td2lkdGg6IDY4Ljc1ZW0pIHtcclxuXHJcbn1cclxuXHJcbi8qIERlc2t0b3AgTGFyZ2UgMTI0MHB4ICovXHJcbkBtZWRpYSBzY3JlZW4gYW5kIChtaW4td2lkdGg6IDc3LjVlbSkge1xyXG5cclxufVxyXG5cclxuLyogRGVza3RvcCBYLUxhcmdlIDE0MDNweCAqL1xyXG5AbWVkaWEgc2NyZWVuIGFuZCAobWluLXdpZHRoOiA4Ny42ODc1ZW0pIHtcclxuXHJcbn1cclxuIl0sIm5hbWVzIjpbXSwic291cmNlUm9vdCI6IiJ9*/