body {
	font-family: 'Open Sans', 'Segoe UI', Roboto, Helvetica, sans-serif;
	
	background-color: var(--color-bg);
}

section {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
	section h2 {
		flex-basis: 100%;
		margin: 8px;
	}

.demo-box {
	display: inline-block;
	padding: 32px;
	vertical-align: top;
}

.recalc-colors {
	--color-accent-5: rgba(var(--color-accent-r), var(--color-accent-g), var(--color-accent-b), 0.05);
	--color-accent-10: rgba(var(--color-accent-r), var(--color-accent-g), var(--color-accent-b), 0.1);
	--color-accent-15: rgba(var(--color-accent-r), var(--color-accent-g), var(--color-accent-b), 0.15);
	--color-accent-20: rgba(var(--color-accent-r), var(--color-accent-g), var(--color-accent-b), 0.2);
	--color-accent-25: rgba(var(--color-accent-r), var(--color-accent-g), var(--color-accent-b), 0.25);
	--color-accent-50: rgba(var(--color-accent-r), var(--color-accent-g), var(--color-accent-b), 0.5);
	--color-tile-accent: var(--color-accent-15);
	--color-tile-accent-active: var(--color-accent-15);
	--color-tile-glow: var(--color-accent-20);
}