:root {
	--sans: Verdana, sans-serif;
}

html{
	background: #b7c5ce;
}
body {
	display: grid;
	grid-template-columns: minmax(10em, 13vw) auto;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"nav header"
		"nav main"
		"nav footer";
}

/* Half panda badge */
.icon {
	display: inline-block;
	vertical-align: middle;
	margin-top: 2em;
	margin-bottom: 2em;
	margin-left: .5em;

	span {
		--width: 8em;
		display: inline-block;
		width: calc(var(--width) / 2);
		height: var(--width);
		background-size: var(--width);
	}
	.panda {
		background-image: url(/images/panda_icon.png);
	}
	.robot {
		background-image: url(/images/robot_icon.png);
		background-position-x: -100%;
	}
}

nav {
	grid-area: nav;
	overflow-y: auto;
	border-right-style: solid;
	border-width: 1px;
	border-color: gray;
	list-style-type: none;
	min-height: 100vh;

	h3 {
		font-family: var(--sans);
		text-align: center;
	}

	> menu {
		margin-block-start: 0;
		padding-left: 1em;
		padding-right: 2em;
	}

	> menu li {
		margin-bottom: .4em;
		overflow-x: hidden;
		text-wrap-mode: nowrap;
		font-family: var(--sans);
		font-size: 11pt;
	}
}

search input {
	max-width: 100%;
}

header {
	grid-area: header;

}

a#feed {
	float: right;
	margin: 1em;

	img {
		width: 24px;
	}
}

main {
	grid-area: main;
}

h1 {
	font-size: xx-large;
	margin: 1em;
	font-family: var(--sans);
	font-weight: lighter;
}

main {
	padding-top: 1em;
	padding-left: 4em;
	padding-right: 2em;
}

h2 {
	font-family: var(--sans);
	border-bottom-style: solid;
	border-width: 1px;
	border-color: gray;
	padding-right: 2em;
	padding-left: .5em;
	margin-left: -.5em;
}
time {
	margin-left: 2em;
	font-family: Arial, sans-serif;
	font-weight: lighter;
	color: darkcyan;
}

main p {
	font-family: Georgia;
}

main > article p {
	font-size: 14pt;
}

section.search-results {
	article {
		margin-left: .5em;
	}
	h3 {
		font-family: var(--sans);
		font-weight: normal;
		margin-block-end: .5em;
	}
	time {
		font-size: small;
	}
	input {
		display: none;
	}
	p {
		font-size: 10pt;
		margin-left: .5em;
		margin-block: 0;
		max-height: 7ex;
		overflow: hidden;
		transition: max-height 1s;
	}
	input:checked + p {
		max-height: 50vh;
	}
}

footer {
	grid-area: footer;
	padding: 1em;

	p {
		font-family: var(--sans);
		font-size: 8pt;
		margin-block: .2em;
	}
}