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

button {
	border: 0;
	font-size: inherit;
	font-family: inherit;
	color: inherit;
	font-size: 3rem;
	margin-collapse: collapse;
	text-shadow: 0 0 3px #000;
}

#app_area {
	display: grid;
	grid-template-areas:
		"bar editor";
	grid-template-columns: minmax(50rem,30vw) auto;
	height: 100vh;
	width: 100vw;
}

/* The area behind the grid */
#workspace {
	background: #1e3526 linear-gradient(to right, #000000 -7%, transparent 8%);
	grid-area: editor;
	display: grid;
	overflow: scroll;
	grid-template-rows: calc(100% - 7rem) 1fr;
}

/* 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: 1;
	height: 75vmin;
	align-self: center;
	justify-self: center;
}

/* 'pixels' on the canvas itself */
#grid_container > div {
	background: white;
	aspect-ratio: 1;
	border-bottom: 1px solid #888;
	border-right: 1px solid #888;
	border-collapse: collapse;
}

#grid_caption {
	align-self: center;
	justify-self: center;
	font-size: 4rem;
}

#toolbox {
	grid-area: bar;
	background: #00762a;
	border-right: 3px solid #0b3a1d;
	display: grid;
	box-sizing: border-box;
	padding: 0 1em 1em 1em;
	font-size: 3rem;
	font-family: "PT Mono", "Envy Code R", "Liberation Mono", "DejaVu Sans", monospace;
	font-weight: bold;
	z-index: 2;
	gap: 2rem;
	grid-template-rows: 10vh 15vh 20vh 1fr 1fr 1fr 1fr
}

#toolbox > header {
	margin: 0;
	padding: 0;
	font-size: 3em;
	text-align: center;
	text-shadow: 0 0 3px #000;
	align-self: center;
	justify-self: center;
}

#color_picker {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

#color_picker > div {
	display: grid;
	grid-template-rows: 70% 30%;
	text-align: center;
	font-weight: bold;
	font-size: 1.3em;
}

#color_picker > div.selected {
	background: rgba(255,255,255, 0.4);
}

#color_picker > div > .swatch {
	aspect-ratio: 1;
	margin: 0.4em auto 0.2em auto;
	display: block;
	height: 4rem;
}

#black_pick > .swatch {
	background: #000;
}

#white_pick > .swatch {
	background: #fff;
}

#custom_pick > .swatch {
}

#canvas_opts {
	display: grid;
	grid-template-rows: 2.5rem 1fr 1fr;
}

#rainbow {
	background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
	border: 2px solid rgba(0,0,0,0.4);
}

#darken {
	background: #0b3a1d;
}

#lighten {
	background: #20964a;
}

button.selected {
	border: 4px solid #fff !important;
}