html {
	box-sizing: border-box;
}
body {
	margin: 2em;
	padding: 0;
	background-color: #dedeef;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
h1 { font-weight: 900; font-size: 2em; }
h4 { margin: 1em 0 0 0; border: 0; padding: 0; }
h4 + p { margin: 0; }
aside {
	padding: 2em;
	background-color: #ccc;
}
aside h4:first-of-type { margin-top: 0; padding-top: 0; }
main {
	margin: 0;
	border: none;
	padding: 2em;
	background-color: #efefff;
}
section {
	margin: 1em 0;
	border-top: 1px solid gray;
	padding: 1em 0;
}
footer, header {
	margin: 0;
	border: none;
	padding: 2em;
	color: white;
	background-color: black;
	text-transform: uppercase;
}
footer a:link, footer a:visited, footer a:hover, footer a:active,
header a:link, header a:visited, header a:hover, header a:active { color: white; }
img {
	margin-right: 20px;
	padding: 0;
	width: 300px;
	height: auto;
	outline: 1px solid #ccc;
}
.nextSteps {
	margin-top: 1em;
	border-top: 4px solid black;
	padding-top: 0;
}
.intro {  }
.resources { background-color: pink; }
.tip, .bonus, .watchOut { margin: 1em 0; border: 0; padding: .125em 1em; background-color: #ddd; }
.tip p:first-child, .bonus p:first-child, .watchOut p:first-child { color: red; font-style: italic; }

/* DEBUG */
a[href=""] { outline: 4px solid red; background-color: yellow; color: blue; }
.working { padding: 3em; background-color: pink;}
details {
	margin: 1em 0;
}
summary {
	margin: 0;
	border: 0;
	border-radius: 16px;
	padding: 1em;
	background-color: #ccc;
}
p, li, dd, dt { line-height: 1.5; }