<commit_before>$colorDark1: #4C77A6;
$colorDark2: #353a3d;
$colorDark3: #282c2e;

$colorBackground: #f0e6d8;
$colorBackgroundDarker: #f7ddb7;

$colorText: saturate(darken($colorDark1, 25%), 25%);
$colorTextLight: #a38c72;

$colorAccent: #a9c6c7;

$colorDull1: #353a3d;

$colorCycling: #ec5f30;
$colorWalking: #24d672;
$colorFandL: #cb9625;
$colorAandV: #5360e1;
$colorMisc: #71616a;

$ffSans: "futura-pt", "Futura PT", Futura, sans-serif;
$ffSerif: "adobe-caslon-pro", "Adobe Caslon Pro", "Baskerville", serif;

$backgroundGradient: linear-gradient(to bottom, $colorBackgroundDarker, $colorBackground);

$gutter: 15px;

* {
	z-index: 1;
}

::selection {
	background-color: $colorDull1;
	color: $colorBackground;
}

body {
	margin: 0;
	color: $colorText;
	background-color: $colorBackground;
	background-image: $backgroundGradient;
	background-attachment: fixed;
	font-family: $ffSans;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	align-content: space-between;
	justify-content: center;
	//max-height: 100vh;
	//overflow: hidden;
}

p {
	font-size: 15px;
	line-height: 21px;
	font-family: $ffSerif;
	margin: ($gutter / 2) 0;
}

p.sources {
	margin-top: $gutter;
	color: $colorTextLight;
	font-size: 10px;
	line-height: 14px;
	text-transform: uppercase;
	
	a[href] {
		text-decoration: underline;
	}
}

a[href] {
	text-decoration: none;
}

p a[href] {
	color: $colorTextLight;
}
				
.si-unit {
	text-transform: none;
}

canvas {
	font-family: $ffSans;
	position: absolute;
	top: 0;
	left: 0;
	cursor: hand;
	cursor: -webkit-grab;
	
	&:active {
		cursor: -webkit-grabbing;
	}
}

.overlay {
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
}

