* {
	box-sizing: border-box;
}

body {
	font-family: "Avenir Next", sans-serif;
	font-weight: 500;
	font-variant: small-caps;
	background-color: darkGray;
	color: #00F7B0;
	background: black;
	background-image: url("assets/starry-sky-with-galaxy.jpg");
	background-repeat: repeat-y;
	background-size: cover;
}

main {
	font-size: 160%;
}

main.legal {
	font-size: 120%;
}

main.legal p, main.legal li, main.legal h4 {
	font-variant: normal;
}

.caps {
	font-variant: normal;
}

.indented {
	font-size-adjust: 4em;
}

h1 {
	font-weight: 600;
	color: #F6EB75;
	font-size: 4em;
	padding: 0px
}

h1.mainpage {
	font-weight: 600;
	color: white;
	font-size: 1.6em;
	padding: 0px
}

h2 {
	font-size: 1.8em;
	font-weight: 500;
	color: #F6EB75;
}

h3 {
	font-size: 1.2em;
	font-weight: 500;
	color: #F6EB75;
}

h4 {
	font-size: 1em;
	font-weight: 500;
	font-style: italic;
	color: #F6EB75;
}

a {
	color: white;
}

nav {
	flex-shrink: 0;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

header {
	padding: 0;
	margin: 2em;
}

header h1 {
	padding: 0;
	margin: 0.5em;
}

header nav {
	padding: 2em 1em;
}

header nav li a {
	color: inherit;
}

.flexContainer {
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
}

footer {
	font-size: 80%;
	padding: 0 1em;
	margin: 2em;
	font-variant: normal;
}

.framed {
	border-image-source: url("assets/frame-1.png");
	border-image-slice: 44 fill;
	border-image-width: 1.5em;
}

.selected {
	border-image-source: url("assets/selection-frame.png");
	border-image-slice: 36 fill;
	border-image-repeat: repeat;
	border-image-width: 1em;
}

.weakHighlight {
	color: #F6EB75;
}

.strongHighlight {
	color: white;
}

.appTitle {
	display:flex;
	align-items: center;
}

.appTitle img {
	flex-grow: 0;
	flex-shrink: 0;
	width: 5em;
	height: 5em;
	margin-right: 1em;
}

.appTitle p:first-of-type {
	 font-size: 1.5em;
	 margin-top: -1.5em;
	 margin-bottom: 0;
	 color: #B6B6B6;
}

.preview {
	display: flex;
	flex-wrap: wrap;
	margin: -0.5em;
}

.preview > * {
	margin: 0.5em;
}

.preview img, .youtube iframe {
	border-style: solid;
	border-width: 1px;
	border-color: white;
}

.preview img {
	width: 15em;
	height: auto;
}

main h1:first-child, .appTitle h1 {
	margin-top: 0;
}

.screenshot h1 {
	font-size: 1.25em;
	font-weight: 500;
}

.screenshot a {
	text-decoration: none;
}

.screenshot img, .screenshot video {
	max-width: 100%;
	height: auto;
	border-style: solid;
	border-width: 1px;
	border-color: white;
}

.contents {
    padding: 2em;
	align-items1: top;
}

nav.menu {
	height: 100%;
	text-align: center;
	padding: 2em 2em;
	margin-bottom: 2em;
	margin-left: 2em;
}

nav.menu li {
	color: white;
	padding: 0.5em;
	margin: 0.75em 0;
	font-size: 110%;
}

nav.menu li a {
	text-decoration: none;
	color: #F6EB75;
}

main h1 {
	font-size: 2.5em;
}

a.appLink {
	text-decoration: none;
}

.appLink > * {
	border-style: solid;
	border-color: white;
	border-width: 1px;
	padding: 0.2em;
	padding-right: 1em;
}

@media screen and (max-width: 800px) {
	
	body {
		font-size: 75%;
	}
	
	nav.menu {
		margin-bottom: 2em;
		margin-left: inherit;
	}

	nav.menu li {
		font-size: 150%;
		padding: 0.1em;
		margin: 0.2em 0;
	}
	
	.contents {
		padding: 0;
		flex-direction: column;
	}
	
	main.legal {
		width: inherit;
	}
	
	header, footer {
		margin: 2em 0;
	}

	main h1 {
		font-size: 1.75em;
	}

	.preview > * {
		width: 45%;
	}

	.preview img, .preview iframe {
		width: 100%;
	}

	.appTitle img {
		width: 4em;
		height: 4em;
	}
	
	.appTitle p:first-of-type {
		font-size: 1.2em;
		margin-top: -1.2em;
		color: #B6B6B6;
	}

	header h1 {
		font-size: 2.5em;
		margin: 0.5em;
	}

	footer {
		font-size: 100%;
	}

}