page.css

@font-face {
	font-family: 'Genos';
	font-display: swap;
	font-style: italic;
	font-weight: 100;
	src: url('fonts/genos.woff2');
}

@font-face {
	font-family: 'Digital 7';
	font-display: swap;
	src: url('fonts/digital-7-monoitalic.ttf');
}

@font-face {
	font-family: "America";
	font-display: swap;
	font-style: normal;
	font-weight: 400;
	src: local("America Regular"),
		local("America-Regular"),
		url("fonts/GT-America-Standard-Regular.woff2");
}

@font-face {
	font-family: "America";
	font-display: swap;
	font-style: normal;
	font-weight: 700;
	src: local("America Bold"),
		local("America-Bold"),
		url("fonts/GT-America-Standard-Bold.woff2");
}

:root {
	--accent-color: hsl(175, 30%, 41%);
	--panel-color: hsl(305, 57%, 23%);
	--border-color: hsl(300, 100%, 60%);
	--shaded: hsl(305, 65%, 15%);
	accent-color: var(--accent-color);
}

body {
	background-color: #270000;
	background-image: url('img/wood.webp');
	background-repeat: repeat;
	overflow-y: scroll;
}

.instrument-panel {
	max-width: 800px;
	min-height: 100vh;
	padding: 12px;
}

.footer {
	background-color: var(--panel-color);
	max-width: 800px;
	padding: 0.5rem 12px 4px;
}

input[type="range"] {
	-webkit-appearance: none;
	background: transparent;
	width: 100%;
}

input[type=range]:focus-visible {
	border-radius:  11px 5px;
	outline: var(--border-color) solid 1px;
}

input[type="range"]::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	background: linear-gradient(to right, hsl(305, 65%, 6%), var(--shaded));
	border-radius:  11px 5px;
	cursor: pointer;
	height: 16px;
}

input[type="range"]:hover::-webkit-slider-runnable-track {
	background: linear-gradient(to right, hsl(305, 50%, 4%), hsl(300, 50%, 12%));
}

input[type="range"]::-moz-range-track {
	background: linear-gradient(to right, hsl(305, 65%, 6%), var(--shaded));
	border-radius:  11px 5px;
	cursor: pointer;
	height: 16px;
}

.small input[type="range"]::-webkit-slider-runnable-track {
	height:  12px;
}

.small input[type="range"]::-moz-range-track {
	height:  12px;
}

input[type="range"]:hover::-moz-range-track {
	background: linear-gradient(to right, hsl(305, 50%, 4%), hsl(300, 50%, 12%));
}

input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 28px;
	width: 44px;
	border-radius: 3px;
	background-image: linear-gradient(to right, #000, #222 38%, #000 50%, #222 62%, #000 100%);
	cursor: pointer;
	margin-top: -7px;
}

