@media (prefers-color-scheme: light){
	:root{
		--background: white;
		--foreground: black;
	}
}

@media (prefers-color-scheme: dark){
	:root{
		--background: black;
		--foreground: white;
	}
}

html{
	background-color: var(--background);
	color: var(--foreground);
	font-family: 'VeraMono', monospace;
}

@font-face{
	font-family: 'VeraMono';
	src: url('/font/vera/VeraMono.ttf');
}
@font-face{
	font-family: 'VeraMono';
	src: url('/font/vera/VeraMoBd.ttf');
	font-weight: bold;
}

body{
	display:flex;
	flex-direction:column;
	align-items:center;
}

main{
	padding: min(5em,5%);
	margin: 0 auto;
	max-width: 60em;
	max-height: 100%;
}
header {
	display: flex;
	align-items: center;
}
header > *{
	padding: 1em;
}
header img {
	max-width: min(15em,30%);
}

summary {
	font-size:x-large;
	font-weight:bold;
}

details[open]>summary{
	cursor: zoom-out;
}
details:not([open])>summary{
	cursor: zoom-in;
}

details{
	border: 2px dotted;
	padding:0.5em;
	border-radius:0.5em;
}

ul {
	list-style-type: "— ";
}

footer {
	/*border-top: 1px solid;*/
	position: absolute;
	bottom: 0;
	/*left:0;*/
	right:0;
	/*width:100%;*/
	padding:1px;
	background: var(--background);
}