:root {
	--c-bg: black;
}
@media (prefers-color-scheme: light) {
	:root {
		color-scheme: light;
		--c-bg: white;
	}
}
@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--c-bg: black;
	}
}

html,
body {
	height: 100%;
}

body {
	margin:0 ;
	opacity: 0;
	transition: opacity 444ms ease-in-out;
	background-color: var(--c-bg);
}
body[is-loaded] {
	opacity: 1;
}

canvas.webgl {
	position: fixed;
	top: 0;
	left: 0;
	outline: none;
}

site-interface {
	display: none;
}

site-interface form {
	background-color: transparent;
	padding: 0.2rem;
	display: none;
}
site-interface:is(:hover, :active) form {
	display: flex;
}

site-interface input,
site-interface button {
	background-color: transparent;
	border: 0.1rem solid #00ff00;
	color: cyan;
	padding: 0.3rem;
	font-size: 1rem;
	width: 100%;
	transition: all 333ms ease-in-out;
	margin: 0.5rem;
}
site-interface :is(input, button):is(:hover, :active) {
	outline: none;
}
site-interface button {
	cursor: pointer;
}
site-interface button:hover {
	background-color: var(--c-bg);
	border-color:#ff00ff;