@font-face {
	font-family: 'Barlow Condensed';
	font-weight: 500;
	src: url(fonts/barlow-condensed-500.woff2) format('woff2');
}

html {
	background-color: white;
}

body {
	font-family: 'Barlow Condensed', helvetica, arial, sans-serif;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.1;
	color: #000;
	margin: 0;
	padding-top: 15px;
}

a {
	text-decoration: none;
	color: #000;
}

a:hover {
	color: rgb(84, 84, 84);
}

#container {
	display: flex;
	min-height: 616px;
	padding: 20px;
}

#navigation {
	padding: 0 34px 0 14px;
}

#navigation img {
	display: block;
	width: 32px;
	height: auto;
}

/*---------------MENU---------------*/

/* the logo image has 8px of white above the symbol at this size */
#menu {
	position: relative;
	margin-top: -8px;
}

#menu summary {
	cursor: pointer;
	list-style: none;
}

#menu summary::-webkit-details-marker {
	display: none;
}

#menu summary:hover img {
	opacity: 0.6;
}

/* sits above the zoom plugin, which uses z-index 999 */
#menu ul {
	position: absolute;
	top: 8px;
	left: 42px;
	z-index: 1000;
	margin: 0;
	padding: 12px 16px;
	list-style: none;
	white-space: nowrap;
	background-color: white;
	border: 2px solid #000;
}

#menu li + li {
	margin-top: 6px;
}

#menu a[aria-current] {
	color: rgb(84, 84, 84);
}

/* columns line up with the first two columns on the issue pages */
#spiel2container,
#contactcontainer {
	width: 420px;
}

#contactcontainer {
	margin-left: 20px;
}

/* pulls the top of the capitals up to the top edge of the issue images */
#spieldetails,
#contactdetails {
	margin-top: -0.25em;
}

#spieldetails:after,
#contactdetails:after {
	content: "";
	display: block;
	width: 75px;
	margin-top: 12px;
	border-bottom: 2px solid #000;
}


/*---------------ISSUE PAGES---------------*/

#issue {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 20px;
}

.panel {
	width: 420px;
}

.panel img {
	display: block;
	width: 100%;
	height: auto;
}


/*---------------NARROW SCREENS---------------*/

@media only screen and (max-width: 1020px) {

	body {
		font-size: min(24px, 5.2vw);
	}

	#container {
		display: block;
		min-height: 0;
	}

	#navigation {
		padding: 0;
	}

	#menu {
		margin-top: 0;
	}

	#menu ul {
		top: 50px;
		left: 0;
	}

	#issue {
		display: block;
	}

	.panel {
		width: auto;
		max-width: 420px;
		margin-top: 20px;
	}

	#spiel2container,
	#contactcontainer {
		width: auto;
		max-width: 420px;
		margin-left: 0;
	}

	#spieldetails,
	#contactdetails {
		margin-top: 0;
		padding-top: 30px;
	}

}