html, body {
	position: relative;
	width: 100%;
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.card {
	box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
	0px 1px 1px 0px rgba(0, 0, 0, 0.14),
	0px 1px 3px 0px rgba(0,0,0,.12);
	box-sizing: border-box;
	border-radius: 4px;
	padding: 0.5em;
	width: 320px;
	margin: 0 auto;
	background-color: white;
}
.readout {
	background-color: dimgray;
	color: white;
	padding: 4px 8px;
	border-radius: 8px;
	box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
	0px 1px 1px 0px rgba(0, 0, 0, 0.14),
	0px 1px 3px 0px rgba(0,0,0,.12);
}
.heading {
	display: block;
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
}
div.indicator.round-indicator {
	border-radius: 16px;
	width: 16px; height: 16px;
}
.yellow-indicator {
	--on-rgb: rgb(255, 255, 0);
	--on-rgba: rgba(255, 255, 0, 0.75);
	--off-rgb: rgb(255, 217, 0);
	--off-rgba: rgba(255, 217, 0, 0.25);
}
.auto-wrap-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 1em;
}
.auto-center-row {
	display: flex;
	justify-content: center;
	align-items: center;
	/*gap: 0.8em;  isn't supported yet*/
}
/*work-around for missing gap support*/
.auto-center-row > * + * {
	margin-left: 0.8em;
}
.display {
	background-color: #fafafa;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	overflow: auto;
	transition: 0.5s;
}
@media (min-width: 340px) {
	.display {
		padding: 1em;
	}
}
@media (max-width: 390px) {
	div.drawer > button.button {
		background-color: lightgray;
		border-radius: 0 16px 16px 0;
		left: 0;
	}
	div.drawer.open > button.button.extra {
		background-color: lightgray;
		left: 250px;
	}
}
.drawer.open main > .display {
	left: 250px;
	transition: 0.5s;
}