html, body {
	margin: 0;
	padding: 0;
	user-select: none;
	font-size: 10px;
	color: #fff;
}

body {
	overflow: hidden;
}

#app_area {
	display: grid;
	height: 100vh;
	width: 100vw;
}

/* The area behind the grid */
#workspace {
	background: #1e3526 linear-gradient(to right, #000000 -7%, transparent 8%, transparent 92%, #000000 107%);
	display: grid;
	overflow: scroll;
	z-index: 1;
}

/* the canvas we're drawing on in the app */
#grid_container {
	display: grid;
	grid-template-columns: repeat(16, 1fr);
	border: 6px solid #000;
	/* gap: 1px; */
	background: #888;
	aspect-ratio: 1;
	box-shadow: 0 0 3.2rem #000;
	z-index: 10;
	height: 75vmin;
	align-self: center;
	justify-self: center;
}

/* 'pixels' on the canvas itself */
#grid_container > div {
	background: white;
	aspect-ratio: 1;
}

.show_grid > div {
	border-bottom: 1px solid #777;
	border-right: 1px solid #777;
	border-collapse: collapse;
}

#toolbox {
	background: #00000088;
	border: 1px solid #000;
	border-radius: 8px;
	display: grid;
	box-sizing: border-box;
	box-shadow: 0 0 16px #000;
	padding: 6px;
	font-size: 14px;
	font-family: "PT Mono", "Envy Code R", "Liberation Mono", "DejaVu Sans", monospace;
	font-weight: bold;
	position: absolute;
	z-index: 20;
	gap: 8px;
	grid-template-rows: 26px 1fr 60px;
	top: 16px;
	left: 16px;
	width: 184px;
}

#toolbox > header {
	margin: 0;
	padding: 0;
	font-size: 1.3em;
	text-align: center;
	text-shadow: 0 0 3px #000;
	line-height: 26px;
}

#tool_palette {
	display: flex;
	flex-flow: row wrap;
	gap: 3px;
}

#tool_palette div {
	background: url("./ui/green-button.png") no-repeat top left transparent;
	display: grid;
	text-align: center;
	font-weight: bold;
	font-size: 1.3em;
	image-rendering: crisp-edges;
	flex-basis: 40px;
	height: 48px;
}

#tool_palette div:hover {
	background-image: url("./ui/cyan-button.png");
}

#tool_palette > div.selected {
	background: url("./ui/green-button-pressed.png") no-repeat top left;
	image-rendering: crisp-edges;
}

#tool_palette > div.active {
	background: url("./ui/yellow-button-pressed.png") no-repeat top left;
	image-rendering: crisp-edges;
}

#tool_palette div.selected .swatch,
#tool_palette div.active .swatch {
	margin-top: 9px;
}

#tool_palette > div > .swatch {
	aspect-ratio: 1;
	margin: 4px auto 0 auto;
	display: block;
	width: 32px;
	height: 32px;
}

#black_pick > .swatch {
	background: url("./ui/black-pen.png") no-repeat center center;
	background-size: contain;
	image-rendering: crisp-edges;
}

#white_pick > .swatch {
	background: url("./ui/eraser.png") no-repeat center center;
	background-size: contain;
	image-rendering: crisp-edges;
}

#custom_pick > .swatch {
	mask: url("./ui/custom-color-mask.png") no-repeat center center;
	mask-size: contain;
	border: 0;
	padding: 0;
}

#custom_color::-moz-color-swatch {
	background: url("./ui/custom-color.png") no-repeat center center;
	background-size: contain;
	image-rendering: crisp-edges;
	border: 0;
	margin: 0;
	padding: 0;
}

#rainbow > .swatch {
	background: url("./ui/rainbow-pen.png") no-repeat center center;
	background-size: contain;
	image-rendering: crisp-edges;
}

#darken > .swatch {
	background: url("./ui/darken-tool.png") no-repeat center center;
	background-size: contain;
	image-rendering: crisp-edges;
}

#lighten > .swatch {
	background: url("./ui/lighten-tool.png") no-repeat center center;
	background-size: contain;
	image-rendering: crisp-edges;
}

#clear_canvas > .swatch {
	background: url("./ui/blank-canvas.png") no-repeat center center;
	background-size: contain;
	image-rendering: crisp-edges;
}

#grid_toggle > .swatch {
	background: url("./ui/grid-toggle.png") no-repeat center center;
	background-size: contain;
	image-rendering: crisp-edges;
}

#canvas_opts {
	display: grid;
	grid-template-areas:
		"lbl lbl"
		"num slider"
	;
	grid-template-columns: 2.5em auto;
	gap: 0 4px;
}

#canvas_opts > label {
	grid-area: lbl;
}

#canvas_opts input[type=range] {
	grid-area: slider;
	width: 100%;
}

#canvas_opts input[type=text] {
	grid-area: num;
	text-align: center;
	background: #fff8;
	border: 0;
	border-radius: 5px;
}

#canvas_opts input[type=text]:focus {
	border: 1px solid #fff;
}