/*
This CSS governs the appearance of our site.
You can find the basic concepts of CSS here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works
*/

/*
This makes the border and padding be counted as part of the element's size.
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model
It switches from
	https://mdn.mozillademos.org/files/13647/box-model-standard-small.png
to
	https://mdn.mozillademos.org/files/13649/box-model-alt-small.png
*/
* {
	box-sizing: border-box;
}

/*
Make the document fill the whole viewport, this overrides any weird defaults that browsers might have.
*/
html, body, figure {
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
}

/* Default font and size */
body {
	width: 100vw;
	height: 100vh;
	overflow: hidden;

	/* center vertically */
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-content: center;

	/* background behind the plot */
	background: rgb(40, 40, 40);

	/* default text */
	font-family: sans-serif;
	font-size: 1.1rem;
}

/*
It is easier to read if the text is not too wide, so we limit the width.
We use the class selector ".", so this style will be applied to elements with class="width-limited"

The various units of measurement available in CSS:
	https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units
*/

#plot {
	width: 100%;
	height: 100%;
	/* margin: 1rem; */
	border: 0px none; 
	margin: 0px; 
	padding: 0px; 
	top: 0px; 
	left: 0px; 
	position: absolute; 
}

#debug-overlay {
	top: 1rem; 
	left: 1rem; 
	position: absolute; 
	z-index: 2;

	/* padding: 0 0.5rem 0 0.5rem; */
	border-radius: 0.5rem;
	background: rgba(0, 0, 0, 0.5);
	color: white;

	overflow: hidden;
}

#debug-overlay a {
	color: rgb(118, 255, 152);
}
#debug-overlay p {
	margin: 0.5rem;
}
#debug-overlay pre {
	font-size: 0.8em;
}

#view-select {
	display: inline;
	padding: 0;
	margin: 0;
}

#view-select li {
	display: inline;
	padding-left: 1rem;
	padding-right: 1rem;
	margin-left: 0.25rem;
	margin-right: 0.25rem;

	border: white 2px solid;
	border-radius: 0.5rem;
}

#slider-div {
	display: flex;
	justify-content: left;
}

.keyboard {
	border:1px white solid; 
	padding: 0 0.25em 0 0.25em;
}

.hidden {
	display: none;
}


.selector {
	list-style: none;
	padding: 0;
}

.selector li {
	padding: 0.25em;
	border-radius: 0.4em;
	display: inline-block;
}

.selector li:hover {
	background:hsl(0, 0%, 30%);
}

.selector li.selected {
	border: hsl(135, 100%, 73%) 1px solid;
}

.selector.horizontal li {
	display: inline;
	padding: 1rem;
}