input[type=range]::-webkit-slider-thumb:hover {
	background: linear-gradient(to right, #222, #444 38%, #222 50%, #444 62%, #222 100%);
}

input[type=range]::-moz-range-thumb {
	height: 28px;
	width: 44px;
	border-radius: 3px;
	border-color: #181818;
	background-color: #000;
	cursor: pointer;
}

.small input[type=range]::-webkit-slider-thumb {
	height: 23px;
	width: 33px;
	margin-top: -6px;
}

.small input[type=range]::-moz-range-thumb {
	height: 23px;
	width: 33px;
}

.small, small {
	font-size:  90%;
}

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

input.visually-hidden:focus + label {
  outline: thin dotted;
}

input.visually-hidden:focus-within + label {
  outline: thin dotted;
}

.nav-pills .nav-link {
	border-radius: 0;
	font-family: Genos, sans-serif;
	font-size: 1.1rem;
	font-weight: bold;
	margin-bottom:  4px;
}

.nav-pills .nav-link:not(.active) {
	color: #808080;
	background-color: var(--shaded);
}

.nav-pills .nav-item:not(:last-child) {
	margin-right: 10px;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
	color: #ddd;
	background-color: hsl(305deg 65% 37%);
}

.led {
	vertical-align: 10%;
	color: black;
}

.led.on {
	color: #fbb;
}

.btn {
	text-align: left;
}

.btn-led, .led-display, .led-display:disabled, .led-display:focus {
	background-color: black;
	border-radius: 0;
	color: #fbb;
	text-shadow:
		0 0 7px #ff9999,
		0 0 10px #804c4c;
	font-family: 'Digital 7', monospace;
}

.led-display {
	border-color: #777 #3c3c3c #777 #3c3c3c;
	border-style: inset;
	border-width: 2px;
	font-size:  110%;
	text-align: right;
	min-width:  74px;	/* For responsive modulation matrix */
}

.led-display.led-text {
	font-family: sans-serif;
	font-size: 100%;
	text-align: left;
}

.btn-led {
	font-size: 120%;
	letter-spacing: 1.5px;
}

input[type="number"].led-display::-webkit-outer-spin-button,
input[type="number"].led-display::-webkit-inner-spin-button {
	margin-left: 6px;
}

.led-label {
	background-color: black;
	border: 0;
	border-radius: 0;
	color: #ddd;
}

.table-striped-cols th:nth-child(2n),
.table-striped-cols td:nth-child(2n),
th.even-col:nth-child(2n + 1),
td.even-col:nth-child(2n + 1) {
	background-color: rgba(0, 0, 0, 0.05);
}

.table-striped-cols th:nth-child(2n + 1),
.table-striped-cols td:nth-child(2n + 1),
th.odd-col:nth-child(2n),
td.odd-col:nth-child(2n) {
	background-color: rgba(0, 0, 0, 0.17);
}

.bg-theme-dark {
	background-color:  hsl(305, 65%, 19%);
}

.w-fit {
	width: fit-content;
}

.panel {
	background-color: var(--panel-color);
	border-color: var(--border-color);
	border-style: solid;
	border-width: 1px;
	color: hsl(300, 100%, 73%);
	margin-bottom: 1.5rem;
	padding: 15px;
}

.panel input[type="radio"] {
	filter:  grayscale(1);
}

.panel h1 {
	font-family: Genos, sans-serif;
	font-style:  italic;
	font-weight: bold;
}

.panel .table {
	color: inherit;
}

.btn {
	border-style: outset;
}

.btn-group-toggle .btn,
.btn[data-toggle="button"] {
	border-width: 3px;
	margin-right: 1px;
}

.btn-group-toggle .btn.active,
.btn[data-toggle="button"].active {
	border-style: inset;
}

.btn:not(.btn-group .btn, .btn-led) {
	border-radius:  0.15rem;
	font-family: Arial, sans-serif;
	font-variant: small-caps;
	text-transform: lowercase;
}

.btn-dark {
	color:  #ddd;
	background-color: black;
	border-color: #2e2e2e;
}

.btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active, .show>.btn-dark.dropdown-toggle {
	color:  #ddd;
	background-color: #23272b;
	border-color: #1d2124;
}

.btn-dark:hover {
	color: #fff;
	background-color: #0c0c0c;
	border-color: #3a3a3a;
}

.dropdown-menu .btn-group-toggle .btn {
	border-width: 0;
	font-weight: 500;
}

.dropdown-compact {
	min-width: 0;
	max-width: min-content;
}

.custom-switch .custom-control-label::before {
	background-color: black;
	border: 2px inset #3c3c3c;
}

.custom-control-input:checked~.custom-control-label::before {
	background-color: var(--accent-color);
	border-color: var(--accent-color);
}

.custom-switch .custom-control-input:checked~.custom-control-label::after {
	background-color: #d8d8d8;
}

.patreon {
	background-color: rgb(232, 91, 70);
	border: 1px solid rgb(232, 91, 70);
	border-radius: 9999px;
	color: white;
	display: block;
	font-family: America, sans-serif;
	font-display: swap;
	font-size: 0.875rem;
	font-weight: 500;
	padding: 5px 1rem;
	user-select: none;
}

.patreon:hover {
	background-color: rgb(231, 81, 59);
	color: white;
	text-decoration: none;
}