/* Global: */
body {
	font-family: sans-serif;
	background-color: #222;
	color: #aaa;
}

/* Heading: */
h1 {
	color: #22a;
	/*text-shadow: 0px 0px 2px #888; /* very decent blurry "glow" */
	text-shadow: 1px 1px 2px #555; /* very decent blurry shadow suitable for dark mode */
}

/* Links: */
a:link {
	text-decoration: none;
	color: #04c;
}
a:visited {
	text-decoration: none;
	color: #04c;
}
a:hover, a:active {
	text-decoration: underline;
	color: #c40;
}

/* For directory listing: */
pre {
	color: #888;
}

img { /* transparent image needs some canvas */
	/* background-color: #333; /* bright enough on big screen, but not on phone */
	background-color: #555; /* bright enough on big screen, but not on phone */
}
.blurry {
	box-shadow: 0px 0px 5px 3px #555;
	border-radius: 5px;
}

/* Custom: */
.bar {
	border-left: 5px solid #555;
	padding-left: 10px;
}

.text-column {
	font-size: 16px;
	max-width: 80ex; /* for better readability */
	/* Note: pt, ex, em all miserably fail in providing a common measure for phone and PC */
	text-align: justify;
	line-height: 1.4;
	margin: 0 auto;
}

@media (prefers-color-scheme: light) {
	body {
		background-color: #fff;
		color: #000;
	}
	h1 {
		color: #008;
		text-shadow: 1px 1px 2px #888; /* very decent blurry shadow */
	}
	.bar {
		border-left: 5px solid #888;
	}
	img {
		background-color: revert; /* not tested */
	}
	.blurry {
		box-shadow: revert;
		border-radius: 5px;
	}
}