body {
	background-color: #c0d9f1;
	margin: 0;
	padding: 0;
	font-family: verdana;
	line-height: 150%;
}

h1 {
	line-height: 125%;
	text-align: center;
}

h1, p {
	margin-left: 1em;
	margin-right: 1em;
}

a, a:link {
	text-decoration: none;
	color: #0067c6; /*blue*/
}

a:hover, a:active {
	text-decoration: underline;
	color: #c60067; /*red*/
}

a:visited {
	color: #6700c6; /*purple*/
}

img {
	display: none;
}

canvas {
	width: calc((720px / var(--device-pixel-ratio)));
	position: absolute;
}

canvas:hover {
	outline: 0.5em solid #c60067; /*red*/
}

div {
	width: calc((720px / var(--device-pixel-ratio)));
	height: calc((480px / var(--device-pixel-ratio)));
	margin: 0;
	padding: 0 0 0.25em 0;
}

/*Modify the photo gallery CSS. Use with <ul>. First <li> can have header and fig caption if you want*/
.gallery-lossy {
	list-style: none;
	display: grid;
	grid-auto-flow: row;
	align-items: start;
	grid-gap: 0.25em;
	gap: 0.25em;
	padding-left: 0; /*<ul> has padding-left but not right set by default*/
	grid-template-columns: repeat(auto-fit, minmax(calc((720px / var(--device-pixel-ratio)) + 0.5em), 1fr));
}

.gallery-lossy figcaption {
	margin-left: 1em;
	padding-bottom: 1em;
	width: calc((720px - 2em) / var(--device-pixel-ratio));
}

.gallery-lossy li {
	padding: 0.25em;
	text-align: left;
}