:root {
	--c-background: #f0f0f0;
	--c-border: #d0d0d0;
	--c-link: #e10270;
	--c-overlay: hsla(0, 0%, 94.1%, .95);
	--c-overlay-text: #000;
	--c-text: #1a1a1a;
}

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    src: local('Barlow'), url('barlow-v5-latin-regular.woff2') format('woff2');
}
a {
	color: var(--c-link);
	text-decoration: none;
}
body {
	background-color: var(--c-background);
	color: var(--c-text);
	font-family: 'Barlow', sans-serif;
	line-height: 1.4;
	margin: 0;
}
.addendum {
	color: var(--c-text);
	padding: 2rem;
}
.addendum a {
	color: var(--c-text);
	text-decoration: underline;
}
.addendum h1 {
	font-size: 2.5rem;
	text-transform: uppercase;
}
.addendum ul {
	list-style: none;
	padding-left: 0;
}
.alternatives {
	background-color: #c6cfff;
	--c-text: #000;
}
.columns_narrow { columns: 12rem auto; }
.columns_wide { columns: 18rem auto; }
.constrain {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	max-width: 50rem;
	padding: 2rem;
	row-gap: 5rem;
}
.credits { 
	background-color: #ff8f83;
	--c-text: #000;
}
.desc { max-width: 23rem; }
.examples {
	background-color: #ffd454;
	--c-text: #000;
}
.full img {
	border-radius: .8rem;
	box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
	max-width: 100%;
}
.head { font-size: 2rem; }
.quote {
	font-size: 1.5rem;
	margin: 0 auto;
	max-width: 33rem;
	padding: 3rem 0;
	text-align: center;
}
.resources {
	background-color: #fff;
	--c-text: #000;
}
.soon {
	color: limegreen;
	font-size: .9rem;
}
.split {
	align-items: center;
	column-gap: 2rem;
	display: flex;
	justify-content: space-between;
	row-gap: 1rem;
}
.split.reverse {
	flex-direction: row-reverse;
}
@media (max-width: 60rem) {
	.split,
	.split.reverse {
		align-items: flex-start;
		flex-direction: column;
	}
}
@media (min-width: 60.0000001rem) {
	.split.reverse > *:nth-child(1) {
		text-align: right;
	}
}
h1,
h2 { font-weight: 400; }
h1 {
	align-items: center;
	column-gap: .7rem;
	display: flex;
	font-size: 3.5rem;
	margin: 0;
}
h1 img {
	position: relative;
	top: .1rem;
	width: 3.5rem;
}
header {
	align-items: center;
	display: flex;
	flex-direction: column;
	margin: 2rem 0;
	padding: 1rem;
}
header p {
	font-size: 1.2rem;
	margin-top: .4rem;
}
.image img {
	border: 1px solid var(--c-border);
	border-radius: .8rem;
	box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
	max-height: 20rem;
	max-width: 100%;
}
.overlay {
	align-items: center;
	background-color: var(--c-overlay);
	color: var(--c-overlay-text);
	bottom: 0;
	display: none;
	justify-content: center;
	left: 0;
	position: fixed;
	right: 0;
	text-decoration: none;
	top: 0;
}
.overlay:target {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
}
.overlay img {
	border: 1px solid var(--c-border);
	border-radius: .8rem;
	box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
	max-height: calc(100vh - 8rem);
	max-width: calc(100vw - 8rem);
}
.overlay span {
	font-style: italic;
}
@media (max-width: 40rem) {
	h1 {
		column-gap: 2vw;
		display: flex;
		font-size: 8vw;
	}
	h1 img {
		width: 8vw;
	}
	header p {
		font-size: 1rem;
	}
	.constrain {
		row-gap: 2rem;
	}
	.quote {
		font-size: 5vw;
		padding: 2rem 0;
	}
}
@media (max-width: 23rem) {
	.image img { max-height: unset; }
}