* {
	box-sizing: border-box;
}
/* Colors  */

:root {
  	--red: #9a0000;
	--yellow: #ffcc00;
	--lightyellow: #ECDB8D;
	--blue: #343BBF; 
	--darkblue0: #0A0C26;
	--darkblue1: #111440;
	--darkblue2: #181B59;
	--darkblue3: #262B8C;
	--bluegreen: #006969; /*rgb(0,105,105), hsl(180,100%,20.6%), cmyk(100,0,0,59) */
	--darkbrown: #332c21; /*cmyk(0%, 13%, 35%, 80%)*/
	--brown: #4f4433; /*cmyk(0%, 14%, 35%, 69%) */
	--black: #000000;
	--warmblack: #191918;/*panatone "Black 6 C" rgb(25,25,24), hsl(60,2%,9.6%), cmyk(0,0,4,90)*/
	/*--warmblack: #1A1A19; rgb(26,26,25),hsl(60,2%,10%),cmyk(0,0,4,90) */
	--gray: #484848; /*cmyk(0%, 0%, 0%, 71.5%)*/
	--lightgray: #888888;
	--warmgray: #4b4b44; /*cmyk(0%, 0%, 9%, 72%)*/
	--warmlightgray: #656560;
	--white: #ffffff;
	--warmwhiteold: #fcfbe3; /* rgb(252,251,227),hsl(57.6,80.6%,93.9%),cmyk(0,0,10,1)*/
	--warmwhite: #fefef5;
	--warmlightwhite:#fdfdf3; /* panatone sort of "P 1-9 C"rgb(253,253,243),hsl(60,71.4%,97.3%),cmyk(0,0,4,1) ::: actually cmyk(0,0,3.4,0.6)*/
	--warmwhiteveil: rgba(253,253,243,0.8);
	--veilwarmwhite: rgba(252, 251, 227, 0.8);
	--veilwarmblack: rgba(25, 25, 24, 0.4);
	--richblack: #010203;
	--richgray1: #2a2a2b;
	--richgray2: #4f4f50;
	--richgray3: #777878;
	--richgray4: #a2a3a3;
	--richgray5: #d0d0d0;

	--monospace_code: Courier, 'Andale Mono', AndaleMono, Monaco, monospace;
	--monospace: 'Lucida Console', 'Andale Mono', AndaleMono, Monaco, Courier, monospace;
	--monospace_zeroslash: Monaco, 'Andale Mono', AndaleMono, Courier, monospace;
	--monospace_zerodot: 'Andale Mono', AndaleMono, Monaco, Courier, monospace;
	--typewriter: 'American Typewriter', Didot, 'Times New Roman', serif;
	--sans: Helvetica, Verdana, Arial, Tahoma, 'Trebuchet MS', sans-serif;
	--serif: Georgia, Didot, 'Times New Roman', Times, serif;
	--cursive: 'Bradley Hand', 'Comic Sans MS', cursive, sans-serif;
	--dragons: Luminari, 'Bradley Hand', cursive, sans-serif;
	--oldbook: 'Palatino Linotype', 'Book Antiqua', Palatino, 'American Typewriter', 'Times New Roman', serif;
	--maxcontentwidth: 800px;
}

