/*
 * Eem Labs — layout & presentation
 * Modernized: same retro look, responsive bones.
 */

:root {
	--color-bg: #b0d4b8;
	--color-ink: #000000;
	--color-paper: #ffffff;
	--color-link: #55b16b;
	--color-new: #842dce;
	--border-solid: 2px solid #000000;
	--border-dashed: 1px dashed #000000;
}

/* --- Base ---------------------------------------------------------------- */

body {
	margin: 0;
	padding: 0;
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: Verdana, "DejaVu Sans", "Segoe UI", system-ui, sans-serif;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	font-weight: bold;
	text-decoration: underline;
	color: var(--color-link);
}

h1 {
	color: var(--color-link);
	margin-top: 0;
}

/* --- Header / nav / footer ------------------------------------------------ */

.header {
	margin: 20px auto;
	width: 340px;
	max-width: calc(100% - 20px);
	border: var(--border-solid);
	background: var(--color-paper);
}

.header img {
	display: block;
}

.navbar,
.footer {
	margin: 20px auto;
	width: 550px;
	max-width: calc(100% - 20px);
	padding: 10px;
	text-align: center;
	border: var(--border-solid);
	background: var(--color-paper);
}

/* Decorative hand bullets, drawn with CSS instead of <img> tags. */
.navbar a::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 16px;
	margin-right: 6px;
	background: url("/images/handbullet.png") no-repeat left center / contain;
	vertical-align: -2px;
}

.navbar a {
	margin-left: 10px;
}

.navbar a:first-child {
	margin-left: 0;
}

.footer {
	font-size: 10px;
}

.footer .cheese {
	float: left;
}

/* --- Content --------------------------------------------------------------- */

.content {
	margin: 20px auto;
	width: 75%;
	padding: 10px;
	border: var(--border-solid);
	background: var(--color-paper);
}

.news {
	margin: 20px auto;
	width: 92%;
	padding: 10px;
	border: var(--border-dashed);
	background: var(--color-paper);
	text-align: justify;
}

span.title {
	font-size: 14px;
	font-weight: bold;
}

span.new {
	font-size: 14px;
	font-weight: bold;
	color: var(--color-new);
}

/* --- Download / genome items ------------------------------------------------ */

.item {
	display: grid;
	grid-template-columns: 30% 62%;
	justify-content: start;
	margin: 20px auto;
	width: 92%;
	padding: 10px;
	border: var(--border-dashed);
}

.item > .itemimage {
	text-align: center;
	align-self: center;
}

.item > .itemtext {
	padding: 10px;
	align-self: start;
}

/* --- Small screens ----------------------------------------------------------- */

@media (max-width: 800px) {
	.content {
		width: auto;
		margin: 20px 10px;
	}
}

@media (max-width: 640px) {
	.item {
		grid-template-columns: 1fr;
		width: auto;
	}

	.item > .itemimage {
		margin-bottom: 10px;
	}

	.navbar {
		line-height: 2.2;
	}
}