:root {
	--font_color_light: #ffffff;
	--font_color_dark: #000000;
	--bg_color: #2f2f33;
	--highlight_color: #6a6a7c6e;

	--slider_color: #6a6a7c;
	--number_color: #6a6a7c;
	--input_color: #d7d7e6;
	--invalid_input_color: #e2c3c3;
}
html {
	font-family: sans-serif;
	font-size: 16px;
	color: var(--font_color_light);
}

h1 {
	width: 100%;
	margin: 0;
	padding: 0.25em;

	box-sizing: border-box;

	font-size: 35px;
	text-align: center;
	border-radius: 5px;

	background-color: var(--highlight_color);
}
h2 {
	width: 100%;
	margin: 1.75em 0 1em;

	font-size: 25px;
	border-bottom: 1px solid var(--font_color_light);
	line-height: 0.1em;
}
h2 span {
	background: var(--bg_color);
	padding-right: 0.5em;
}
h3 {
	margin: 0.25em;
	
	font-size: 18px;
}


#wrapper {
	position: fixed;
	top: 0; left: 0; bottom: 0; right: 0;

	display: flex;
}

#display {
	width: 76%;

	z-index: -2;
	cursor: grab;

	background-color: black;
}
#display:active {
	cursor: grabbing;
}
#display.full {
	width: 100%;
}

#settings {
	width: 24%;
	height: 100%;
	padding: 1%;

	z-index: 2;

	background-color: var(--bg_color);
}
#settings.hidden {
	width: 0%;
	display: none;
}

.menu-button {
	padding: 0.25em 1em;

	user-select: none;
	border-radius: 4px;

	background-color: var(--highlight_color);
	transition: all .1s ease-in-out;
}
.menu-button:hover {
	opacity: 0.7;
	cursor: pointer;
}
.menu-button:active {
	opacity: 9;
}

#hide-button {
	position: absolute;
	bottom: 1%;
}

#origin-button {
	position: absolute;
	bottom: 1%;
	right: 1%;
}

#show-button-wrapper {
	width: 25%;
	height: 30%;
	position: fixed;
	bottom: 0; right: 0;
	
	opacity: 0;
	z-index: 0;

	transition: all .75s ease-in-out;
}
#show-button-wrapper.hidden {
	display: none;
}
#show-button-wrapper:hover {
	opacity: 1;
}
#show-button {
	padding: 0.25em 1em;
	position: fixed;
	bottom: 1%; right: 1%;

	user-select: none;
	border-radius: 4px;

	background-color: var(--slider_color);
	transition: all .1s ease-in-out;
}
#show-button:hover {
	opacity: 0.8;
	cursor: pointer;
}
#show-button:active {
	opacity: 9;
}


.control-section {
	width: 95%;
	margin: 0 auto;
}


#field-function {
	width:  100%;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	font-family: monospace;
}
.function-component {
	width: 100%;
	margin: 0.25em auto;

	display: flex;
	justify-content: center;
	align-items: center;
}


.control-slider {
	appearance: none;
	width: 100%;
	height: 14px;

	border-radius: 5px;
	outline: none;
	opacity: 0.75;

	background-color: var(--slider_color);
	transition: all .1s ease-in-out;
}
.control-slider:hover {
	opacity: 1;
	cursor: pointer;
}

.slider-pair {
	width: 100%;
	margin-bottom: 1em;
	
	display: flex;
	justify-content: center;
	align-items: center;
}

.control-number {
	width: 5em;
	margin-left: 2em;
	padding: 0.4em 0.5em;

	font-weight: bold;
	border-radius: 4px;
	border: none;
	outline: none;

	color: var(--font_color_light);
	background-color: var(--number_color);
}

.control-input {
	width: 7.5em;
	margin: 0;
	margin-left: 1em;
	padding: 0.3em 0.5em;
	flex-grow: 1;

	border-radius: 4px;
	border: none;
	outline: none;

	color: var(--font_color_dark);
	background-color: var(--input_color);
}
.control-input.invalid {
	outline: 2px solid #be4242;
	background-color: var(--invalid_input_color);
}