filterfun.css

body {
	background-color: #222;
	color: #EEE;
	font-family: sans-serif;
	overflow: hidden;
}

#ui_div {
	display:flex;
	flex-direction: row;
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: none;
	padding: none;
}

@media (max-aspect-ratio: 5/4) {
    #ui_div, #circ_div {
		flex-direction: column !important;
    }
}

#curves_div, #control_panel {
	display: block;
	height: 100%;
	margin: 5px;
}
#curves_div {
	width: 100%;
	overflow-y: scroll;
}
#control_panel {
	width: calc(max-content+25px);
	overflow: scroll;
}

#in_fft, #filter_curve, #out_fft {
	display: block;
	margin: auto;
	border: 3px solid #888;
}

.control_mode { display: none; }

button, input, select {
	background-color: #333;
	color: #FFF;
	border: solid #AAA 2px;
	margin: 2px;
	border-radius: 5px;
}

input[type="range"] {
	width: max-content;
}

.fullscreen_block {
	display: flex;
	justify-content:center;
	align-items:center;
	background: black;
	
	z-index: 99;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.option_line {
	width: 100%;
	white-space: nowrap;
}

#start_button {
	max-width: 90vw;
	font-size: 3em;
}

.circ_formula {
	display: none;
}

@keyframes fileblink {
	from {border-color:#3ee;}
	to {border-color:#e3e;}
}

.helptext {
	cursor: help;
	text-decoration: underline dashed;
}

.scale_line {
	display:inline-block;
	margin: 4px;
	width: 100%;
	height: 2px;
	border-bottom: 3px dashed #eee;
}

.scale_left, .scale_right {
	position: relative;
	display: inline-block;
	
}
.scale_left {left: 0;}
.scale_left {right: 0px;}

#circ_div {
	align-items: center;
	display: flex;
	flex-direction: row;
	width: max-content;
	height: 128px;
}

#circ_div canvas, #circ_img {
	height: 100%;
	max-width: 100%;
}

#circ_img {
	image-rendering: pixelated;
	aspect-ratio: 1/1;
}

#circ_params input {
	width: 100%;
}

#circ_params {
	width: 95%;
}

#circ_params span, #circ_params td{
	width: min-content;
}

#circ_params .circ_param_slider {
	width: 100% !important;
}

.circ_formula {
	font-family: Cambria Math, monospace;
	font-size: 1.5em;
}