html {
	--bg: #333333;
	--bg-light: #555555;
	--bg-lightest: #888888;
	--text-main: #f2f2f2;

	--gap: 1em;
	--gap-small: 0.3em;

	background-color: var(--bg);
	color: var(--text-main);
	font-family: system-ui;
	

}

html {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;

	display: grid;
	grid-template-columns: 20em 1fr;
}

body nav {
	background-color: var(--bg-light);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: scroll;
}

nav details {
	padding: var(--gap);
	border-bottom: solid 1px var(--bg-lightest);
}

nav details[open] summary {
	margin-bottom: var(--gap-small);
}

.two-col-settings {
	width: 100%;
	display: grid;
	grid-template-columns: 3fr 1fr;
	grid-row-gap: var(--gap-small);
	
}

.two-col-settings input {
	width: 100%;
}

nav .padded-section {
	padding: var(--gap);
	border-bottom: solid 1px var(--bg-lightest);
}


main {
	padding: var(--gap);	
	height: 100%;
	overflow: scroll;
}

#pattern-preview {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap-small);
}

/* Placements */