:root{
	--light-yellow: #fefef6;
	--dark-yellow: #ffffe1;
	--accent-color: #a3cbe3;	
	--dark-blue: #074B73;
  --medium-blue: #26a;
}

html, body{	
	margin: 0;	
}

.small{
  font-size:0.8em;
}

.speech {
 display: none;
}

@media speech {
 .speech {
 display: block;
 }
}

body{		
	counter-reset: articlenum articlenumtoc;	
	font-size: 20pt;
	font-family: "Cabin", sans-serif;
	font-weight: 400;
	font-style: normal;	
	background-color: var(--light-yellow);
	color: var(--dark-blue);
}

a{	color: var(--medium-blue);}

video{
	margin:auto;
	width:100%;
}

article header::before {
  counter-increment: articlenum;
  content: counter(articlenum);	
	font-size:68pt;	
	color:#ccc;
	position:absolute;
	top:-20pt;
	left:0pt;
	z-index:-1;
}

nav{	
	font-family:brothers;
	font-size:14pt;		
	padding:12pt 0 64pt 0;
}
@media(min-width:800px){
	nav{
		padding:32pt 0 64pt 0;
	}
}

nav h1, nav h2, nav p{	
	text-align:center;
}
nav h1, nav li{
	text-transform:uppercase;
}
nav h1 em{
	font-size:8pt;
	color:#aaa;
	vertical-align:baseline;
}


nav ul{
	list-style:none;	
}


nav a{
	text-decoration: underline;
	color:var(--dark-blue);
}
.madebycommunity{
	width:100px;
	opacity:0.3;
	float:left;
	margin-right:8pt;
	vertical-align:top;
}
nav p{
	font-size:10pt;
	text-transform:normal;
	width:80%;
	margin:auto;
	margin-top:12pt;
	color:#888;	
	
	font-family:"Cabin", sans-serif;
	font-style:italic;
}

nav p a{
	color:var(--accent-color);
}
.minor{
	font-size:0.72em;
}

li{
	margin-bottom:25pt;
}

li .rule{	
	flex-grow:2;
	border-bottom: dotted 3px var(--dark-blue);	
	height:12pt;
	margin: 0pt 2pt 0 2pt;	
}

.numeral::after{
	counter-increment: articlenumtoc;
  content: counter(articlenumtoc);	
}

li span{
	float:right;
}

nav .dots {
	display:flex;	
	justify-content: space-between;

	width:90%;	
}

 
header{
	font-size: 20pt;
	font-family: brothers, serif;
	text-align: center;
	margin-top: 24pt;	
	text-transform: uppercase;		
	position:relative;
}




* New styles for the header layout */
.siteheader .header-content {
  display: flex; /* Creates the column layout */
  justify-content: left;
  align-items: center;     /* Vertically aligns the columns with each other */
  gap: 20px;               /* Adds space between the h1 and the text group */
  padding: 20px 0 0 16px;         /* Adds some vertical spacing */
}

/* This targets the <div> holding h2 and h3 */
.siteheader .header-text-group {
  display: flex;
  flex-direction: column; /* Stacks h2 and h3 on top of each other */
}

.siteheader .header-custom{
	padding-left:20px;
	
}





.separator{
	height: 100px;
	width: 100%;
	margin: 100px 0 0 0;
	/*background: var(--accent-color);*/
}

header>em{
	font-size: 8pt;
	display: block;
}

.p{
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 12pt;	
	min-width: 200px;
	display: block;
	margin-top: 42pt;
}
.p + figure img{
	margin-top: 42pt;	
}

.p + figure figcaption{
	margin-bottom: 42pt;
}

section hr{
	margin-bottom: 12pt;
}

