:root {
	--s: 8px;
	--s-sm: calc(var(--s) * 2);
	--s-md: calc(var(--s) * 4);
	--s-lg: calc(var(--s) * 8);
	--w: 111px;
	--w-sm: calc(var(--w) * 3);
}

* {
	box-sizing: border-box;
}

body {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	min-width: var(--w-sm);
	padding: var(--s-sm);
	background-color: beige;
	color: darkslategray;
}

h1 {
	width: 100%;
}

form fieldset {
	display: flex;
	flex-wrap: wrap;
	margin-top: var(--s);
	border: 1px solid gray;
}

form fieldset label {
	display: flex;
	justify-content: space-between;
}

form fieldset label input {
	width: inherit;
}

form > fieldset > label {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	width: calc(50% - var(--s));
	margin-top: var(--s);
}

form > fieldset > label > input,
form > fieldset > label > select {
	margin-left: var(--s);
}

form > fieldset > fieldset {
	width: 100%;
}

form > fieldset > fieldset > label {
	display: inline-flex;
	align-items: center;
	margin-top: var(--s);
	margin-right: var(--s);
}

ul {
	margin-top: var(--s-sm);
	padding-top: var(--s);
	padding-bottom: var(--s);
	border: 1px solid gray;
}

aside {
	width: 100%;
	height: 75vh;
	margin-top: var(--s-sm);
}

canvas {
	transform-origin: top left;
	background-color: darkslategray;
}

@media (min-width: 768px) {
	main {
		position: sticky;
		top: 0;
		width: var(--w-sm);
		margin-right: var(--s-md);
	}

	aside {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		width: calc(100% - var(--w-sm) - var(--s-lg));
	}
}