#start {
	width: 100vw;
	height: 100vh;
	text-align: center;
	background-image: $backgroundGradient;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 480px;
	
	main {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	h1 {
		font-size: 24px;
		line-height: 28px;
		letter-spacing: 0.015em;
		text-transform: uppercase;
		margin: 8px 0;
	}
	
	h2 {
		font-size: 21px;
		line-height: 24px;
		margin: 4px 0;
	}
	
	header {
		margin-bottom: $gutter * 2;
	}
	
	.choices {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: space-between;
		flex-direction: row;
		margin: $gutter * 2 0;
		padding: $gutter * 4 $gutter;
		width: 100%;
		max-width: 640px;
		
		&:before {
			position: absolute;
			top: 0;
			left: 25%;
			content: "";
			display: block;
			margin: 0 auto;
			height: 1px;
			width: 50%;
			background-color: rgba($colorTextLight, 0.25);
		}
		
		a {
			position: relative;
			width: 50%;
			color: darken($colorDark1, 25%);
			flex: 0 1 auto;
			padding: 0 $gutter;
			z-index: 1;
			transition: transform 400ms ease-in-out;
			
			h3 {
				font-size: 24px;
				margin: 24px 0 4px 0;
			}
			
			& > * {
				position: relative;
				z-index: 1;
				transition: opacity 400ms ease-in-out 50ms;
			}
			
			&:before {
				$dimension: 96px;
				position: absolute;
				content: "";
				display: block;
				background-position: center center;
				background-repeat: no-repeat;
				background-size: contain;
				width: $dimension;
				height: $dimension;
				top: calc(50% - #{$dimension / 2});
				left: calc(50% - #{$dimension / 2});
				z-index: 0;
				opacity: 0.065;
				transition: opacity 200ms ease-in-out;
			}
			
			&:hover:before {
				opacity: 0.125;
			}
		
			&[href*=maps]:before {
				background-image: url("/img/mode_maps.svg");
			}
			&[href*=stats]:before {
				background-image: url("/img/mode_stats.svg");
			}
			
			&.default {
				pointer-events: none;
			}
			
			&.default > * {
				opacity: 0;
			}
			
			&.default:first-child {
				transform: translateX(50%);
			}
			
			&.default:last-child {
				transform: translateX(-50%);
			}
		}
	}
	
	& + * {
		position: fixed;
	}
}

body > main {
	flex: 1 1 auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	align-content: space-between;
	justify-content: center;
}

body > nav {
	position: relative;
	width: 100%;
	height: 58px;
	text-align: center;
	background-color: $colorDark2;
	flex: 0 1 auto;
	overflow: hidden;
	color: $colorBackground;
	
	h1 {
		font-size: 24px;
		margin: 0;
		line-height: 58px;
		letter-spacing: 0.015em;
		text-transform: uppercase;
	}
	
	a[href=\/] {
		margin-top: 6px;
		font-weight: 600;
		position: absolute;
		top: 0;
		left: $gutter;
		display: inline-block;
		font-size: 8px;
		text-align: center;
		text-transform: uppercase;
		color: $colorText;
		
		&:before {
			width: 32px;
			height: 32px;
			display: block;
			margin: 0 auto;
			margin-bottom: 4px;
			position: relative;
			content: "";
			background-size: 100% 100%;
			background-position: center center;
			background-repeat: no-repeat;
			vertical-align: middle;
			background-color: white;	
		}
	}
	
	[data-hook=switch-modes] {
		margin-top: 6px;
		font-weight: 600;
		position: absolute;
		top: 0;
		right: $gutter;
		display: inline-block;
		font-size: 8px;
		text-align: center;
		text-transform: uppercase;
		color: $colorText;
		
		&:before {
			width: 32px;
			height: 32px;
			display: block;
			margin: 0 auto;
			margin-bottom: 4px;
			position: relative;
			content: "";
			background-size: 100% 100%;
			background-position: center center;
			background-repeat: no-repeat;
			vertical-align: middle;		
		}
		
		&[href*=maps]:before {
			background-image: url("/img/mode_maps.svg");
		}
		&[href*=stats]:before {
			background-image: url("/img/mode_stats.svg");
		}
	}
}

body > main > section {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	align-content: space-between;
	justify-content: center;
}

body > main > section > main {
	//position: relative;
	flex: 1 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	align-content: space-between;
	justify-content: center;
	//max-height: calc(100vh - 128px);
}

body > main > section > nav {
	flex: 0 0 auto;
	height: 32px;
	width: 100%;
	background-color: $colorAccent;
	text-align: center;
	
	a[href] {
		color: rgba(darken($colorAccent, 35%), 0.8);
		line-height: 32px;
		font-size: 14px;
		font-weight: 600;
		vertical-align: middle;
		letter-spacing: 0.08em;
		margin: 0 ($gutter / 2);
	
		&:hover {
			color: $colorDark2;
		}
	}
}

body > main > section#maps {
	position: relative;
	
	main {
		position: relative;
	}
	
	[data-hook=legend] {
		cursor: pointer;
		position: absolute;
		top: 0;
		right: 0;
		margin: $gutter;
		display: inline-block;
		font-size: 8px;
		font-weight: 600;
		text-align: center;
		text-transform: uppercase;
		color: $colorText;
		
		&:before {
			content: "";
			display: block;
			margin: 0 auto;
			width: 32px;
			height: 32px;
			margin-bottom: 4px;
			background-color: red;
		}
	}
	
	@each $area in to, lv, nyc, pdx, surrey {
		&[data-area=#{$area}] > nav a[href*=#{$area}] {
			color: $colorDark2;
		}
	}
}

#loading-holder {
	background-image: $backgroundGradient;
	width: 100vw;
	height: 100%;
	padding: $gutter;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	
	.progress-holder {
		width: 100%;
		max-width: 480px;
		height: 2px;
		margin: $gutter 0;
		background-color: rgba($colorTextLight, 0.5);
		
		.progress {
			background-color: $colorText;
			height: 2px;
			//transition: width 50ms ease-in-out;
		}
	}
	
	p {
		color: $colorTextLight;
	}
}

