:root {
	--eggshell: #dcd5bd;
	--brown: #271e0e;
	--gold: #e2c05d;
	--darkgold: #c39d4c;
	--lightbrown: #64461e;
}

@font-face {
	font-family: "Candara";
	src: url("fonts/Candara-Regular.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: fallback;
}
@font-face {
	font-family: "Candara";
	src: url("fonts/Candara-Bold.woff") format("woff");
	font-weight: bold;
	font-style: normal;
	font-display: fallback;
}
@font-face {
	font-family: "Candara";
	src: url("fonts/Candara-Italic.woff") format("woff");
	font-weight: normal;
	font-style: italic;
	font-display: fallback;
}
@font-face {
	font-family: "Candara";
	src: url("fonts/Candara-BoldItalic.woff") format("woff");
	font-weight: bold;
	font-style: italic;
	font-display: fallback;
}

body {
	font-family: "Candara", sans-serif;
	margin: 0;
	padding: 0;
	font-size: 115%;
	line-height: 125%;
	background-color: var(--eggshell);
	color: var(--brown);
}

a {
	font-weight: bold;
	color: var(--gold);
}
a:hover {
	color: var(--darkgold);
}

.lightbg a {
	color: var(--lightbrown);
}
.lightbg a:hover {
	color: #000;
}

header, footer {
	border-radius: 10px;
	background-color: var(--brown);
	color: white;
	margin: 0.5em;
	padding: 0.5em;
}

header nav {
	font-size: 125%;
}

h1 {
	line-height: 125%;
}

nav ul {
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	text-align: center;
}

nav ul li {
	margin: 0.25em;
}

.about{
	margin: 0.5em;
	padding: 0.5em;
}

.generation {
	border: 3px solid var(--darkgold);
	border-radius: 10px;
	background-color: var(--gold);
	margin: 0.5em;
	padding: 0.5em;
}

.desc {
	grid-column: 1 / -1;
}

.members_container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(332px, 1fr));
	justify-content: center;
}

.individual, .stranger_pack {
	border-radius: 10px;
	background-color: var(--brown);
	color: white;
	margin: 0.5em;
	padding: 0.5em;
	text-align: center;
}

.image_container {
	max-width: 90%;
	overflow: hidden;
	margin: auto;
	text-align: center;
}

.image_container img {
	max-width: 100%;
}

.events {
	margin: 0.5em;
	padding: 0.5em;
}

.collection {
	border: 3px solid var(--darkgold);
	border-radius: 10px;
	background-color: var(--gold);
	margin: 0.5em;
	padding: 0.5em;
}

.stranger_pack {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.stranger_pack h3 {
	grid-column: 1 / -1;
}

.name {grid-column: 1 / 2;}
.number {grid-column: 2 / 3;}
.role {grid-column: 3 / 4;}

.dead {color: red;}

.key {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 2em;
}

.key p {
	margin: 0;
}