body > footer { margin-top: var(--spacing-huge); }


#introduction ul {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	max-width: 52ch;
	margin-top: var(--spacing-large);
}

#introduction ul > * {
	margin: var(--spacing-small);
	display: block;
	flex-basis: 50%;
}
#introduction ul > *:first-child { margin-left: 0; }
#introduction ul > *:last-child { margin-right: 0; }

#introduction ul a {
	display: block;
	text-align: center;

	color: var(--button-foreground);
	background: var(--button-background);
	padding: var(--spacing-small) var(--spacing-large);
	font-weight: 600;
	text-transform: uppercase;
	text-shadow: none;

	border: 1px solid var(--button-border);
	line-height: 2;

	transition: all 320ms ease-in;
}

#introduction ul li:nth-of-type(odd) a {
	--button-background: transparent;
	--button-foreground: var(--color-white);
	--button-border: var(--color-white);
}

#introduction ul li:nth-of-type(even) a {
	--button-background: var(--color-accent);
	--button-foreground: var(--color-white);
	--button-border: var(--color-accent);
}

#introduction ul a:focus,
#introduction ul a:hover,
#introduction ul a:active {
	--button-background: transparent !important;
	--button-foreground: var(--color-accent) !important;
	--button-border: var(--color-accent) !important;
}

/*
* Responsive
*/

/* Remove listings past --num-columns instead of wrapping */
@media only screen and (max-width: 992px) {
}

@media only screen and (max-width: 640px) {
	#introduction h1 {
		margin-right: auto;
	}
}

@media only screen and (max-width: 640px) {
	#introduction ul {
		flex-direction: column;
	}
	#introduction li {
		display: block;
		width: 100%;
		margin-left: 0; margin-right: 0; }
	#introduction a { display: block; width: 100%; }
}