body {font-family: Verdana, sans serif; line-height: 1.5; margin: 20px auto;
}

img {margin: 0.5em 0; }
figcaption {
    display: block; padding: 0;
    margin-top: -0.5em; /* Adjust as needed */
    margin-bottom: 0; /* Adjust as needed */
}

h1.title {text-align: center;}

p {margin: 0.25em 0 0.5em 0; }
p.subtitle {text-align: center; font-weight: bold; font-size: 150%;}

td {border-bottom: solid thin black; padding: 0.2em; vertical-align: middle; }
th {border-bottom: solid black; padding: 0.2em; vertical-align: bottom; }
table {margin-left: auto; margin-right: auto; margin-bottom: 1em; }
aside { margin: 20px 30px; padding: 5px 10px 10px 10px;
	border-left: 10px solid #5d8aa8;
	line-height: 1.5;
	background-color: #f0f0f0; /* Light gray background */
}
aside.callout { border-left: 0; }
aside.example::before {
	content: "For example";
	margin-top: 0em; margin-bottom: 0.5em; display: block;
	font-weight: bold; color: #5d8aa8;
}

span.sidenote { float: left; }

/* differences for computer vs phone screens */
/* need to check ipads */

@media (min-width: 768px) {
	body { max-width: 70%;  }
	span.sidenote { margin-left: -65px; }
}
@media (max-width: 767px) {
	body { max-width: 80%; hyphens: auto; }
	span.sidenote {
		margin-left: -20px; margin-right: 5px;
		background-color: lightgray; padding: 0 2px;
	}
}