/* THE DRAGONS HALL — shared styles */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

:root {
	--banner-h: 180px;
	--sidebar-w: 180px;
}

body {
	background-color: #000000;
	color: #FF0000;
	font-family: Arial, Helvetica, sans-serif;
	min-height: 100vh;
}

a { color: #FF0000; }
a:visited { color: #FF0000; }

/* ---------- Page layout (replaces the old frameset) ---------- */

.site {
	display: grid;
	grid-template-columns: var(--sidebar-w) 1fr;
	grid-template-rows: auto 1fr;
	min-height: 100vh;
}

/* ---------- Banner (was dragons_hall.html) ---------- */

.banner {
	grid-column: 1 / -1;
	position: sticky;
	top: 0;
	z-index: 20;
	background-color: #000000;
	border-bottom: 2px solid #800000;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.5rem 1rem;
	height: var(--banner-h);
}

.banner img {
	height: 154px;
	width: auto;
	flex-shrink: 0;
}

.banner h1 {
	margin: 0;
	font-size: 75pt;
	line-height: 1;
	white-space: nowrap;
}

.banner h1 a {
	color: #FF0000;
	text-decoration: none;
}

/* ---------- Sidebar nav (was pagelist.html) ---------- */

.sidebar {
	position: sticky;
	top: var(--banner-h);
	align-self: start;
	max-height: calc(100vh - var(--banner-h));
	overflow-y: auto;
	background-color: #000000;
	background-image: url('blueglow.jpg');
	padding: 1rem 0.5rem;
	text-align: center;
}

.navitem {
	margin-bottom: 2rem;
}

.navitem a {
	display: inline-block;
	color: #FFFFFF;
	text-decoration: none;
	font-weight: bold;
}

.navitem img {
	display: block;
	margin: 0 auto 0.25rem;
	border: 0;
}

.navitem .label {
	display: inline-block;
	padding: 0.15rem 0.4rem;
	background-color: #800000;
	color: #FFFFFF;
}

/* ---------- Main content area (was Untitled_4.html / genre.html) ---------- */

main {
	background-color: #000000;
	background-image: url('dragon2.gif'), url('blueglow.jpg');
	background-position: calc(50% + var(--sidebar-w) / 2) var(--banner-h), top left;
	background-repeat: no-repeat, repeat;
	background-attachment: fixed, scroll;
	background-size: auto calc(100vh - var(--banner-h)), auto;
	color: #FFFFFF;
	padding: 2rem 1rem;
	text-align: center;
	min-height: calc(100vh - var(--banner-h));
}

/* ---------- Genre list ---------- */

.genre-list {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	max-width: 22rem;
}

.genre-list li {
	margin: 1rem 0;
}

.genre-list a {
	display: inline-block;
	color: #FF0000;
	font-weight: 900;
	font-size: 1.75rem;
	text-decoration: none;
	letter-spacing: 0.07em;
	text-shadow: 0 0 4px #000, 0 2px 4px #000;
}

.genre-list a:hover,
.genre-list a:focus {
	text-decoration: underline;
}

/* ---------- Mobile / small-screen ---------- */

@media (max-width: 720px) {
	:root { --banner-h: 130px; --sidebar-w: 0px; }

	.site {
		grid-template-columns: 1fr;
	}

	.banner {
		flex-direction: column;
		text-align: center;
		gap: 0.25rem;
		padding: 0.5rem;
		height: auto;
	}

	.banner img { height: 80px; }
	.banner h1 { font-size: 36pt; white-space: normal; }

	.sidebar {
		position: static;
		max-height: none;
		overflow: visible;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1rem;
		padding: 1rem 0.5rem;
	}

	.navitem { margin-bottom: 0; flex: 0 1 8rem; }
}