blockquote {
	quotes: "\201C""\201D""\2018""\2019";
	width: 100%;	
	margin: 0;
	margin-bottom: 12pt;
	font-size: 20pt;
	float: left;
	font-style: italic;
}
blockquote:before {
	color: #fec;
	content: "\201C";
	font-size: 4em;
	line-height: 0.1em;
	margin-right: -0.14em;
	vertical-align: -0.4em;	
}
blockquote .p {
	display: inline;
}
q{
	/*font-style: italic;*/
	quotes: "\201C""\201D""\2018""\2019";
}
article{
	
}

aside,section{
	position:relative;
	padding: 0 24pt 0 24pt;
}

section{
	display: block;
	
}



aside header{
	font-size: 32pt;
	border-width: 6px;
	font-weight: 400;	
	
	-webkit-column-span: all;
 column-span: all;
}

aside .p{
	font-size: 16pt;
	font-family: brothers, serif;
	text-transform: uppercase;
	margin-bottom: 42pt;
}



.all-columns{
	-webkit-column-span: all;
	column-span: all;
	
}

hr{
	border: 0;
	border-bottom: 8px solid var(--dark-blue);
	border-top: 3px solid var(--accent-color);
	margin: 0;	
	
	-webkit-column-span: all;
	column-span: all;
}

.faded{
	background: #bbb;
	height:3px; 
	display:block;
	margin:auto;
	margin-bottom:32pt;	
}

footer{
	font-size: 12pt;
}

section img{
	
}


figure{	
	margin: 0;
}
figcaption{
	font-style: italic;
	font-size: 8pt;
	text-align: center;	
	text-transform: uppercase;
	font-family: brothers, serif;	
	color: var(--accent-color);
	background: var(--dark-blue);	
	padding: 6pt 12pt 6pt 12pt;
}

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




footer{
	padding: 20pt;	
	background: var(--dark-blue);
	color: var(--light-yellow);
}

footer a, footer a:visited, footer a:hover{
	color: #fff !important;
}

footer img{
	width: 105px;
}


.toc-link{
	position:absolute;
	top:-16pt;
	right:16pt;
	font-size:12pt;	
}
.story .p{
	color:#222;
	/*max-width:600px;*/
	margin: 0;
	margin-top:20pt;
	padding: 0 0em 0 0em;
	font-size: 12pt;
	font-family:"Alice", serif;
}



.p .all-columns{
	margin:32pt;

}

@media (max-width: 360px){	
	.p{
		min-width: 0;
		width: 100%;	
	}
	aside,section{
		padding: 3px;
	}
	footer{
		font-size: 6pt;
		overflow-x: scroll;
	}
}

@media (min-width: 600px){	
	section{
		-webkit-columns: 2 200px;
		-moz-columns: 2 200px;
		columns: 2 200px;
		-webkit-column-gap: 2em;
		-moz-column-gap: 2em;
		column-gap: 2em;
		-webkit-column-rule: 1px dotted #ddd;
		-moz-column-rule: 1px dotted #ddd;
		column-rule: 1px dotted #ddd;	
		margin-top:16pt;
		margin-bottom:16pt;
	}
	
	blockquote{
		width: unset;
		
	}
	.story .p{
		font-size:16pt;
	}
	article .p {
		margin-top:16pt;
		
	}
	figure{
		break-inside: avoid-column;
	}
	
	li .rule{
			margin-top:5pt;	
	}
	nav{
		font-size: 20pt;
	}
}

@media (min-width: 1800px) {
	.body-container{
		max-width: 1800px;
		font-size: 18pt;
		margin: auto;
	
	}
	blockquote{
		margin-right: 18pt;
	
	}
	aside header{
		font-size: 80pt;
	}
	section,article,.p{
		font-size: 16pt;
	}
	
	figcaption{
		font-size: 12pt;
	}
	aside .p{
		font-size: 28pt;
		font-family: brothers, serif;
	}

}

@media (min-width: 1200px)and (max-width: 1799px){
	.body-container{
		max-width: 1200px;
		font-size: 22pt;
		margin: auto;	
	}
	blockquote{
		margin-right: 18pt;	
	}	
}