:root {
	--main-bg-color: #fff;
	--main-fg-color: #000;
	--link-color: hsl(205, 50%, 34%);
	--faded-color: #999;
	--copyright-color: #666;
	--datebox-bg-color: hsl(204, 50%, 46%);
	--bloghead-bg-color: #eee;
	--bloghead-border-color: hsl(0, 0%, 50%);
	--sidebox-bg-color: hsl(0, 0%, 87%);
}

@media (prefers-color-scheme: dark) {
	:root {
		--main-bg-color: #222;
		--main-fg-color: #fff;
		--link-color: hsl(205, 50%, 66%);
		--faded-color: #999;
		--copyright-color: #666;
		--datebox-bg-color: hsl(204, 50%, 50%);
		--bloghead-bg-color: #444;
		--bloghead-border-color: hsl(0, 0%, 50%);
		--sidebox-bg-color: hsl(0, 0%, 25%);
	}
}

body {
	margin: 0;
	padding: 0;
	background-color: var(--main-bg-color);
	color: var(--main-fg-color);

	font-family: Bitstream Vera Sans, sans-serif;
}

a:link    { color: var(--link-color); }
a:visited { color: var(--main-fg-color); }
a:link img { border: 0; }

.header {
	background: var(--main-bg-color);
	border-bottom: 1px var(--faded-color) solid;
	height: 80px;
}

.logo {
	float: left;
	padding: 10px 10px 0 20px;
}

.title {
	font-size: x-large;
	font-weight: bold;
	margin-top: 25px;
	float: left;
}

.datebox,
.sidebox {
	box-sizing: border-box;
}

.datebox {
	border: 2px solid var(--main-bg-color);
	border-left: 0;
	border-radius: 0 4px 4px 0;
	padding: 4px 4px 4px 5px;
	margin: 16px 1rem 1px 0;
	width: 100%;
	clear: both;
	font-weight: bold;
	color: var(--main-bg-color);
	background: var(--datebox-bg-color);
	outline: 1px solid var(--datebox-bg-color);
}

.blog-entry {
	padding: 15px 0 0 20px;
	clear: both;
	word-wrap: break-word;
}

.blog-header {
	padding: 2px 6px 2px 6px;
	margin: 4px;
	background: var(--bloghead-bg-color);
	border: 1px var(--bloghead-border-color) solid;
	font-weight: bold;
}

.blog-header a:link {
	text-decoration: none;
	color: var(--main-fg-color);
}

.blog-header a:visited {
	text-decoration: none;
	color: var(--main-fg-color);
}

.blog-body {
	margin-left: 20px;
	margin-right: 20px;
	font-size: medium;
}

.blog-body img,
.blog-body video {
	max-width: 100%;
	height: auto;
}

.blog-body div {
	max-width: 100%;
}

.blog-body pre {
	overflow: auto;
}

.blog-body div,
.blog-body table {
	overflow-x: auto;
}

.blog-body table {
	display: block;
}

.blog-footer a {
	text-decoration: none;
	color: var(--faded-color);
	font-size: small;
}

.sidebox {
	background: var(--sidebox-bg-color);
	border: 3px solid var(--main-bg-color);
	border-radius: 9px;
	padding: 6px;
	margin: 4px;
	outline: 3px solid var(--sidebox-bg-color);
}

.sidebox-title {
	font-weight: bold;
	text-align: center;
	padding-bottom: 10px;
}

.copyright {
	border-top: 1px var(--faded-color) dashed;
	padding-top: 5px;
	margin: 40px 20px 20px 20px;
	font-size: x-small;
	color: var(--copyright-color);
}

.blog {
	margin-right: 15px;
	padding-bottom: 30px;
}

.side {
	margin: 0 15px;
}

@media (min-width: 650px) {
	.blog {
		margin-right: 270px;
		padding-bottom: 0;
	}

	.side {
		position: absolute;
		right: 10px;
		top: 100px;
		width: 240px;
		margin: 0;
	}
}