html {
	background: black;
}

body {
	background-color: white;
}

html, body {
	font-family: consolas, monospace;
	font-weight: normal;
	padding: 0;
	margin: 0;
	min-height: 100vh;

	display: grid;
	grid-template-rows: max-content auto max-content;

	content-sizing: border-box;
}
header h2 {
	font-size: 1em;
}
header p {
	font-weight: normal;
	font-size: 1.5em;
}
header p:first-of-class {
	font-weight: bolder;
}

header, main {
	max-width: 40em;
	margin-left: auto;
	margin-right: auto;
	padding:  5px;
}

#banner {
	width: 100%;
	object-fit: cover;
}

main.project {
	display: grid;
	grid-template-rows: min-content min-content auto;
}

.blog-entry {
	padding:  1em;
	background-color: whitesmoke;
	border-radius: 2px;
	margin-bottom: 5px;
}
.blog-entry .title {
	overflow-wrap: anywhere;
}

.tag {
	background-color: #000000;
	color: whitesmoke;
	border-radius: 1em;
	padding: 5px 1em;
	float: left;
	margin: 0 0 5px 5px;
	margin-top: 0.5em;
}
.tags::after, #tags::after {
	content: ' ';
	clear:  both;
	display: table;
}

img {
	box-sizing: border-box;
	max-width: 100vw;
	width: 100%;
}

iframe {
	box-sizing: border-box;
	max-width: 100%;
}

pre {
	background: #212535;
	color: white;
	padding: 1em;
	font-family: consolas, monospace;
	/*white-space: pre-wrap;*/
	tab-size: 2;
	overflow: auto;
	max-width: 40em;
	box-sizing: border-box;
}
pre .comment {
	color: palegreen;
}
pre .type {
	color: orangered;
}
pre .struct {
	color: mediumpurple;
}
pre .variable {
	color: lightsteelblue;
}
pre .string {
	color: darkorange;
}
pre .literal {
	color: white;
}

#game-container {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-gap: 5px;
}
#game-container h2 {
	grid-column-start: 1;
	grid-column-end: 3;
}
#project-container-grid {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-gap: 5px;
}
#project-container-grid h2 {
	grid-column-start: 1;
	grid-column-end: 3;
}
@media only screen 
	and (min-device-width: 375px) 
	and (max-device-width: 812px) 
	and (-webkit-min-device-pixel-ratio: 3)
	and (orientation: portrait) { 
	#game-container {
		display: block;
	}
	#project-container-grid {
		display: block;
	}
}
@media only screen and (max-width: 500px) {
	#game-container {
		display: block;
	}
	#project-container-grid {
		display: block;
	}
}

.download-buttons {
	margin-top: 1em;
	display: inline-flex;
}

.download-button {
	background-color: black;
	color: white;

	padding: 0.5em 1em;
	border-radius: 0.5em;

	margin-right: 5px;

	text-decoration: none;
}
.download-button:hover {
	background-color: gray;
}

.experience-grid {
	display: grid;
	grid-template-columns: auto auto;
	column-gap: 1em;
}
.experience-grid .duration {
	color: #999F;
	font-style: italic;
}

footer {
	background-color: black;
	color:  whitesmoke;
	padding: 1em 2em;

	display: grid;
	grid-template-columns: auto 100px;
}

footer p {
	grid-column: 1;
}

footer #footer-image {
	width:  100px;
	grid-row: 1;
	grid-column: 2;
}