index.css

:root {
	--section-padding: 1em;
	--section-left-padding: var(--section-padding);
	--section-right-padding: var(--section-padding);

	--box-shadow-2: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
	--box-shadow-3: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12);
	--box-shadow-4: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2);
	--box-shadow-6: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .2);
	--box-shadow-8: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
	--box-shadow-16: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2);
}

html,
body {
	font-family: 'Fira Sans', sans-serif;
	color: var(--color-2);
}

header {
	display: grid;
	justify-content: center;
	align-content: center;
	height: 100vh;
	background-color: var(--color-primary-lighter);
	color: var(--color-primary-darker);
	text-align: center;
}

header > .name {
	font-family: 'Alfa Slab One', serif;
	font-size: 3.5em;
}

header > .name span.aux { color: var(--color-primary-dark); }

header > .tagline {
	font-family: 'Fira Sans', sans-serif;
	font-weight: bold;
	font-size: 1.5em;
}

header > .tagline > span.item.bigger + span.item:before { content: attr(data-separator) " "; }
header > .tagline > span.item.bigger { font-size: 1.25em; }

header > .tagline > span.item::after {
	font-size: var(--tagline-font-size);
	content: " " attr(data-separator);
}

header > .tagline > span:last-child:after,
header > .tagline > span.bigger:after {
	content: "";
}

@media screen and (max-width: 512px) {
	header > .name .aux {
		display: none;
	}

	header > .tagline {
		display: none;
	}
}

section {
	background-color: var(--section-bg-primary);
	align-items: center;
	justify-content: center;
}

#about .inner > p > b { color: var(--color-secondary-0-dark); }
#projects .inner > p > b { color: var(--color-secondary-1-dark); }

section:nth-of-type(2) {
	background-color: var(--section-bg-secondary);
}

.example {
	display: grid;
	margin: 1em 2em 1em 2em;
	font-size: 90%;
	box-shadow: var(--box-shadow-2);
	padding: 16pt;
	transition: box-shadow 0.125s ease-in-out;
	border-radius: 4pt;
	background-color: var(--section-bg-primary);
}

.example > * {
	margin-top: 0;
	margin-bottom: 0;
}

.example:hover {
	box-shadow: var(--box-shadow-8);
	transition: box-shadow 0.125s ease-in-out;
	z-index: 1;
}

.example p.description { font-style: italic; }

.example.e31 { grid-template-columns: 3fr 1fr; }
.example.e4 { grid-template-columns: 4fr; }
.example.e13 { grid-template-columns: 1fr 3fr; }

.example:first-of-type { margin-top: 2em; }
.example:last-of-type { margin-bottom: 2em; }
.example { grid-row-gap: 0em; grid-column-gap: 1em; }

.example > h1 { align-self: flex-end; }
.example > .text { align-self: flex-start; }

.example > .left { grid-column: 1; }
.example > .right { grid-column: 2; }

.example > h1 { display: flex; flex-direction: row; justify-content: space-between; }
.example > h1 > * { flex: 0 1 auto; }

.example > h1 > .links {
	font-weight: 500;
	color: var(--section-fg-primary-lighter);
}

.example > h1 > .links a { padding-right: 1em; }
.example > h1 > .links a:last-child { padding-right: 0; }

.example > .image {
	display: grid;
	justify-content: center;
	align-items: center;
	grid-row: span 2;
}

.example > .text {
	display: flex;
	text-align: justify;
	flex-direction: column;
	justify-content: flex-start;
	grid-row: 2;
}

.example img {
	max-width: 100%;
}

@media screen and (max-width: 768px) {
	.example,
	.example.e31,
	.example.e4,
	.example.e13 {
		grid-template-columns: auto;
	}

	.example > h1 > .links {
		margin-right: 0;
	}

	.example > .image, img#aao-screenshot {
		display: none;
	}
}