html, body {
	margin: 0;
	padding: 0;
}

body {
	font-family: system-ui;
	font-size: 10pt;
}

button, input, select {
	font-family: inherit;
	font-size: inherit;
}

#container {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

#controls {
	padding: 1em;
	display: grid;
	grid-template-columns: [labels] auto [inputs] auto;
	grid-column-gap: 0.5em;
	grid-row-gap: 0.5em;
	align-items: center;
	flex: 0 0 auto;
}

#controls > h1, #controls > button, #preset-select {
	grid-column: labels / span 2;
}

#controls > h1 {
	font-size: 1em;
	margin: 1em 0 0 0;
}

#controls > h1:first-child {
	margin-top: 0;
}

#controls > input {
	max-width: 5.5em;
}

#controls > input[type="checkbox"] {
	justify-self: end;
	margin: 0;
}

#controls > button:first-of-type {
	margin-top: 1em;
}

/*

#controls > input, #controls > button, #controls > select {
	box-sizing: border-box;
	height: 24px;
}

#controls > input, #color-select {
	grid-column: inputs;
	margin: 0px;
	justify-self: end;
	width: 84px;
}

#controls > input[type="checkbox"] {
	width: auto;
}
*/

#preview {
	box-sizing: border-box;
	height: 100vh;
	width: 100%;
	flex: 1;
}