body
{
	color: white;
	padding: 0;
	margin: 0;
	font-family: sans-serif;

	background-color: black;
	background-image: url("/?originalUrl=https%3A%2F%2Fcode.ott.net%2Findex.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

a
{
	color: #e5800e;
	text-decoration: none;
}

pre, code
{
	background-color: #fffff0;
	border: 1px #eee dashed;
}

pre
{
	padding: .3em;
}

code
{
	padding: 0 .3em;
}

header
{
	background-color: #101010;
	color: white;
}

p.tagline
{
	margin: .4em 0;
}

@media screen and (min-width: 1000px)
{
	h1
	{
		font-size: 70pt;
		border-bottom: 1px #888 solid;
		margin: 0;
	}

	header
	{
		padding: 2em 0;
	}

	.contents
	{
		width: 950px;
		margin: 0 auto;
	}

	div.project
	{
		margin: 0 -15px;
	}
}

h1
{
	font-size: 36pt;
}

div#page
{
	background-color: white;
	color: #181818;
	opacity: .95;
	min-height: 100vh;
}

div.contents
{
	padding: 1em;
}

/* main page */

div.project
{
	display: flex;
	padding: 15px;
	border-top: 1px #eee solid;
}

div.project :nth-child(2)
{
	flex-grow: 2;
}

div.project > a
{
	font-size: small;
}

div.project:hover
{
	background-color: #f9f9f9;
}

div.project img.thumbnail
{
	margin-right: 10px;
	height: 64px;
	width: 64px;
	border: 1px #ccc solid;
	border-radius: 5px;
}

h2
{
	margin-top: 1em;
	padding-top: 1em;
}

h3
{
	font-size: large;
	font-weight: normal;
	margin: 0;
}

h3 a
{
	color: #222;
	font-weight: bold;
}

.project p
{
	margin: 1pt 0;
}

.project .release
{
	font-weight: normal;
	font-size: small;
	color: #71706B;
}