* {box-sizing:border-box;}


html {height:100%; font-family:sans-serif;}
body {height:100%; margin:0;}


div#container {display:flex; flex-direction:column; justify-content:flex-start;}
div#container {text-align:center; padding:1rem; min-height:100%; max-width:800px; margin:0 auto;}

div#container fieldset#chooser {display:flex; flex-direction:row; justify-content:space-around;}
div#container fieldset#chooser div.wavetype {flex:1 1 auto; width:20%; margin-left:.5rem; background-color:dodgerblue; font-weight:600; border-radius:.25rem;}
div#container fieldset#chooser div.wavetype:first-of-type {margin-left:0;}
div#container fieldset#chooser div.wavetype.on {background-color:gold;}
div#container fieldset#chooser div.wavetype.gone {display:none;}
div#container fieldset#chooser div.wavetype input {display:none;}
div#container fieldset#chooser div.wavetype label {display:block; color:#FFF; padding:.5rem .25rem .25rem; user-select:none; cursor:pointer; border:solid transparent; border-radius:inherit;}
div#container fieldset#chooser div.wavetype input:checked + label {background-color:gold;}

div#container div.btnBox button {background-color:#F0F0F0; border:1px solid #DADADA; border-radius:.25rem; box-shadow:0 1px 1px #BBB; padding:.5rem 1rem; font-size:.875rem; margin-top:1rem;}
div#container canvas#waveChart {width:100%; border:1px solid #000; margin-top:1rem;}