#maps-legend {
	background-image: linear-gradient(to bottom, rgba($colorBackgroundDarker, 0.8), $colorBackground);
	width: 100vw;
	height: 100%;
	
	main {
		position: relative;
		width: 100%;
		max-width: 1080px;
		flex: 0 1 auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: relative;
		box-sizing: border-box;
	}
	
	[data-hook=close] {
		position: absolute;
		z-index: 100;
		top: 0;
		right: 0;
		margin: $gutter;
		display: inline-block;
		font-size: 8px;
		font-weight: 600;
		text-align: center;
		text-transform: uppercase;
		color: $colorText;
		
		&:before {
			content: "";
			display: block;
			margin: 0 auto;
			width: 32px;
			height: 32px;
			margin-bottom: 4px;
			background-color: red;
		}
		
	}
	
	.text-holder {
		$width: 480px;
		flex: 0 1 $width;
		max-width: $width * 2;
		max-height: 80vh;
		padding: $gutter;
		box-sizing: border-box;
		margin: $gutter;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: flex-start;
		position: sticky;
		top: 0;
	}
	
	.legend-holder {
		$width: 260px;
		flex: 0 1 $width;
		min-width: $width;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: flex-start;
		position: relative;
		box-sizing: border-box;
		margin: $gutter;
	}
	
	.legend {
		padding: $gutter;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: flex-start;
		box-sizing: border-box;
		
		border: 1px solid rgba($colorTextLight, 0.25);
		
		h3 {
			margin: $gutter / 2 0;
		}
		
		.features {
			border-top: 1px solid rgba($colorTextLight, 0.25);
			padding-top: $gutter;
			
			hr {
				border: none;
				height: 1px;
				margin: 8px 0;
				box-shadow: inset 0px 0px 0px 1px rgba($colorTextLight, 0.25);
			}
			
			article {
				$dimension: 32px;
				line-height: $dimension;
				font-size: 16px;
				margin-bottom: $gutter / 4;
			
				.icon {
					position: relative;
					width: $dimension;
					height: $dimension;
					display: inline-block;
					background-color: mix($colorBackground, $colorBackgroundDarker, 50%);
					vertical-align: bottom;
					margin-right: $gutter;
					text-align: center;
				}
				
				&[data-feature=cycling] .icon {
					background-image: linear-gradient(to bottom right,
						rgba(#d1368e, 0) 45%,
						rgba(#d1368e, 1) 45%,
						rgba(#d1368e, 1) 55%,
						rgba(#d1368e, 0) 55%
					);
				}
				
				&[data-feature=walking] .icon {
					background-image: linear-gradient(to bottom right, 
						rgba(#44c0c2, 0) 45%,
						rgba(#44c0c2, 1) 45%,
						rgba(#44c0c2, 1) 55%,
						rgba(#44c0c2, 0) 55%
					);
				}
				
				&[data-feature=checkins] .icon:before {
					content: "";
					position: relative;
					display: inline-block;
					width: $dimension / 4;
					height: $dimension / 4;
					top: 50%;
					margin-top: -$dimension / 8;
					border-radius: 50% 50%;
					background-color: #16385d;
					box-shadow: 0px 0px 0px 4px $colorBackground;
				}
				
				&[data-feature=parks] .icon {
					background-color: #f0cf99;
				}
				
				&[data-feature=water] .icon {
					background-color: #afafb3;
				}
				
				&[data-feature=buildings] .icon {
					background-color: #dbc5a7;
				}
				
				&[data-feature=airport] .icon {
					background-color: #f0d9b9;
					
					&:before {
						width: 100%;
						height: 100%;
						content: "";
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						background-image: linear-gradient(to bottom right, 
							rgba(#dbc5a7, 0) 30%,
							rgba(#dbc5a7, 1) 30%,
							rgba(#dbc5a7, 1) 40%,
							rgba(#dbc5a7, 0) 40%,
							rgba(#dbc5a7, 0) 60%,
							rgba(#dbc5a7, 1) 60%,
							rgba(#dbc5a7, 1) 70%,
							rgba(#dbc5a7, 0) 70%
						);
					}
				}
				
				&[data-feature=transit] .icon {
					background-image: linear-gradient(to bottom right, 
						rgba(#e2ccaf, 0) 45%,
						rgba(#e2ccaf, 1) 45%,
						rgba(#e2ccaf, 1) 55%,
						rgba(#e2ccaf, 0) 55%
					);
				}
			}
		}
	}
}

body > main > section#stats {
	position: relative;
	
	@each $type in "cycling", "walking", "food\\+liquor", "audio\\+video", "miscellaneous" {
		&[data-type=#{$type}] nav a[href*=#{$type}] {
			color: $colorDark2;
		}
	}
	
	@mixin sectionColor($section, $color) {
		&[data-type=#{$section}] {
			& > main {
				::selection {
					background-color: $color;
				}
			
				h3 {
					color: $color;
				}
			}
		}
	}
	
	/*@include sectionColor("cycling", $colorCycling);
	@include sectionColor("walking", $colorWalking);
	@include sectionColor("food\\+liquor", $colorFandL);
	@include sectionColor("audio\\+video", $colorAandV);
	@include sectionColor("miscellaneous", $colorMisc);*/
}

body > main > section > main > section {
	width: 1080px;
	padding: $gutter;
	box-sizing: border-box;
	flex: 0 1 auto;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	position: relative;
	
	& > * {
		z-index: 1;
	}
	
	.text-holder {
		$width: 260px;
		flex: 1 1 $width;
		min-width: $width;
		max-height: 80vh;
		padding: $gutter;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: flex-start;
		position: sticky;
		top: 0;
	}
	
	.text {
		//width: $width;
		position: relative;
		
		h2 {
			font-size: 32px;
			margin: $gutter * 1.5 0;
			z-index: 1;
			color: $colorText;
			
			&:after {
				content: "";
				position: absolute;
				display: block;
				width: 64px;
				height: 2px;
				margin-top: 2px;
				margin-bottom: -2px;
				background-color: $colorText;
				user-select: none;
				pointer-events: none;
				z-index: 0;
			}
		}
			
		p {
			white-space: pre-line;
			
			.digit {
				display: inline-block;
				font-family: $ffSans;
				vertical-align: bottom;
				font-weight: 400;
				//font-size: 17px;
				vertical-align: middle;
				//margin: 0px 2px;
				margin-top: -4px; 
			}
		}
	}
	
	.stats {
		//background-color: yellow;
		position: relative;
		flex: 1 1 auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-content: flex-start;
		padding: $gutter 0;
		box-sizing: border-box;
		
		article {
			text-align: center;
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			justify-content: center;
			align-content: center;
			width: 220px;
			height: 145px;
			margin: 2px;
			//background-color: red;
			box-shadow: inset 0px 0px 0px 1px rgba($colorTextLight, 0.25);
			
			h3 {
				font-weight: 400;
				font-size: 42px;
				line-height: 58px;
				margin: 0;
				margin-top: $gutter/2;
				margin-bottom: $gutter/2;
			}
			
			h4 {
				font-size: 12px;
				line-height: 1em;
				letter-spacing: 0.05em;
				font-weight: 600;
				text-transform: uppercase;
				margin: 0;
				color: rgba($colorDull1, 0.65);
				margin-top: 4px;
			}
			
			h5 {
				margin: 0;
				font-size: 12px;
				line-height: 8px;
				font-weight: 400;
				color: $colorTextLight;
				
				&:not(:empty) {
					margin-bottom: -8px;
				}
			}
		}
	}
}<commit_msg>Better start styles<commit_after>$colorDark1: #4C77A6;
$colorDark2: #353a3d;
$colorDark3: #282c2e;

$colorBackground: #f0e6d8;
$colorBackgroundDarker: #f7ddb7;

$colorText: saturate(darken($colorDark1, 25%), 25%);
$colorTextLight: #a38c72;

$colorAccent: #a9c6c7;

$colorDull1: #353a3d;

$colorCycling: #ec5f30;
$colorWalking: #24d672;
$colorFandL: #cb9625;
$colorAandV: #5360e1;
$colorMisc: #71616a;

$ffSans: "futura-pt", "Futura PT", Futura, sans-serif;
$ffSerif: "adobe-caslon-pro", "Adobe Caslon Pro", "Baskerville", serif;

$backgroundGradient: linear-gradient(to bottom, $colorBackgroundDarker, $colorBackground);

$gutter: 15px;

* {
	z-index: 1;
}

::selection {
	background-color: $colorDull1;
	color: $colorBackground;
}

body {
	margin: 0;
	color: $colorText;
	background-color: $colorBackground;
	background-image: $backgroundGradient;
	background-attachment: fixed;
	font-family: $ffSans;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	align-content: space-between;
	justify-content: center;
	//max-height: 100vh;
	//overflow: hidden;
}

p {
	font-size: 15px;
	line-height: 21px;
	font-family: $ffSerif;
	margin: ($gutter / 2) 0;
}

p.sources {
	margin-top: $gutter;
	color: $colorTextLight;
	font-size: 10px;
	line-height: 14px;
	text-transform: uppercase;
	
	a[href] {
		text-decoration: underline;
	}
}

a[href] {
	text-decoration: none;
}

p a[href] {
	color: $colorTextLight;
}
				
.si-unit {
	text-transform: none;
}

canvas {
	font-family: $ffSans;
	position: absolute;
	top: 0;
	left: 0;
	cursor: hand;
	cursor: -webkit-grab;
	
	&:active {
		cursor: -webkit-grabbing;
	}
}

.overlay {
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
}

#start {
	width: 100vw;
	height: 100vh;
	text-align: center;
	background-image: $backgroundGradient;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: $gutter 0;
	box-sizing: border-box;
	
	main {
		width: 100%;
		flex: 1 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: $gutter;
		box-sizing: border-box;
	}
	
	h1 {
		font-size: 24px;
		line-height: 28px;
		letter-spacing: 0.015em;
		text-transform: uppercase;
		margin: 8px 0;
	}
	
	h2 {
		font-size: 21px;
		line-height: 24px;
		margin: 4px 0;
	}
	
	.body {
		text-align: left;
		width: 100%;
		max-width: 400px;
	}
	
	header {
		margin-bottom: $gutter * 2;
	}
	
	.choices {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: space-between;
		flex-direction: row;
		margin: $gutter * 2 0 0 0;
		padding: $gutter * 4 $gutter 0 $gutter;
		width: 100%;
		max-width: 640px;
		
		&:before {
			position: absolute;
			top: 0;
			left: 25%;
			content: "";
			display: block;
			margin: 0 auto;
			height: 1px;
			width: 50%;
			background-color: rgba($colorTextLight, 0.25);
		}
		
		a {
			position: relative;
			width: 50%;
			color: darken($colorDark1, 25%);
			flex: 0 1 auto;
			padding: 0 $gutter;
			z-index: 1;
			transition: transform 400ms ease-in-out;
			
			h3 {
				font-size: 24px;
				margin: 24px 0 4px 0;
			}
			
			& > * {
				position: relative;
				z-index: 1;
				transition: opacity 400ms ease-in-out 50ms;
			}
			
			&:before {
				$dimension: 96px;
				position: absolute;
				content: "";
				display: block;
				background-position: center center;
				background-repeat: no-repeat;
				background-size: contain;
				width: $dimension;
				height: $dimension;
				top: calc(50% - #{$dimension / 2});
				left: calc(50% - #{$dimension / 2});
				z-index: 0;
				opacity: 0.065;
				transition: opacity 200ms ease-in-out;
			}
			
			&:hover:before {
				opacity: 0.125;
			}
		
			&[href*=maps]:before {
				background-image: url("/img/mode_maps.svg");
			}
			&[href*=stats]:before {
				background-image: url("/img/mode_stats.svg");
			}
			
			&.default {
				pointer-events: none;
			}
			
			&.default > * {
				opacity: 0;
			}
			
			&.default:first-child {
				transform: translateX(50%);
			}
			
			&.default:last-child {
				transform: translateX(-50%);
			}
		}
	}
	
	& + * {
		position: fixed;
	}
}

body > main {
	flex: 1 1 auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	align-content: space-between;
	justify-content: center;
}

body > nav {
	position: relative;
	width: 100%;
	height: 58px;
	text-align: center;
	background-color: $colorDark2;
	flex: 0 1 auto;
	overflow: hidden;
	color: $colorBackground;
	
	h1 {
		font-size: 24px;
		margin: 0;
		line-height: 58px;
		letter-spacing: 0.015em;
		text-transform: uppercase;
	}
	
	a[href=\/] {
		margin-top: 6px;
		font-weight: 600;
		position: absolute;
		top: 0;
		left: $gutter;
		display: inline-block;
		font-size: 8px;
		text-align: center;
		text-transform: uppercase;
		color: $colorText;
		
		&:before {
			width: 32px;
			height: 32px;
			display: block;
			margin: 0 auto;
			margin-bottom: 4px;
			position: relative;
			content: "";
			background-size: 100% 100%;
			background-position: center center;
			background-repeat: no-repeat;
			vertical-align: middle;
			background-color: white;	
		}
	}
	
	[data-hook=switch-modes] {
		margin-top: 6px;
		font-weight: 600;
		position: absolute;
		top: 0;
		right: $gutter;
		display: inline-block;
		font-size: 8px;
		text-align: center;
		text-transform: uppercase;
		color: $colorText;
		
		&:before {
			width: 32px;
			height: 32px;
			display: block;
			margin: 0 auto;
			margin-bottom: 4px;
			position: relative;
			content: "";
			background-size: 100% 100%;
			background-position: center center;
			background-repeat: no-repeat;
			vertical-align: middle;		
		}
		
		&[href*=maps]:before {
			background-image: url("/img/mode_maps.svg");
		}
		&[href*=stats]:before {
			background-image: url("/img/mode_stats.svg");
		}
	}
}

body > main > section {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	align-content: space-between;
	justify-content: center;
}

body > main > section > main {
	//position: relative;
	flex: 1 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	align-content: space-between;
	justify-content: center;
	//max-height: calc(100vh - 128px);
}

body > main > section > nav {
	flex: 0 0 auto;
	height: 32px;
	width: 100%;
	background-color: $colorAccent;
	text-align: center;
	
	a[href] {
		color: rgba(darken($colorAccent, 35%), 0.8);
		line-height: 32px;
		font-size: 14px;
		font-weight: 600;
		vertical-align: middle;
		letter-spacing: 0.08em;
		margin: 0 ($gutter / 2);
	
		&:hover {
			color: $colorDark2;
		}
	}
}

body > main > section#maps {
	position: relative;
	
	main {
		position: relative;
	}
	
	[data-hook=legend] {
		cursor: pointer;
		position: absolute;
		top: 0;
		right: 0;
		margin: $gutter;
		display: inline-block;
		font-size: 8px;
		font-weight: 600;
		text-align: center;
		text-transform: uppercase;
		color: $colorText;
		
		&:before {
			content: "";
			display: block;
			margin: 0 auto;
			width: 32px;
			height: 32px;
			margin-bottom: 4px;
			background-color: red;
		}
	}
	
	@each $area in to, lv, nyc, pdx, surrey {
		&[data-area=#{$area}] > nav a[href*=#{$area}] {
			color: $colorDark2;
		}
	}
}

#loading-holder {
	background-image: $backgroundGradient;
	width: 100vw;
	height: 100%;
	padding: $gutter;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	
	.progress-holder {
		width: 100%;
		max-width: 480px;
		height: 2px;
		margin: $gutter 0;
		background-color: rgba($colorTextLight, 0.5);
		
		.progress {
			background-color: $colorText;
			height: 2px;
			//transition: width 50ms ease-in-out;
		}
	}
	
	p {
		color: $colorTextLight;
	}
}

#maps-legend {
	background-image: linear-gradient(to bottom, rgba($colorBackgroundDarker, 0.8), $colorBackground);
	width: 100vw;
	height: 100%;
	
	main {
		position: relative;
		width: 100%;
		max-width: 1080px;
		flex: 0 1 auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: relative;
		box-sizing: border-box;
	}
	
	[data-hook=close] {
		position: absolute;
		z-index: 100;
		top: 0;
		right: 0;
		margin: $gutter;
		display: inline-block;
		font-size: 8px;
		font-weight: 600;
		text-align: center;
		text-transform: uppercase;
		color: $colorText;
		
		&:before {
			content: "";
			display: block;
			margin: 0 auto;
			width: 32px;
			height: 32px;
			margin-bottom: 4px;
			background-color: red;
		}
		
	}
	
	.text-holder {
		$width: 480px;
		flex: 0 1 $width;
		max-width: $width * 2;
		max-height: 80vh;
		padding: $gutter;
		box-sizing: border-box;
		margin: $gutter;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: flex-start;
		position: sticky;
		top: 0;
	}
	
	.legend-holder {
		$width: 260px;
		flex: 0 1 $width;
		min-width: $width;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: flex-start;
		position: relative;
		box-sizing: border-box;
		margin: $gutter;
	}
	
	.legend {
		padding: $gutter;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: flex-start;
		box-sizing: border-box;
		
		border: 1px solid rgba($colorTextLight, 0.25);
		
		h3 {
			margin: $gutter / 2 0;
		}
		
		.features {
			border-top: 1px solid rgba($colorTextLight, 0.25);
			padding-top: $gutter;
			
			hr {
				border: none;
				height: 1px;
				margin: 8px 0;
				box-shadow: inset 0px 0px 0px 1px rgba($colorTextLight, 0.25);
			}
			
			article {
				$dimension: 32px;
				line-height: $dimension;
				font-size: 16px;
				margin-bottom: $gutter / 4;
			
				.icon {
					position: relative;
					width: $dimension;
					height: $dimension;
					display: inline-block;
					background-color: mix($colorBackground, $colorBackgroundDarker, 50%);
					vertical-align: bottom;
					margin-right: $gutter;
					text-align: center;
				}
				
				&[data-feature=cycling] .icon {
					background-image: linear-gradient(to bottom right,
						rgba(#d1368e, 0) 45%,
						rgba(#d1368e, 1) 45%,
						rgba(#d1368e, 1) 55%,
						rgba(#d1368e, 0) 55%
					);
				}
				
				&[data-feature=walking] .icon {
					background-image: linear-gradient(to bottom right, 
						rgba(#44c0c2, 0) 45%,
						rgba(#44c0c2, 1) 45%,
						rgba(#44c0c2, 1) 55%,
						rgba(#44c0c2, 0) 55%
					);
				}
				
				&[data-feature=checkins] .icon:before {
					content: "";
					position: relative;
					display: inline-block;
					width: $dimension / 4;
					height: $dimension / 4;
					top: 50%;
					margin-top: -$dimension / 8;
					border-radius: 50% 50%;
					background-color: #16385d;
					box-shadow: 0px 0px 0px 4px $colorBackground;
				}
				
				&[data-feature=parks] .icon {
					background-color: #f0cf99;
				}
				
				&[data-feature=water] .icon {
					background-color: #afafb3;
				}
				
				&[data-feature=buildings] .icon {
					background-color: #dbc5a7;
				}
				
				&[data-feature=airport] .icon {
					background-color: #f0d9b9;
					
					&:before {
						width: 100%;
						height: 100%;
						content: "";
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						background-image: linear-gradient(to bottom right, 
							rgba(#dbc5a7, 0) 30%,
							rgba(#dbc5a7, 1) 30%,
							rgba(#dbc5a7, 1) 40%,
							rgba(#dbc5a7, 0) 40%,
							rgba(#dbc5a7, 0) 60%,
							rgba(#dbc5a7, 1) 60%,
							rgba(#dbc5a7, 1) 70%,
							rgba(#dbc5a7, 0) 70%
						);
					}
				}
				
				&[data-feature=transit] .icon {
					background-image: linear-gradient(to bottom right, 
						rgba(#e2ccaf, 0) 45%,
						rgba(#e2ccaf, 1) 45%,
						rgba(#e2ccaf, 1) 55%,
						rgba(#e2ccaf, 0) 55%
					);
				}
			}
		}
	}
}

body > main > section#stats {
	position: relative;
	
	@each $type in "cycling", "walking", "food\\+liquor", "audio\\+video", "miscellaneous" {
		&[data-type=#{$type}] nav a[href*=#{$type}] {
			color: $colorDark2;
		}
	}
	
	@mixin sectionColor($section, $color) {
		&[data-type=#{$section}] {
			& > main {
				::selection {
					background-color: $color;
				}
			
				h3 {
					color: $color;
				}
			}
		}
	}
	
	/*@include sectionColor("cycling", $colorCycling);
	@include sectionColor("walking", $colorWalking);
	@include sectionColor("food\\+liquor", $colorFandL);
	@include sectionColor("audio\\+video", $colorAandV);
	@include sectionColor("miscellaneous", $colorMisc);*/
}

body > main > section > main > section {
	width: 1080px;
	padding: $gutter;
	box-sizing: border-box;
	flex: 0 1 auto;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	position: relative;
	
	& > * {
		z-index: 1;
	}
	
	.text-holder {
		$width: 260px;
		flex: 1 1 $width;
		min-width: $width;
		max-height: 80vh;
		padding: $gutter;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: flex-start;
		position: sticky;
		top: 0;
	}
	
	.text {
		//width: $width;
		position: relative;
		
		h2 {
			font-size: 32px;
			margin: $gutter * 1.5 0;
			z-index: 1;
			color: $colorText;
			
			&:after {
				content: "";
				position: absolute;
				display: block;
				width: 64px;
				height: 2px;
				margin-top: 2px;
				margin-bottom: -2px;
				background-color: $colorText;
				user-select: none;
				pointer-events: none;
				z-index: 0;
			}
		}
			
		p {
			white-space: pre-line;
			
			.digit {
				display: inline-block;
				font-family: $ffSans;
				vertical-align: bottom;
				font-weight: 400;
				//font-size: 17px;
				vertical-align: middle;
				//margin: 0px 2px;
				margin-top: -4px; 
			}
		}
	}
	
	.stats {
		//background-color: yellow;
		position: relative;
		flex: 1 1 auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-content: flex-start;
		padding: $gutter 0;
		box-sizing: border-box;
		
		article {
			text-align: center;
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			justify-content: center;
			align-content: center;
			width: 220px;
			height: 145px;
			margin: 2px;
			//background-color: red;
			box-shadow: inset 0px 0px 0px 1px rgba($colorTextLight, 0.25);
			
			h3 {
				font-weight: 400;
				font-size: 42px;
				line-height: 58px;
				margin: 0;
				margin-top: $gutter/2;
				margin-bottom: $gutter/2;
			}
			
			h4 {
				font-size: 12px;
				line-height: 1em;
				letter-spacing: 0.05em;
				font-weight: 600;
				text-transform: uppercase;
				margin: 0;
				color: rgba($colorDull1, 0.65);
				margin-top: 4px;
			}
			
			h5 {
				margin: 0;
				font-size: 12px;
				line-height: 8px;
				font-weight: 400;
				color: $colorTextLight;
				
				&:not(:empty) {
					margin-bottom: -8px;
				}
			}
		}
	}
}
{'fraction_non_alphanumeric': 0.15218804530057822, 'fraction_numerical': 0.0428713176172717, 'mean_word_length': 2.8077123501823866, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 49, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3716692', 'n_tokens_mistral': 14840, 'n_tokens_neox': 11216, 'n_words': 2552}