* {
	/* having difficulty getting transitions into the shadow dom at the moment, this is here for <use> elements until I can improve */
	transition: all ease-in var(--transition-duration);
}


html {
	--page-background-light: #fcfcfc;
	--page-background-dark: #111111;

	--silver: #bbbb;
	--teal: #088;		/* cartesian grid */

	--pink: #c7a;		/* polar grid new */
	--purple: #b0b;
	--fadedred: #f07;	/* point info */

	--accent-light: darksalmon;
	--accent-dark: lightsalmon;
	--transition-duration: 0.5s;

	--character-body: #0a07;
	--character-outline: #0a0f;

	--worm-body: darksalmon;
	--worm-outline: pink;

	margin:0px;
	padding:0px;

	body {
		margin:0px;
		padding:0px;
	}
	scrollbar-width: none;

	font-size: 16px; /* 14px; */
	font-family:'Noto sans', sans-serif;

	/*
	there are 5 extra pixels on the body height coming from somewhere...
	might be a line-box thing on the svg element
	*/
}

html[data-colourscheme="light"] {
	color-scheme: light;
	--accent: var(--accent-light);
	accent-color: var(--accent);
	background-color: var(--page-background-light);
	color: black;

	form {
		background-color:#eee9;
		border-color: #bbbb;
	}
	.infoBox { background-color: #fffc; }

	.tabbar a {
		border-color: #8f8f9d;
		background-color: #ffffff;
	}
}

html[data-colourscheme="dark"] {
	color-scheme: dark;
	--accent: var(--accent-dark);
	accent-color: var(--accent);
	background-color: var(--page-background-dark);
	color: white;

	form {
		background-color:#7779;
		border-color: #9999;
	}
	.infoBox {
		background-color: #222c;
		border-color: #9999;
	}
	.tabbar a {
		border-color: #8f8f9d;
		background-color: #2b2a33;
	}
}


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

}

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

}



h1:first-child, h2:first-child { margin-top:0ex; }






summary {
	cursor: pointer;
}

a { color: var(--accent); }

form {
	display: grid;
	border:1px solid silver;
	/* filter: drop-shadow(0px 5px 5px var(--accent)); */
	border-radius: 1ex;
	padding:1ex;
	margin: 1ex;

	font-size: 1em;

	h1 { font-size:3ex; margin-bottom: 1ex; }
	h2 { font-size:2ex; margin-top:2ex; margin-bottom:1ex; }
	h3 { font-size:1em; margin-top:1ex; margin-bottom:1ex; }


	h1 + h2 { margin-top: 0ex; }

	details { margin-top:1ex; margin-bottom: 0ex; }
	details > label { display: block; }




	hr { width:100%; }

	#input-command {
		height:15em;
		min-width: 15em;
	}



	#character-instructions {
		display: grid;
	}

	#character-info {
		white-space: pre;
	}


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

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

	textarea { font-size: 1.6ex; }

	br { margin-top:1ex; }

	details { margin-top: 0em; }
	details.project { margin-top: 1ex; }



	&:focus-within {
		transition-duration: 0s;
		outline: 2px solid var(--accent);
		/* filter: drop-shadow(0px 0px 2px var(--accent)); */
	}

	*:focus-visible {
		transition-duration: 0s;
		outline: 2px solid var(--accent);
	}

}/* form */

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



.control-group {

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

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

}



#dialog-appInfo {
	/* backdrop-filter: blur(20px); */
	border-radius: 1em;
	padding:1em;
	border: 3px solid var(--accent);
	opacity: 95%;
	box-shadow: 0px 0px 3em var(--accent);


	dl {
		display: grid;
		grid-template-columns: 2fr 3fr ;
		margin:1em;
		font-size:1em;
	}
	dt {
		margin: 0em 1em;
		white-space: nowrap;
		font-family: monospace;
	}
	dd {
		margin: 0em 1em;
	}
	kbd {
		display:inline-block;
		border-radius: 1ex;
		border: 1px dotted grey;
		text-align:center;
		width:3ex;
	}


	&::backdrop {
		background-image:  url('./worm-icon.svg');
		backdrop-filter: blur(1pt) brightness(40%);
		background-position: center;
		background-repeat: repeat;

		background-size: 15vh;
		background-color: var(--character-body);
		opacity: 0.8;
	}


}