* {
	box-sizing: border-box;
	margin: 0; /* to get rid of browsers applying margins by default (very silly) */

	font-family: "Roboto", sans-serif;
	font-size: 20px;
}

/*   ----------   Main page elements   ----------   */

body {
	min-height: 100vh;
	display: flex;
	flex-flow: column nowrap;
}

main {
	width: 100%;
	flex: 1;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	padding-bottom: 5vh;
}

nav {
	width: 25%;
	margin-top: 5vh;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
}

#demos {
	width: 75%;
	margin-top: 5vh;
}

footer {
	height: 200px;
	width: 100%;
	background: #CCC;
	background: linear-gradient(135deg, #CCC 0%, #BBB 100%);
}

/*   ----------   Header   ----------   */

header {
	width: 100%;
	height: 20vh;
	min-height: 4em;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	border-bottom: 2px #AAA solid;
	background: #F0F0F0;
	background: linear-gradient(135deg, #F0F0F0 0%, #EDEDED 100%);
}

header a {
	height: 20vh;
	min-height: 4em;
	width: 100%;
	position: absolute;
	top: 0;
}

header h1 {
	font-size: 3.6em;
	font-family: "Nanum Pen Script", cursive;
}

/*   ----------   Nav bar   ----------   */

#nav-container {
	position: sticky;
	top: 1em;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	padding: 1em;
	border: 2px #CCC solid;
	border-radius: 5px;
	background: white;
}

#nav-container h2 {
	font-size: 1.4em;
	color: #111;
	width: 13rem;
	padding: 0 0 0.25rem 0;
}

.bio-link, .bio-link:link, .bio-link:visited {
	font-weight: bold;
	color: #111;
	text-decoration: none;
	font-size: 0.75rem;
}

.bio-link:hover {
	text-decoration: underline;
}

#nav-container p {
	margin-top: 0.5em;
	font-size: 0.75em;
	color: #111;
	width: 13rem;
}

#categories {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
}

.nav-link {
	display: block;
	width: 13em;
	margin: 0.1em 0;
	padding: 0.25em 0.5em;
	border: 2px #CCC solid;
	border-radius: 5px;
	background: rgb(238, 238, 238);
	background: linear-gradient(135deg, rgb(238, 238, 238) 0%, rgb(221, 221, 221) 100%);
	text-decoration: none;
	font-weight: normal;
	cursor: pointer;
	color: #111;
	position: relative;
	left: 0;
	transition: left 0.1s;
}

.nav-link:hover {
	left: 0.5em;
}

.nav-link:active {
	left: 0.6em;
}

.nav-link.selected-category {
	border: 2px rgb(0, 58, 68) solid;
	color: rgb(0, 58, 68);
	background: rgb(0, 164, 200);
	background: linear-gradient(135deg, rgb(0, 164, 200) 0%, rgb(0, 120, 170) 100%);
	font-weight: bold;
}

.nav-link.tag {
	width: 12em;
}

#categories .tags-block {
	position: relative;
	left: 0.5em;
	transition: max-height 0.2s;
	margin-bottom: 0.1em;
}

/*   ----------   Demo thumbnails   ----------   */

article.thumbnail {
	width: 22.5em;
	height: 20em;
	margin: 0 1em 1em 0;
	border: 2px #CCC solid;
	border-radius: 5px;
	background: white;
}

.thumbnail img {
	max-width: 100%; /* TODO: fix image sizes so this is not necessary */
	border: 2px #CCC solid;
	border-radius: 5px;
}

.thumbnail-container {
	padding: 1.25em;
	border-bottom: 2px #CCC solid;
}

.thumbnail a:link, .thumbnail a:visited {
	text-decoration: none;
	color: black;
	height: 100%;
	display: block;
}

.thumbnail h3 {
	margin: 0.5em 1.25em 0 1.25em;
	color: #111;
}

.thumbnail p {
	margin: 0 1.25em;
	font-size: 0.9em;
	color: #111;
}

/*   ----------   Footer   ----------   */