:root {
	--spacing: 1rem;
	--big-spacing: 4rem;
}

body {
	margin: 0;
	font-size: var(--base-font-size);
}

header {
	padding: 2rem;
	text-align: center;
}

section,
footer {
	padding: var(--big-spacing);
	padding-left: var(--spacing);
	padding-right: var(--spacing);
}

fieldset { border: 0; }

#action-notice {
	/* Used by Landmarks <2.5.0 */
	border: var(--standard-line);
	border-radius: 1rem;
	margin-bottom: var(--big-spacing);
}

section.abstract,
section.further-info { background-color: var(--background-2); }

section.install { text-align: center; }
section.install p { text-align: left; }

section.install ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

section.install li {
	padding: var(--spacing);
	margin: 0.5rem;
	border-radius: var(--roundedness);
	border: var(--standard-line);
}

details.floaty a {
	background-color: var(--accent-1);
	color: var(--background-1);
}

img {
	max-width: 100%;
	filter: drop-shadow(0.5em 0.5em 0.5em var(--background-2));
}

section.further-info h2,
section.further-info a {
	color: var(--text-1);
}

section.further-info h2 { border-color: var(--text-2); }

.floaty a:hover,
.floaty a:focus,
section.further-info a:hover,
section.further-info a:focus {
	color: var(--background-2);
	background-color: var(--text-1);
	outline-color: var(--text-1);
}

footer { padding-bottom: var(--spacing); }

/*
 * Add more spacing and increase <h1> size when the screen is wide enough
 */

@media screen and (min-width: 35rem) {
	section,
	footer { padding: var(--big-spacing); }

	h1 { font-size: 3em; }
}

/*
 * Alternating horizontal picture layout; Horizontal install links
 */

@media screen and (min-width: 65rem) {
	section.install ul,
	section.feature {
		display: flex;
		justify-content: center;
	}

	section.install ul li {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	section.feature > :first-child { flex: 0 1 40%; }
	section.feature > :last-child { flex: 0 1 50%; }

	section.feature:nth-child(odd) { flex-direction: row; }
	section.feature:nth-child(even) { flex-direction: row-reverse; }

	section > * {
		margin-left: auto;
		margin-right: auto;
		max-width: 65rem;
	}

	h2 { margin-top: 0; }

	.vertical-spacer { display: block; }  /* do need vertical-spacer in horizontal mode */
}