@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,700;1,400;1,700&family=Roboto+Condensed:ital,wght@0,300;0,700;1,300;1,700&family=Noticia+Text:wght@700&display=swap');

@font-face {
	font-family: 'Pathfinder2eActions';
	src: url('../fonts/Pathfinder2eActions.ttf');
	/*
	Action: 1 A a
	Double Action: 2 D d
	Triple Action: 3 T t
	Free Action: 4 F f
	Reaction: 5 R r
	*/
}

html {
	font-size: 20px;
	font-family: 'EB Garamond', serif;
}

main {
	max-width: 50rem;
	margin: 0 auto;
}

/*************************************************
 *	HEADINGS
 *************************************************/

h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: 0;
}

* + h2, * + h3, * + h4, * + h5, * + h6 {
	margin-top: 1rem;
}

h2 span, h3 span, h4 span {
	float: right;
}

h2 {
	font-family: 'Noticia Text', serif;
	font-size: 1.8rem;
}

h3 {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.5rem;
	font-variant: small-caps;
}

h4 {
	font-family: 'Roboto Condensed', sans-serif;
	text-transform: uppercase;
	font-size: 1.25rem;
	border: solid black;
	border-width: 0 0 0.1rem 0;
	margin-bottom: 0.2rem;
}

h6 {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.25rem;
	text-transform: uppercase;
}

/*************************************************
 *	PARAGRAPHS
 *************************************************/

p {
	margin-top: 0;
	margin-bottom: 0;
	line-height: 1.4;
	text-align: justify;
}

p + p {
	text-indent: 1rem;
}

p.big-letter::first-letter {
  font-size: 5.5rem;
  float: left;
  padding: 0 .3rem;
  margin: 0 .3rem 0 0;
  font-weight: bold;
}

/*************************************************
 *	PF2e ICONS
 *************************************************/
 
span.icon {
	font-family: 'Pathfinder2eActions', sans-serif;
	font-size-adjust: 0.8;
}

/*************************************************
 *	STAT-BLOCK SECTIONS
 *************************************************/
 
section.stat-block {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	letter-spacing: 0.015rem;
	margin-bottom: 1rem;

}

section.stat-block p {	
	/* https://stackoverflow.com/a/21316404 */
	margin-left: 1rem;
    text-indent: -1rem;
}

section.stat-block b {
	font-weight: bold;
}

/*************************************************
 *	ASIDES ("SIDEBARS") AND QUOTES ("READ-ALOUD")
 *************************************************/

aside, quote {	
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	letter-spacing: 0.015rem;
	display: block;
	margin: 0.5rem 0;
	padding: 0.5rem 0;
}

aside {
	background-color: silver;
	border: 0.1rem solid black;
	padding: 0.5rem;
}

quote {
	border: solid black;
	border-width: 0.1rem 0;
}

aside b {
	font-weight: 700;
}

quote p + quote p {
	text-indent: 2rem;
}

/*************************************************
 *	TRAITS
 *************************************************/

ul.traits {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

ul.traits li {
	font-size: 0.8rem;
	display: inline-block;
	padding: 0.1rem 0.4rem;
	background-color: #9655af;
	color: white;
	font-family: 'Roboto Condensed', sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	border: 0.2rem solid #d8c384;
}

ul.traits li + li {
	margin-left: 0.25rem;
}

ul.traits li.size {
	background-color: #3a7a58;
	border-color: #81c39d;
}

ul.traits li.uncommon {
	background-color: #98503c;
	border-color: #d4856e;
}

ul.traits li.rare {
	background-color: #4f6c9d;
	border-color: #7d99cd;
}

ul.traits li.unique {
	background-color: #54166d;
	border-color: #9655af;
}

/*************************************************
 *	COLOUR SCHEMES
 *************************************************/

 
/* BLUE */
@media screen { 
	main.blue h2,	
	main.blue h3,
	main.blue p.big-letter::first-letter,
	main.blue quote	{
		color: #003b73; /* Darker */
	}

	main.blue aside {
		background-color: #bfd7ed; /* Lighter */
	}

	main.blue quote {
		border-color: #0074b7; /* Dark */
	}

	main.blue ul.traits li:not(.size):not(.uncommon):not(.rare):not(.unique) {
		/* background-color: #0074b7; */ /* Dark */
		/* border-color: #60a3d9; */ /* Light */
	}
}

/*************************************************
 *	PRINT STYLES
 *************************************************/
 
@media print {
	html {
		font-size: 15px;
	}
	
	main {
		column-count: 2;
	}

	section.stat-block,
	aside,
	quote {		
		break-inside: avoid;
	}
	
	h2, h3, h4, h5, h6 {
		break-after: avoid;
	}

	ul.traits li,
	ul.traits li.uncommon,
	ul.traits li.rare,
	ul.traits li.unique,
	ul.traits li.size {
		color: black;
		background-color: white;
		border-color: black;
	}	
}