#mandelbrotContainer {
	display: grid;
	grid-template-columns: [main] 1200px [controls] 600px;
	grid-template-rows: [main] auto [info] auto;
	grid-column-gap: 0.8em;
}

#canvas {
	grid-column: main;
	grid-row: main;
}

#canvasInfo {
	grid-column: main;
	grid-row: info;
	display: flex;
	justify-content: flex-end;
}

#controls {
	grid-column: controls;
	display: flex;
	flex-direction: column;
}

#algorithmControls {
	display: grid;
	grid-template-columns: [position] 1fr [parameters] 1fr;
	column-gap: 1em;
}

#positionControls {
	grid-column: position;
	display: grid;
	grid-template-columns: [labels] 1fr [inputs] 3fr;
	grid-template-rows: repeat(auto-fit, 1fr);
	align-items: center;
}

#algorithmParameterControls {
	grid-column: parameters;
	display: grid;
	grid-template-columns: [labels] 3fr [inputs] 5fr;
	grid-template-rows: repeat(auto-fit, 1fr);
	align-items: center;
}

#algorithmControls label {
	grid-column: labels;
	justify-self: end;
}

#algorithmControls input {
	grid-column: inputs;
	width: auto;
}

#redrawBtn {
	grid-column: span 2;
	margin: 0.5em auto 2em auto;
	width: 10em;
	height:2em;
}

#colourControls {
	display: grid;
	grid-template-columns: [inputs] 1fr [algorithm] 1fr
	column-gap: 1em;
}

#colourControlInputs {
	grid-column: [inputs];
	display: flex;
	flex-direction: column;
}

#addColourBtn {
	margin: auto;
	width: 3em;
}

#colourAlgorithmControls {
	grid-column: algorithm;
}