@font-face {
	font-family: Hobo;
	/* TODO no asset root available here alas */
	src: url(/assets/hobo.ttf);
}

html {
	background: #001020;
	background-image: url(/assets/cinematics/starfield0.png);
	background-size: 200%;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;

	image-rendering: -moz-crisp-edges;         /* Firefox */
	image-rendering:   -o-crisp-edges;         /* Opera */
	image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
	image-rendering: pixelated;
}
main {
	font-size: 16px;
	font-family: "Source Sans Pro", "DejaVu Sans", "Bitstream Vera Sans", Helvetica, Arial, sans-serif;
	margin: 2em 8em 16em;
	padding: 1em;

	border: 1px solid #101010;
	border-radius: 1em;
	background: hsla(215, 20%, 10%, 0.9);
	box-shadow: 0 0.25em 0.5em black;
	color: #f4f4f4;
}
a {
	color: hsl(215, 90%, 80%);
}
a:visited {
	color: hsl(245, 90%, 80%);
}

main > header {
	margin: -1em -1em 1em;
	padding: 1em;
	border-radius: 1em 1em 0 0;
	background: hsl(215, 20%, 8%);
}
main > footer {
	margin: 1em -1em -1em;
	padding: 1em;
	border-radius: 0 0 1em 1em;
	background: hsl(215, 20%, 8%);
	text-align: right;
	color: hsl(215, 10%, 70%);
}
main > footer p {
	line-height: 1;
	margin-bottom: 0.5em;
}
h1 {
	margin: 0;
	font-family: Hobo, "Source Code Pro", "Droid Sans Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
}
h1 > .item-icon {
	margin: 0 8px;
	transform: scale(2);
	transform-origin: center center;
}

h2 {
	overflow: hidden;
	color: hsl(215, 20%, 80%);
	border-bottom: 1px solid hsl(215, 20%, 40%);
}
h3 {
	color: hsl(215, 10%, 70%);
	border-bottom: 1px dotted hsl(215, 10%, 20%);
	margin-right: auto;
}
p {
	line-height: 1.4;
	margin: 0 0 1em;
}
p:last-child {
	margin-bottom: 0;
}

.game-text {
	color: white;
	font-weight: normal;
	font-family: Hobo, "Source Code Pro", "Droid Sans Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
}

img.item-icon {
	vertical-align: middle;
	height: 16px;
	width: 16px;
	object-fit: scale-down;
}
span.item-icon {
	display: inline-block;
	vertical-align: middle;
}

.asset-link {
	font-family: "Source Code Pro", "Droid Sans Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Consolas, "Lucida Console", Monaco, monospace;
}

.planet-layer {
	margin: 1px 0;
	box-sizing: border-box;
	line-height: 1;
	background-color: #c0c0c0;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	text-shadow: 1px 1px 1px black;
}
.planet-layer-space { background: hsl(240, 20%, 20%); }
.planet-layer-atmosphere { background: hsl(210, 50%, 40%); }
.planet-layer-surface { background: hsl(75, 75%, 25%); }
.planet-layer-subsurface { background: hsl(50, 60%, 30%); }
.planet-layer-underground1 { background: hsl(30, 75%, 35%); }
.planet-layer-underground2 { background: hsl(30, 80%, 30%); }
.planet-layer-underground3 { background: hsl(30, 85%, 25%); }
.planet-layer-underground4 { background: hsl(30, 90%, 20%); }
.planet-layer-underground5 { background: hsl(30, 95%, 15%); }
.planet-layer-underground6 { background: hsl(30, 100%, 10%); }
.planet-layer-core { background: hsl(15, 100%, 20%); }

.item-name {
	display: inline-block;
	padding: 0.25em;
	margin: 0.1em 0;
	background: #404040;
	border: 1px solid #303030;
	border-radius: 0.5em;
	font-family: Hobo, "Source Code Pro", "Droid Sans Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
	font-size: 16px;
	color: white;
	text-shadow: 1px 1px 0 #404040;
	text-decoration: none;
	white-space: nowrap;
}
a.item-name, a.item-name:visited {
	color: white;
}
.item-name:hover {
	background: #505050;
}
.item-name img {
	vertical-align: middle;
}

.standard-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	border: 2px solid hsl(215, 20%, 8%);
}
.standard-table th {
	padding: 0.33em;
	text-align: left;
	color: hsl(215, 20%, 80%);
	background: hsl(215, 20%, 8%);
}
.standard-table td {
	padding: 0.33em;
	vertical-align: top;
}
.standard-table tr {
	border-bottom: 1px solid hsl(215, 20%, 8%);
}

.recipe-list col.-stations {
	width: 6em;
}
.recipe-list th {
	padding: 0.33em;
	text-align: left;
	color: hsl(215, 20%, 80%);
	background: hsl(215, 20%, 8%);
}
.recipe-list td {
	padding: 0.33em;
	vertical-align: top;
}
.recipe-list tr {
	border-bottom: 1px solid hsl(215, 20%, 8%);
}

.starbound-interface {
	float: right;
	position: relative;
	margin: 0 0 1em 1em;
	color: white;
	font-size: 8px;
	line-height: 1;
	font-family: Hobo, "Source Code Pro", "Droid Sans Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
}
.starbound-interface .-image {
	display: block;
	width: auto;
	height: auto;
	object-fit: contain;
}
.starbound-interface .-image > img,
.starbound-interface .-image > span {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.starbound-interface .-centered-image {
	/* Cutesy hack to get the sole child to center itself perfectly on this
		* element's position */
	display: flex;
	height: 0;
	width: 0;
	justify-content: center;
	align-items: center;
}