html {
	--silver: #bbbb;


	margin:0px;
	padding:0px;

	body {
		margin:0px;
		padding:0px;
	}
	scrollbar-width: none;
	/*
	there are 5 extra pixels on the body height coming from somewhere...
	might be a line-box thing on the svg element
	*/
}

summary {
	cursor: pointer;
}

form {
	display: grid;
	border:1px solid silver;
	border-radius: 1ex;
	padding:1ex;
	margin: 1ex;
	font-family:sans-serif;

	h1 { font-size:3ex; margin-bottom: 1ex; }
	h2 { font-size:2ex; margin-top:2ex; margin-bottom:1ex; }
	h1:nth-child(1), h2:nth-child(1) { margin-top:0ex; }

	details { margin-top:1ex; margin-bottom: 0ex; }

	hr { width:100%; }

	#input-command {
		height:15em;
	}


	.infoBox {
		font-family: monospace;
		font-size: 1em;
		padding:1ex;
		border:1px solid var(--silver);
	}

	#turtle-instructions {
		display: grid;
	}

	#turtle-report {
		white-space: pre;
	}


	input[type=color] { width: 10ex; margin-right:0.7ex; }
	input[type=range] { width: 10ex; }

	input[name=zoom] { width: 16ex;}

}/* form */



.control-group {

	&.control-left {
		position:absolute;
		left:0ex;
	}

	&.control-right {
		position:absolute;
		right:0ex;
	}

}



@media (prefers-color-scheme:dark) {

}

@media (prefers-color-scheme:light) {

}



body.light {
	color-scheme: light;
	background-color:white;
	color: black;
	form {
		background-color:#eee9;
		border-color: #bbbb;
	}
	.infoBox { background-color: #fffc; }

}

body.dark {
	color-scheme: dark;
	background-color: #222;
	color: white;
	form {
		background-color:#7779;
		border-color: #9999;
	}
	.infoBox {
		background-color: #222c;
		border-color: #9999;
	}
}