@font-face {
	font-family: 'Hermit';
	src: url('./fonts/HurmitNerdFontMono-Regular.otf') format('opentype');
}

@font-face {
	font-family: "Straczynski";
	src: url("./fonts/Straczynski Bold.woff2")format("woff2");
}

body {
	color: #d4be98;
	background-color: #32302f;
	font-family: 'Hermit';
	text-align: center;
}

p.index {
	text-align: center;
	max-width: 75%;
	margin: 0 auto;
	padding: 12px 0 20px;
}

img {
	max-width: 50%;
	max-height: 300px;
	width: auto;
	height: auto;
	border: 1px solid #d4be98;
	border-radius: 6px;
}

img.logo {
	max-width: 100%;
	max-height: 100px;
	border: none;
	border-radius: none;
}

img.band {
	max-width: 75%;
	max-height: 600px;
	width: auto;
	height: auto;
	border: none;
	border-radius: none;
	padding: 20px;
}

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

.menu a:hover,
p a.highlight:hover {
	color: #252423;
}

a.current,
a.current:hover {
	color: #32302f;
}

i {
	display: inline-block;
	font-size: 2rem;
	padding: 10px;
	transition: transform 0.1s ease, color 0.1s ease;
}

i:hover,
i:focus {
	transform: scale(1.1);
	color: #d8a657;
}

.hidden {
	display: none;
}

.menu {
	display: flex;
	justify-content: center;
	gap: 12px;
	background-color: #504945;
	font-family: "Straczynski";
	margin-bottom: 20px;
}

.menu a {
	margin: 0.5rem 0;
}

.row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	text-align: left;
	max-width: 500px;
	margin: 20px auto 10px auto;
	border: 1px solid #d4be98;
	padding: 1rem;
	border-radius: 6px;
}

.row img {
	order: 2;
}

.row h3 {
	font-family: "Straczynski";
}

.content {
	flex: 1;
	order: 1;
}

.highlight {
	color: #d8a657;
}

ul.index {
	list-style: none;
	padding: 0;
}