body {
	color: #333;
	font-family: sans-serif;
	padding-bottom: 3em;
	tab-size: 4;
}
h1, h2, h3, h4, h5, h6 {
	font-family: serif;
	margin: .5em 0 0 0;
}
a { color: inherit; }
pre { margin: 0; white-space: pre-wrap; }
input[type=submit] {
	margin: 0.5em 0;
}
picture img {
	max-width: 100%;
	height: auto;
}

.licence-text {
	font-family: serif;
}
.text-center { text-align: center; }
.page-center {
	max-width: 8.5in;
	margin: 0 auto;
}
.page-center-thin {
	max-width: 6.5in;
	margin: 2em auto 0;
}
.footer {
	margin-top: 3em;
}
.devlog-list {
	font-size: medium;
	margin: auto auto;
	width: 100%;
}

.topbar { margin-bottom: 1em;}
.topbar ul {
	text-align: center;
	padding: 0;
}
.topbar li {
	display: inline;
}

.topbar li {
	padding: 0 .5em 0 0;
}

.inline-block {
	display: inline-block;
}

@font-face {
	font-family: "icon";
	src: url(/static/MaterialIcons-Regular.ttf) format("truetype");
}
@font-face {
	font-family: "ms-icon";
	src: url(/static/codicon.ttf) format("truetype");
}
.icon { font-family: "icon"; vertical-align: middle; font-size: 1.30em; position: absolute; top: calc(0.5em -1px); left: 0; }
.ms-icon { font-family: "ms-icon"; vertical-align: middle; font-size: 1.30em; position: absolute; top: calc(0.5em -1px); left: 0; }
.col2 {
	column-count: 2;
}
.col2 > div {
	position: relative;
	padding: 0.5em 0 0 1.7em;
}
.no-link {
	cursor: not-allowed;
	color: #808080;
	text-decoration: underline;
}
.page-title {
	margin-bottom: 1em;
}
.flex-center {
	display: flex;
	justify-content: center;
}
.wrote-my-own p {
	margin-bottom: 1em;
}
.wrote-my-own video {
	width: 640px;
	height: 360px;
}

code {
	tab-size: 4;
}

.first-year-working-on-bold img {
	max-width: 100%
}
.email-help { display: none; }
.flexbox-center {
	display: flex;
	justify-content: center;
}

@media (prefers-color-scheme: dark) {
	body {
		background-color:#181818; 
		color: #cdccc9;
	}
	div.homepage-img {
		background-image: url(/static/homepage-dark.png);
	}
}