:root {
	/* type scale from 
	 * https://www.rawkblog.com/2018/05/modular-scale-typography-with-css-variables-and-sass/ 
	 * */
	--font-size: 100%; 

	--h5: 1.2rem;
	--h4: 1.4rem;
	--h3: 1.8rem;
	--h2: 2.0rem;
	--h1: 2.6rem;

}
/*https://fluid.style/type?min=2.25&max=4.5&min-bp=20&max-bp=77.5&unit=%22rem%22*/
/* Web Safe Font Stacks (classes set in CSS) */
.head {font-family: Georgia,'Times New Roman',serif}
.para {font-family: Verdana,Arial,sans-serif}
.mono {font-family:'Courier New',Courier,monospace}
.fant {font-family: Papyrus,Impact,fantasy}
.curs {font-family:'Apple Chancery','Lucida Calligraphy',cursive}
a {
	color: var(--darkblue3);
	font-weight: bold;
	/*text-transform: uppercase;*/
}
a:hover {
	text-decoration: underline;
	color: var(--yellow);
	fill: var(--yellow);
	font-weight: bolder;
}
body {
	margin:0;
	padding:0;
}
body header, body footer {
	display: flex;
	align-items: center;
	justify-content: space-around;
	justify-content: left; /*space-around*/
	flex-wrap: wrap;
	gap: 0px;
	width:100%;
	min-width:100%;
	padding: 6px;
	padding-top: 8px;
	background-color: var(--warmblack);
	background-color: var(--darkblue1);
	color: var(--warmwhite);
}
body footer svg.socialicon {
	max-width: 40px;
	align-content: center;
	fill: var(--white);
}
body footer svg.bsky {
	fill: #1185FE;
}
body footer a:hover svg.socialicon {
	fill: var(--yellow);
}
body header > div {
	margin:6px;
	margin-left:9px;
	flex:4;
	/*margin-right: auto;*/
}
body  footer > div {
	margin:6px;
	margin-left: 4%;
	margin-right: 4%;
	flex:1;
	/*margin-right: auto;*/
}
body  header > .logo {
	margin: 1rem;
	width: 14%;
	padding:4px;
	align-content: center;
	max-width:160px;
	min-width:80px;
	flex:1;
}
body  header > .logo a, body  footer > .logo a {
	display: inline-block;
	width: 100%;
	max-width:100%;
}
body  header > h1, body  footer > div, body  footer a {
	color: var(--warmwhite);
}
nav {
	display: block;
	margin: 0 auto;
	margin: 0;
	padding: 1em;
}
.nav-list {
	font-family: var(--sans);
	font-family: var(--monospace);
	font-size: 1.1rem;
	font-weight: 550;
	margin-top: 0.6rem;
	list-style-type: none;
	padding-top: 0.5rem;
	padding-bottom: 0rem;
	padding-left: 1px;
	padding-right: 1px;
	/*text-transform: uppercase;*/
}

