:root {
	--bg:	#fafafa;
	--fg:	#2f343f;
	--hl:	#4084d6;
	--hl2:	#ed4737;
	--hl3:	#dab6fc;
}

@media (prefers-color-scheme: dark) {
	:root {
		--fg:	#fafafa;
		--bg:	#2f343f;
	}
}

body {
	width: 90%;
	max-width: 55em;
	margin: 1.5em auto;
	font-family: c059, serif;
	background: var(--bg);
	color: var(--fg);
}

a {
	color: var(--hl);
}

a:visited {
	color: var(--hl3);
}

a:hover {
	color: var(--hl2);
}

h1 {
	font-size: 2.5em;
	margin: 0.32em 0em 0em 0em;
}

hr {
	color: var(--fg);
}

/* Wrap block divs with this class */
.columns {
	columns: 2;
}

.columns ul {
	margin-top: 0em;
}

/* Use this to make unbreakable elements when using columns */
.block {
	break-inside: avoid;
}

/* Use this for crypto addresses, to prevent them overflowing */
.address {
	overflow: hidden;
	white-space: nowrap;
	font-family: monospace;
	font-size: 1.2em;
	padding: 0.5em 0.2em;
	border: 1px solid var(--fg);
	display: inline-block;
	max-width: 95%;
	margin: 0;
}

hr {
	margin: 1em 0em;
}

ul {
	padding: 0 0 0 1em;
}

li {
	margin: 0 0 0.1em 0;
}

footer {
	text-align: center;
}

footer img {
	margin: auto;
	display: inline-block;
}

img {
	display: block;
	margin: auto;
	max-height: 25em;
	width: auto;
	max-width: 100%;
}

@media print {
	.no-print, .no-print *, footer {
		display: none !important;
	}
	.address {
		overflow: visible;
		white-space: wrap;
		word-break: break-all;
	}
}

@media only screen and (max-width: 768px) {
	body {
		width: 90%;
		font-size: 1.1em;
	}

	.columns {
		columns: 1;
	}
}