#intro {
	--headerHeight: 4em;
	--navHeight: 4em;
	background-color: #00234F;
	color: white;
	background-image: url('/images/puzzlehead.svg');
	background-size: contain;
	background-position-x: center;
	background-position-y: bottom;
	background-repeat: no-repeat;
	min-height: calc(100vh - var(--headerHeight) - var(--navHeight));
	min-height: calc(var(--vh, 1vh) * 100 - var(--headerHeight) - var(--navHeight));
	@media (min-width: 960px) {
		min-height: calc(100vh - var(--headerHeight));
		min-height: calc(var(--vh, 1vh) * 100 - var(--headerHeight));
	}
	padding: 0;
	display: flex;
	flex: 1;
	.container {
		position: relative;
		padding: 1em;
	}
	.tagline {
		font-size: 1.5em;
		font-weight: 700;
		em {color: #0f6;font-style: italic;}
		margin-bottom: 0.7rem;
		line-height: 1.1;
	}
	.blurb {
		margin-bottom: 1.75em;
		max-width: 30ch;
		font-size: 1.1em;
		line-height: 1.4;
	}
	// TODO: matrix of weird sizes for intro breakpoints
	//
	// END: matrix of weird sizes for breakpoints
	.button {
		background: #06f;
		color: white;
		width: max-content;
		i {margin: 0;}
		span {display: none;}
		@media (min-width: 30em) {
			span {display: block;}
			padding: 1em 2em;
		}
		border-radius: 100em;
		position: absolute;
		bottom: 1em;
		right: 1em;
		@include box-shadow;
	}
}