body {
	background: url("/graphics/bg/cloudshorizontal.png") skyblue bottom center fixed repeat-x;
	box-sizing: border-box;
	color: black;
	font:.9em Verdana, sans-serif;
	margin: 0;
	padding: 0;
}
img {
	border: none;
	max-width: 100%;
}
blockquote {
	background: azure;
	border: 1px solid #1C89C2;
	border-left: 10px solid #1C89C2;
	padding: 10px;
}
a {
	color: #1C89C2;
}
a:hover {
	color: #00344f;
}
a[href^="http://"]:not([href*="sparkleworm.art"]),
a[href^="https://"]:not([href*="sparkleworm.art"]), 
a[href^="//"]:not([href*="sparkleworm.art"]) {
	background: url(/graphics/exlightmode.svg) no-repeat;
	background-size: 0.7em;
	background-origin: padding-box;
	padding-right: 1.3em;
	background-position-y: center;
	background-position-x: calc(100% - 0.3em);
}
.eximg {
	background: none !important;
	padding: 0 !important;
}
h1 {
	background: skyblue;
	color: #00344f;
	padding: 10px;
	margin: auto -10px;
	text-align: center;
}
h2 {
	color: #186792;
	border-bottom: 2px dashed skyblue;
	padding: 5px;
}
.gallery {
	column-count: 3;
	column-gap: 10px;
}
figure {
	display: grid;
	grid-template-rows: 1fr auto;
	margin: 10px;
}
figure img {
	grid-row: 1 / -1;
	grid-column: 1;
}
.oc {
	background: azure;
	border: 2px dashed skyblue;
	display: inline-block;
	margin: 5px;
	margin-bottom: 10px;
	padding: 5px;
	padding-bottom: 10px;
	text-align: center;
	width: 150px;
}
.altart {
	display: inline-block;
	margin: 5px;
}
table {
	margin: auto;
	width: 60%;
}
td {
	padding: 5px;
}
tr:nth-child(even) {
	background-color: #f2f2f2;
}
header {
	margin: 25px;
	text-align: center;
}
.bannerlight {
  display: inline-block;
}
.bannerdark {
  display: none;
}
.container {
	display: flex;
	margin: auto;
	width: 70%;
}
nav {
	background: white;
	border: 2px solid #1C89C2;
	width: 15%;
}
nav h4 {
	background: #1C89C2;
	color: white;
	margin: 0;
	padding: 3px 10px;
}
nav a {
	display: block;
	text-decoration: none;
	padding: 5px;
}
nav a:hover {
	background: skyblue;
	color: #00344f;
}
main {
	background: white;
	border: 2px solid #1C89C2;
	margin: 0px 10px;
	padding: 10px;
	width: 70%;
}
footer {
	text-align: center;
	margin: 25px;
}

 /* Responsive */
 
@media only screen and (max-width: 1000px) {
	.container {
		flex-wrap: wrap;
		width: 100%;
	}
	nav {
		border: none;
		height: auto;
		order: 2;
		width: 100%;
	}
	main {
		border: none;
		margin: 0;
		order: 1;
		width: 100%;
	}
	footer {
		margin: 0;
		order: 3;
		padding: 10px;
	}
	.oc {
		margin-bottom: 10px;
		width: 90%;
	}
	figure {
		display: block;
		grid-template-rows: 1;
		margin-left: 0px;
		margin-bottom: 10px;
		width: 100%;
	}
	.gallery {
	  column-count: 1;
	}
	table {
	  width: 100%;
	}
}