html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
  margin: 0;
}

body {
	padding: 30px 0px 0px 0px !important;
	margin: 0;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: #fff;
	color: #333;
	font-size: 18px;
	line-height: 26px;
	font-family: system, -apple-system, ".SFNSText-Regular", "Helvetica Neue", "Lucida Grande", sans-serif;
	font-weight: 300;
	float: inherit;
	position: relative;
	-webkit-font-smoothing: antialiased;
	-webkit-user-select: none;
}

* Text Styling */

p {
	font-size: 18px;
	line-height: 26px;
	text-align: center;
	font-weight: 300;
	display: block;
	padding: 0 30px;
}


h1 {
	font-size: 46px;
	line-height: 46px;
	text-align: center;
	font-weight: 800;
	display: block;
	text-transform: uppercase;
	height: auto;
	padding: 0 30px;
}


h2 {
	font-size: 32px;
	line-height: 34px;
	text-align: center;
	font-weight: 700;
	display: block;
	margin-bottom: 0;
	padding-bottom: 0;
	height: auto;
	padding: 0 30px;
}

h3 {
	font-size: 30px;
	line-height: 42px;
	text-align: center;
	font-weight: 400;
	padding: 0 30px;
}

h4 {
	font-size: 22px;
	line-height: 28px;
	text-align: center;
	font-weight: 400;
	display: block;
	height: auto;
	margin-bottom: 12px;
	padding: 0 30px;
}

a {
	color: #007AFF;
}

a.button {
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 1px 1px rgba(0, 0, 0, 0.02);
	color: #222;
	font-size: 16px;
	font-weight: 500;
	border-radius: 8px;
	width: auto;
	padding: 0 25px;
	text-align: center;
	cursor: pointer;
}

a.button.default {
	background: #4E8FF7;
	background: linear-gradient(to bottom, color(display-p3 0.169 0.565 1) 0%,color(display-p3 0 0.478 1) 100%);
	box-shadow: 0 2px 3px color(display-p3 0 0.478 1 / 0.2);
	color: #FFF;
}

a.button:active {
	background: #F0F0F0;
}

a.button.default:active {
	background: linear-gradient(to bottom, color(display-p3 0.227 0.482 0.89) 0%,color(display-p3 0.165 0.392 0.89) 100%);
	box-shadow: 0 2px 3px color(display-p3 0 0.478 1 / 0.2);
	color: rgba(255, 255, 255, 0.7);
}

.button-row {
	width: 100%;
	bottom: -11px;
	left: 0;
	position: absolute;
	display: flex;
	justify-content: space-between;
	margin: 30px auto 0 auto;
	padding: 15px;
	background: #f1f1f1;
}

.button-row .button:only-child {
	margin-left: auto;
}

.button:focus-visible {
	outline: 5px solid #0571A3;
  border-radius: 8px;
}

.badged-icon {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr;
	justify-items: center;
	align-items: start;
	height: 256px;
	position: relative;
	margin: 15px 0 15px 0;
}

.badged-icon .icon {
	grid-column: 1;
	grid-row: 1;
}

.badged-icon .badge {
	grid-column: 1;
	grid-row: 1;
	margin: 120pt 0 0 -140pt;
}


/* Tinted Controls and Text */
.airfoil .tinted, .airfoil-for-mac .tinted, .airfoil-mac .tinted {
	color: #0571A3;
}

.airfoil .tinted.button, .airfoil-for-mac .button, .airfoil-mac .button {
	background-color: #0571A3;
}

.audio-hijack .tinted {
	color: #FF9500;
	color: color(display-p3 0.943 0.604 0.218);
}

.audio-hijack .tinted.button {
	background-color: #FF9500;
	background-color: color(display-p3 0.943 0.604 0.218);	
}

.farrago .tinted {
	color: #7234DC;
}

.farrago .tinted.button {
	background-color: #7234DC;
	color: #FFF;
}

.fission .tinted {
	color: #D7B85A;
}

.fission .tinted.button {
	background-color: #D7B85A;
	color: #FFF;
}

.loopback .tinted {
	color: #3CBFBF;
}

.loopback .tinted.button {
	background-color: #3CBFBF;
	color: #FFF;
}

.piezo .tinted {
	color: #C1773E;
}

.piezo .tinted.button {
	background-color: #C1773E;
	color: #FFF;
}

.soundsource .tinted {
	color: #279878;
}

.soundsource .tinted.button {
	background-color: #279878;
	color: #FFF;
}

/* Dark Mode! */
@media (prefers-color-scheme: dark) {
	body {
		color: #fff;
		background: #222;
	}
	
	.button-row {
		background: #444;
	}
	
	a {
		color: #6aafff;
	}
	
	a.button {
		background: #565656;
		color: #fff;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 1px 1px rgba(0, 0, 0, 0.02), 0 1px 0 #787878 inset;
		font-weight: 500;
	}
	
	a.button.default {
		background: linear-gradient(to bottom, color(display-p3 0.231 0.439 0.875) 0%,color(display-p3 0.173 0.365 0.776) 100%);
		box-shadow: 0 2px 3px color(display-p3 0 0 0 / 0.2), 0 1px 0 color(display-p3 0.453 0.584 0.886) inset;
		color: #E2EAFB;
	}
	
	a.button:active {
		background: #686868;
	}
	
	a.button.default:active {
		background: linear-gradient(to bottom, color(display-p3 0.238 0.464 0.937) 0%,color(display-p3 0.207 0.41 0.845) 100%);
		box-shadow: 0 2px 3px color(display-p3 0 0 0 / 0.2), 0 1px 0 color(display-p3 0.453 0.584 0.886) inset;
		color: rgba(255, 255, 255, 0.7);
	}
	
	/* Tinted Controls and Text */
	.airfoil .tinted, .airfoil-for-mac .tinted, .airfoil-mac .tinted {
		color: #37bfe7;
	}
	
	.airfoil .tinted.button, .airfoil-for-mac .button, .airfoil-mac .button {
		background-color: #37bfe7;
	}
	
	.farrago .tinted {
		color: #AE70FF;
		color: color(display-p3 0.686 0.443 1);
	}
	
	.farrago .tinted.button {
		background-color: #AE70FF
		background-color: color(display-p3 0.686 0.443 1);
		color: #FFF;
	}
}