body {
	font-family: 'EB Garamond', serif;
	background-image:url('golden-parchment-paper-texture.jpg'),linear-gradient(burlywood,dimgrey);
	background-image:center;
	background-size:cover;
	background-repeat:no-repeat
}

h1, h2, h3, h4 {
	font-family: 'Secular One', sans-serif;
	text-transform: uppercase;
}

button {
	font-family: 'Roboto', sans-serif;
}

#headerDiv h1 {
	display:inline;
}

#headerDiv h3 {
	color:darkred;
	display:inline;
	margin-left:3vw;
}

.headerBar {
	background:rgba(139,50,30,0.4);
	padding:1em;
	color:darkred;
}

.headerBar h3 {
	margin:0;
	padding:0;
	width:95%;
	float:left;
}

.headerBar button {
}

#wrapperDiv {
	width:60%;
	margin-left:20%;
	float:left;
}

.wrapper {
	border:1px solid darkred;
	margin-bottom:1vh;
}

#listsDiv {
	display:none;
	margin-left:5%;
	margin-right:5%;
	margin-bottom:1%;
}

#listsGrid {
	display:grid;
	gap:5%;
	grid-template-columns:1fr 1fr 1fr 2fr;
}

#bankDiv {
	max-height:40vh;
	overflow-y:auto;
}

.bankLabel {
	margin-right:1vw;
}

#list0Div {
	max-height:50vh;
	overflow-y:auto;
}

#list1Div {
	max-height:50vh;
	overflow-y:auto;
}

#list2Div {
	max-height:50vh;
	overflow-y:auto;
}

#listFooter {
	grid-column-start:1;
	grid-column-end:5;
	text-align:right;
	font-weight:bold;
}

#listFooter button {
	margin-left:1vw;
}

#creatureSubHeader {
	text-align:right;
	margin-left:5%;
	margin-right:5%;	
}

#creatureSubHeader button {
	margin-left:1vw;
}

.KeystoneCreature {
	display:grid;
	grid-template-columns:repeat(2,1fr);
	grid-template-rows:repeat(2,1fr);
	gap:5%;
	margin-left:5%;
	margin-right:5%;
}

#distinctions {
	grid-column-start:1;
	grid-column-end:3;
	display:grid;
	grid-template-columns:repeat(3,1fr);
	grid-template-rows:60px 1fr;
	gap:5%;
}

#attributes {
	grid-row-start:2;
	grid-row-end:3;
}

#signatureAssets {
	grid-row-start:2;
	grid-row-end:3;
}

#distinctions h3:first-child {
	grid-column-start:1;
	grid-column-end:4;
}

#distinctions div p:first-child {
	font-weight:bold;
	font-size:1.2em;
	margin-top:0;
}

.traitSetHeader {
	color:darkred;
	width:100%;
	display:block;
	border-bottom:1px solid darkred;
}

#demoBlurb {
	margin-left:25%;
	margin-right:25%;
	text-align:center;	

}

#demoDiv {
	padding-top:10vh;
	padding-left:80vw;
	width:15vw;
}

#demoDiv img {
	width:100%;
	border: 1px solid darkred;
}