:root {
	--audioMotion-gradient: linear-gradient( -45deg, #ffdf43, #fa5476, #c63bf3, #8550ff, #4a68f7, #23d2ff );
	--cover-background-color: transparent;
	--cover-background-image: none;
	--cover-background-mask-color: #000;
	--cover-background-mask-opacity: .25;
	--cover-blockquote-color: #f0f0f0;
	--cover-blockquote-font-size: 2rem;
	--cover-button-background: #023c;
	--cover-color: #ccc;
	--cover-button-color: hsl( var(--theme-hue), var(--theme-saturation), 80% );
	--cover-button-border: 1px solid var(--cover-button-color);
	--cover-heading-font-size-min: 42;
	--cover-heading-font-size-max: 100;
	--sidebar-name-font-family: Orbitron, var(--base-font-family);
	--sidebar-name-font-weight: 900;
}

@media (min-width: 1200px) {
	:root {
		--cover-max-width: 1200px;
		--content-max-width: 1200px;
	}
}

big {
	font-size: 125%;
	line-height: 1;
}

h2 .emoji {
	height: 1em;
}

h3 code {
	font-size: inherit !important;
}

img {
	max-width: 100%;
}

strong code {
	font-weight: bold !important;
}

.cover h1 span {
	background: var(--audioMotion-gradient);
	background-clip: text;
	filter: drop-shadow(.05em .05em 0 #0004);
	font-family: Orbitron, var(--base-font-family);
	font-weight: 900;
	position: relative;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.cover ul {
	margin: 2em 0;
}

.cover blockquote p {
	font-style: italic;
	margin-top: 0;
}

.cover blockquote strong {
	color: inherit;
	font-weight: 700;
}

.img-center {
	display: block;
	margin: 0 auto;
}
.img-right {
	float: right;
	margin: 1em 0 1em 1em;
}

.sidebar > h1 .app-name-link {
	background: var(--audioMotion-gradient);
	background-clip: text;
	font-size: 140%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

p ~ .table-wrapper table {
	margin-top: 0;
}

.sidebar-nav ul ul ul li {
	font-size: 80%;
}

/* Settings panel image highlight areas */

.settings-panel {
	background: url(img/settings-panel.png);
	background-size: contain;
	height: 305px;
	line-height: 0;
	margin: 0 auto;
	position: relative;
	width: 800px;
}

[class*="highlight-"] {
	--top: -1px;
	--left: -1px;
	--height: 101%;
	--width: 101%;
}
.active[class*="highlight-"] {
	--width: 155px;
}
[class*="highlight-"]::before {
	--top-left: var(--left) var(--top);
	--top-right: calc( var(--left) + var(--width) ) var(--top);
	--bot-right: calc( var(--left) + var(--width) ) calc( var(--top) + var(--height) );
	--bot-left: var(--left) calc( var(--top) + var(--height) );

	clip-path: polygon( 0 0, var(--top-left), var(--top-right), var(--bot-right), var(--bot-left), var(--top-left), 0 0, 0 100%, 100% 100%, 100% 0 );
	content: '';
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	transition: all .3s;
	width: 101%;
}
.active[class*="highlight-"]::before {
	background: #fffa;
}

[class*="highlight-"]::after {
	content: '';
	height: var(--height);
	left: var(--left);
	outline: 2px solid transparent;
	position: absolute;
	top: var(--top);
	transition: all .3s;
	width: var(--width);
}
.active[class*="highlight-"]::after {
	outline-color: #c00;
}

.active.highlight-preset {
	--top: 8px;
	--left: 10px;
	--height: 52px;
}
.active.highlight-randomize {
	--top: 57px;
	--left: 10px;
	--height: 58px;
}
.active.highlight-bar-spacing {
	--top: 114px;
	--left: 10px;
	--height: 58px;
}
.active.highlight-line-width-fill-opacity {
	--top: 170px;
	--left: 10px;
	--height: 120px;
}
.active.highlight-mode {
	--top: 2px;
	--left: 166px;
	--height: 58px;
}
.active.highlight-gradients {
	--top: 57px;
	--left: 166px;
	--height: 85px;
}
.active.highlight-color-mode {
	--top: 172px;
	--left: 166px;
	--height: 58px;
}
.active.highlight-radial-spin {
	--top: 232px;
	--left: 166px;
	--height: 58px;
}
.active.highlight-background {
	--top: 2px;
	--left: 322px;
	--height: 58px;
}
.active.highlight-bgimagefit {
	--top: 57px;
	--left: 322px;
	--height: 58px;
}
.active.highlight-background-dim {
	--top: 114px;
	--left: 322px;
	--height: 58px;
}
.active.highlight-reflex {
	--top: 172px;
	--left: 322px;
	--height: 58px;
}
.active.highlight-mirror {
	--top: 232px;
	--left: 322px;
	--height: 58px;
}
.active.highlight-frequency-range {
	--top: 2px;
	--left: 479px;
	--height: 58px;
}
.active.highlight-frequency-scale {
	--top: 57px;
	--left: 479px;
	--height: 58px;
}
.active.highlight-sensitivity {
	--top: 114px;
	--left: 479px;
	--height: 58px;
}
.active.highlight-weighting {
	--top: 172px;
	--left: 479px;
	--height: 58px;
}
.active.highlight-channel-layout {
	--top: 232px;
	--left: 479px;
	--height: 58px;
}
.active.highlight-switches {
	--top: 2px;
	--left: 635px;
	--height: 270px;
}