footer {
	font-family: var(--sans);
	font-size: 0.9rem;
	font-weight: 550;
}
nav > ul {
	display: flex; 
	justify-content: space-between;
	align-items: left;
	margin: 0;
}
/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 940px) {
	nav {
		margin-left: 0;
		padding-left: 0;
	}
	nav > ul {
		flex-direction: column;
		align-items: left;
		text-align: left;
	}
}
nav > ul > li {
	/* text-transform: lowercase;*/
	display: inline-block;
	font-weight:bold;
	list-style: none;
	padding: 0 0em;
	margin: 0.3em 1em 0.3em 2em;
	border-bottom: 2px solid var(--warmblack);
}
nav > ul > li > a {
	color: var(--warmwhite);
	text-decoration: none;
	font-weight:bold;
	line-height: 1.2rem;
}
nav > ul > li.active {
	color: var(--white);
	border-bottom: 3px solid var(--yellow);
}
body {
	font-family: Georgia, serif;
	font-family: "Domine", serif;
	font-family: var(--sans);
	background-color: var(--warmblack);
	background-color: var(--warmwhite);
	margin: 0 auto;
	font-size: 1.1rem;
	line-height: 160%;
}
main {
	margin:auto;
	margin: 0 auto;
	padding: 2em;
	width:94%;
	max-width: 800px;
	max-width: var(--maxcontentwidth);
	background-color: var(--warmwhite);
	color: var(--black);
}
/*
@media (max-width:900px) {
main {
margin: 0 auto;
padding: 1em;
width:98%;
background-color: var(--warmwhite);
color: var(--black);
}
}
 */
	.textcontent {
		max-width: 60ch;
	}
	picture, img {
		vertical-align:middle;
		width: 100%;
		max-width: 100%;
		margin: auto;
	}
	figcaption {
		margin: auto 2px;
		padding:1em;
		padding-left:0;
		color:var(--gray);
		font-size: 0.8em;
	}
	figure {
		display:block;
		width: 100%;
		max-width: 800px;
		/*margin: 2em auto;*/
		margin: 0;
		margin-bottom: 2em;
		text-align: center;
		text-align: left;
	}
	@media (max-width:800px) {
		figure: {
			margin: 0;
			width: 100%;
			min-width: 100%;
		}
	}
	.flex-container {
		display: flex;
		flex-direction: row;
		flex-wrap: no-wrap;
		align-items: center;
		justify-content: space-between;
	}
	.subtext {
		font-style:italic;
	}
	h1 {
		font-family: var(--monospace);
		font-size: 3rem;
		font-size: var(--h1);
		font-size: clamp(1.8rem, 1.243rem + 2.783vw, 3.4rem);
		line-height: 145%;
		font-weight: 800;
		text-align: left;
		color: var(--black);
	}
	h2 {
		font-family: var(--monospace);
		font-size: 2.6rem;
		font-size: var(--h2);
		font-size: clamp(1.2rem, 0.783rem + 2.087vw, 2.4rem);
		font-size: clamp(1.2rem, 0.643rem + 2.783vw, 2.8rem);
		line-height: 125%;
		font-weight: 750;
		color: var(--darkblue1);
	}
	h3 {
		font-family: var(--typewriter);
		font-family: var(--monospace);
		font-family: var(--sans);
		font-size: 1.3rem;
		font-size: var(--h3);
		font-size: clamp(1.2rem, 0.922rem + 1.391vw, 2rem);
		font-weight: 500;
		color: var(--darkbrown);
	}
	h4 {
		font-family: var(--monospace);
		font-size: 1.2rem;
		font-size: var(--h4);
		font-weight: 600;
		color: var(--darkblue0);
	}
	li {
		margin-bottom: 1em;
	}
	.address {
		padding:1em;
		border-left: 2px solid var(--yellow);
	}
	.line-above {
		border-top: 1px solid #cbcfd9;
		padding-top: 2rem;
	}
	p {
		max-width: var(--maxcontentwidth);
		margin-bottom: 1.5em;
	}
	strong, em {
		font-weight: bold;
	}
	.small {
		font-size: .8em;
	}
	.large {
		font-size: 1.2em;
	}
	i {
		font-style: italic;
	}
	.left {
		text-align: left;
	}
	.right {
		text-align: right;
	}
	.center {
		text-align: center;
	}
	.indent {
		margin-left: 2rem;
	}
	.letterspacing-extra {
		letter-spacing: 0.2ch;
	}
	blockquote {
		background-color:var(--white);
		margin: 1em 0;
		padding:2em;
	}
	.insertbox {
		background-color:var(--white);
		margin: 1em 0;
		padding:2em;
	}
	@media (max-width:800px) {
		.insertbox {
			margin: 1em 0;
			padding: 1em;
		}
	}
	.ul-list-style-none {
		list-style: none;
	}
	ul li {
		margin-left: 0;
	}
	dl > dt {
		margin: 1em 0 0.5em 0;
	}

	dl.condensed {
		display: flex;
		align-items: baseline;
		flex-direction: row;
		flex-wrap: wrap;
		width:100%;
		/*max-width: 800px;*/
	}
	dl.condensed  * {
		padding-top: 0.15em;
		margin: 0;
	}
	dl.condensed  dt {
		width:20%;
		font-weight: bold;
		font-weight: 600;
		text-align:right;
	}
	dl.condensed  dd {
		width:80%;
		padding-left:1em;
		margin-left: 0px;
	}
	@media (max-width: 640px) {
		dl.condensed {
			flex-direction: column;
			margin:0;
			margin-block-start: 0em;
		}
		dl.condensed  dt {
			width:80%;
			text-align:left;
		}
		dl.condensed  dd {
			width:80%;
			padding-left:1em;
			margin-left: 0px;
		}
	}
	.btn a {
		color: var(--warmwhite);
	}
	.btn {
		font-family: var(--sans);
		font-family: var(--monospace);
		padding: 0.4em;
		margin: 0.4em;
		font-size: 1rem;
		/* text-transform: uppercase; */
		font-weight: 800;
		background-color: var(--darkblue2);
		color: var(--warmwhite);
		letter-spacing: 2.67px;
		cursor: pointer;
		display: inline-block;
		/* padding: 1rem 3rem; */
		padding: 16px 20px;
		/* margin-top: 1em; */
		/*border: 1px solid var(--blue);*/
		text-decoration: none;
		margin: 1em;
		margin-left: 0em;
	}
	.btn:hover,
	.btn:focus {
		color: var(--white);
		background-color: var(--red);
		text-decoration: none;
	}
	hr {
		color: var(--darkbrown);
	}
