/*

	Copyright © 2020–2021, Stewart Smith. See LICENSE for details.

*/
@charset "utf-8";






* {

	box-sizing: border-box;
	margin:  0;
	border:  0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}
::-moz-selection {

	background: #FC0;
	color: black;
}
::selection {

	background: #FC0;
	color: black;
}




html, body, main {

	width:  100%;
	height: 100%;
}
html {

	font-size: 16px;
}
body {
	
	/*--fonts: 'SF Pro Text', system-ui, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;*/

	--fonts: 'Inter', sans-serif;
	--hue: 150;
	--hue: 210;

	background-color: hsl( var( --hue ), 25%, 7% );
	padding-bottom: 120px;
	color: hsl( var( --hue ), 25%, 25% );
	font-size: 30px;
	line-height: 40px;
	font-weight: 400;
	font-family: var( --fonts );
	hanging-punctuation: first;

	letter-spacing: -0.03em;
}





h1 {

	margin: 5vw 0;
	text-align: center;
	font-size: 2vw;
	color: hsl( var( --hue ), 25%, 20% );
	color: white;
	text-transform: uppercase;
	font-weight: 900;
}






    /*************/
   /*           */
  /*   Graph   */
 /*           */
/*************/


canvas#frequencies-graph,
select, input,
.inset {

	background-color: hsl( var( --hue ), 25%, 15% );
	box-shadow: 
		0 1vw 2vw rgba( 0, 0, 0, 0.3 ) inset;
	color: hsl( var( --hue ), 25%, 90% );
}

#frequencies-graph,
#banks {

	width: 100%;
}
#frequencies-container {

	position: relative;
	margin: 0 10vw 10vw 10vw;
	width:  80vw;
	height: 30vw;
}
canvas#frequencies-graph {

	display: inline-block;
	height: 100%;
	margin-right: 60px;
	border-radius: 4px;
	overflow: hidden;
}






    /*************/
   /*           */
  /*   Banks   */
 /*           */
/*************/


.bank {

	display: inline-block;
	position: absolute;
	bottom: 0;
	font-size:   2vw;
	line-height: 2vw;
	transform: translate( -50%, 0 );
	opacity: 0;
	transition: 
		opacity 2s,
		left 0.25s;
	color: hsl( var( --hue ), 25%, 90% );
	letter-spacing: 0.01em;
}
.bank b {

	font-weight: 700;
	margin-right: 0.5em;
}
.bank.active {

	opacity: 1;
	transition: 
		opacity 0s,
		left 0.25s;
}
.bank:after {

	content: 'Hz';
	opacity: 0.5;
	margin-left: 0.2em;
}






    /**************/
   /*            */
  /*   Params   */
 /*            */
/**************/


table {

	border-collapse: collapse;
	border-spacing: 0;
}
table, thead, tr, td {

	/*width: 100%;*/
	box-sizing: content-box;
}
thead td {

	/*text-align: center;*/
}
#params {

	width: 100%;
	margin: 0 0 120px 0;
	/*text-align: right;*/
}
#params table {

	width: 100%;
	margin-bottom:  20px;
	padding-bottom: 10px;
	border-bottom: 1px solid hsl( var( --hue ), 25%, 10% );
}
tr.param {

	width: 100%;
	border-top: 1px solid hsl( var( --hue ), 25%, 10% );
}
tr.param td {

	/*padding: 20px;*/
	/*padding: 1vw;*/
	/*text-align: center;*/
	height: 8vw;
	text-align: left;
}
tr.param td:first-child {

	/*padding-left: 4vw;*/
}
tr.param td:last-child {

	/*padding-right: 4vw;*/
	/*text-align: right;*/
}


#params td:nth-child( 1 ){ width: 10vw; text-align: center; }
#params td:nth-child( 2 ){ width: 40vw; }
#params td:nth-child( 3 ){ width: 20vw; }
#params td:nth-child( 4 ){ width: 20vw; }
#params td:nth-child( 5 ){ width: 10vw; }



.param-remove,
#param-add {

	display: inline-block;
	position: relative;
	top:    1vw;
	width:  5vw;
	height: 5vw;
	border-radius: 3vw;
	background-color: hsl( var( --hue ), 25%, 15% );
	box-shadow: 
		0  2px 0px rgba( 255, 255, 255, 0.1 ) inset,
		0 -2px 0px rgba( 0, 0, 0, 0.3 ) inset;
	text-align: center;
	line-height: 4.8vw;
	overflow: hidden;
	cursor: pointer;
}
#param-add {

	margin-left: 90vw;
}


td,
select, 
input[type=text] {

	/*display: block;*/
	border-radius: 0.5vw;
	/*text-align: center;*/
	font-size:   3vw;
	line-height: 5vw;
	font-family: var( --fonts );
}
select,
input[type=text] {

	/*display: none;*/
	padding: 0 0 0 2vw;
	width: 16vw;
	height: 6vw;
}
select {

	width: 36vw;
	padding: 0 2vw;
}






thead td {

	text-align: left;
	font-size:   2vw;
	line-height: 5vw;
	color: hsl( var( --hue ), 10%, 50% );
	/*padding: 0 0 0 2vw;*/
}





.pad {

	padding: 60px;
}