body > header {
	position: relative;
	padding-bottom: 1rem;
}

.logo {
	margin: 1em auto;
	width: fit-content;
	display: grid;
	grid-gap: .3em 0;
	grid-template-columns: minmax(1em, auto) 1fr;
	font-size: 200%;

	& h1 {
		margin: 0;
		color: hsl(var(--gray) 48%);
		font-family: var(--font-sans);
		font-weight: 700;
		letter-spacing: -.03em;
	}

	& h2 {
		grid-row: 2;
		margin: 0;
		font-style: italic;
		font-size: 52%;
		font-weight: 800;
		color: hsl(220, 10%, 30%);
	}

	& img {
		grid-row: 1 / span 2;
		height: 3em;
	}
}

#features {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 1.5rem 0;
	align-items: start;
}

@media (min-width: 800px) {
	#features {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 800px) {
	#features {
		padding: 1rem;
	}
}

	#features article {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-gap: .1em .5em;
	}

	#features article::before {
		content: "✓";
		color: var(--color-green);
		font-size: 300%;
		line-height: .8;
		grid-row: 1 / span 2;
	}

	#features h4 {
		margin: 0;
	}

	#features p {
		margin: 0;
		font-size: 75%;
	}

.readme-only {
	display: none;
}

.version-number {
	font-size: 40%;
	vertical-align: super;
	letter-spacing: 0;
	text-indent: -.4em;
	margin-left: -0.3em;
	color: var(--color-green);

	@supports not (-webkit-background-clip: text) {
		background: var(--rainbow);
		animation: var(--rainbow-scroll);
		-webkit-text-fill-color: transparent;
		-webkit-background-clip: text
	}
}