@import url('https://fonts.googleapis.com/css?family=Ubuntu:700&display=swap');


body {
	margin: 0;
}

main {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

section.section-entire {
	flex: 0 0 auto;
	align-self: flex-start;
	height: auto;
	
	position: -x-sticky;
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	margin-top: 0;
	
	border-right: 2px solid white;
	border-bottom: 2px solid white;
}

section.section-output {
	background-color: #CC99FF;
	
	margin-bottom: 2px;
	padding: 0.5em;
	
	font-size: 1.2em;
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

section.section-output .output-config {
	flex: 1 1 8em;
	
	margin-right: 0.5em;
	
	font-family: 'Ubuntu', sans-serif;
}

section.section-output .output-config .section-heading {
	font-size: 1.5em;
	margin-left: initial;
}

section.section-output .output-config div {
	margin-left: 1em;
	margin-top: 4px;
	margin-bottom: 4px;
}

section.section-output .output-config label {
	color: #3D1466;
}

section.section-output .output-config input,
section.section-output .output-config button,
section.section-output .output-config select {
	margin-left: 1.0em;
	
	font-size: inherit;
	font-family: inherit;
	
	border: none;
	background-color: #E6CCFF;
}

section.section-output .output-config output {
	display: inline-block;
	
	color: initial;
	margin-left: 1.0em;
	
	font-size: inherit;
	font-family: inherit;
}

section.section-output .output-config button.remarkable {
	background-color: #FFFF87;
}


section.section-output .output-config input {
	width: 5em;
}

section.section-output .output-config button {
	margin-left: 0.5em;
	color: #3D1466;
	
	border-radius: 6px;
}

section.section-output output {
	flex: 2 0 240px;
	
	display: flex;
	flex-direction: row;
}

section.section-output output div {
	flex: auto auto auto;
}

canvas.canvas-tick {
	display: block;
	width: 100%;
	
	background-color: white;
}

canvas.canvas-graph {
	display: block;
	width: 100%;
	
	background-color: black;
}