body {
  	overflow-x: hidden;
	overflow-y: hidden;
}

canvas {
	background-color: var(--color-background);
	left: 0;
	top: 0;
	position: absolute;
	z-index: 1;
}

.panel {
	background-color: var(--color-panel);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	padding: var(--space-tiny);
	position: absolute;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	z-index: 2;
}

.panel div {
	display: flex;
  	justify-content: flex-start;
	flex-direction: row;
	outline: 0;
	padding: 0;
}

.panel section {
	display: inline-flex;
	flex-direction: column;
	flex-wrap: nowrap;
	padding: var(--space-tiny);
}

.panel span {
	display: inline-flex;
	flex-direction: column;
	flex-wrap: nowrap;
}

.panel button {
	background-color: var(--color-panel-button);
	height: var(--space-large);
	margin: var(--space-micro);
	padding: var(--space-tiny);
	outline: 0;	
}

.panel button:hover {
	background-color: var(--color-hovered);
	cursor: pointer;
}

.panel button:active {
	background-color: var(--color-button);
}

.panel input {
	border: none;
	height: var(--space-large);
	margin: var(--space-micro);
	padding: var(--space-tiny);
	outline: 0;
}

.scrollable {	
	overflow-y: auto;
	scrollbar-color: var(--color-background) var(--color-panel);
	scroll-padding: var(--space-micro);
	scrollbar-width: thin;
}

#fraction-mode {
	width: var(--space-large);
}

#ms {
	display: none;
}

#ms, #fps {
	width: var(--space-wide);	
}

#move button {
	height: var(--space-big);
	min-width: var(--space-big);
}

#show {
	display: none;
}

#theme {
	background-color: var(--color-text);
}