body {
	/* bit of vertical margin, center horizontally */
	margin: 1rem auto;
	padding: 0 1rem;

	/* improve readability */
	line-height: 1.4;
	font-size: 18px;
	color: #222;

	/* look less serious */
	font-family: sans-serif;

	/* for members list, force scroll bar */
	overflow-y: scroll;
}
h1, h2, h3 {
	line-height: 1.2;
}

/* header styling */
header {
	display: flex;
	align-items: center;
	margin: 1rem auto;
}
header > h1 {
	margin: 0;
	text-align: center;
}
img#logo {
	height: 4rem; /* keep the logo fairly small */
	display: block; /* do not layout on a line */
}

/* horizontal menu */
menu {
	display: flex;
	list-style: none;
	padding: 0;
	text-align: center;
	background-color: #66218f;
	color: white;
	flex-grow: 1;
	flex-wrap: wrap;
}
menu > li {
	flex-grow: 1;
	flex: 1;
	margin: 0.5em 1em;
}
menu > li > a {
	text-decoration: none;
	color: inherit;
}

/* space out table fields */
td {
	padding: 0 0.5rem;
}

/* make map fill width */
#map {
	width: 100%;
	height: 20rem;
	border: none;
}

/* make store fill width and reasonable height */
#store {
	width: 100%;
	height: 600px;
	height: 100vh;
	border: none;
}

/* form styling */
section.form {
	text-align: center; /* put form in middle */
}
section.form > form {
	display: inline-block; /* shrink-to-fit */
	text-align: initial; /* revert text-align back to default */
}
section.form > form > div > label:first-of-type {
	display: inline-block; /* so width can be controlled */
	min-width: 8em; /* so everything should line up */
}
section.form > form > div.buttons {
	text-align: right; /* put buttons on the right */
}

button {
	font-size: inherit;
}

/* rules for checkbox toggling visibility of siblings */
.visibility-toggle {
	position: absolute; /* remove from normal flow */
	visibility: hidden;
}
.visibility-toggle:checked ~ .visibility-toggle-not-checked {
	display: none;
}
.visibility-toggle:not(:checked) ~ .visibility-toggle-checked {
	display: none;
}