:root {
--primary-color: rgb(255, 255, 255);
--primary-bg-color: rgba(0, 0, 0, .5);
--secondary-color: rgb(255, 213, 142);
}
/*
START Reset
- - - - - - - - - - - - - - - - - - - - - - -
*/

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    scroll-behavior: smooth;
    }
*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
    padding: 0;
    margin: 0;
     }
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b, u, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, section, summary,
time, mark, audio, video, main {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    vertical-align: baseline;
    box-sizing: border-box;
    }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
    }
body {
    line-height: 1;
    font-size: 1.2rem;
    }
ol, ul {
    list-style: none;
    }
blockquote, q {
    quotes: none;
    }
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
    }
table {
    border-collapse: collapse;
    border-spacing: 0;
    }
p, li, pre {
    line-height: 1.3em;
    }
p, ul, ol, dl {
	margin: 1.7rem 0;
}

main li {
    margin-bottom: .25rem;
    }
/*
- - - - - - - - - - - - - - - - - - - - - - -	
END Reset
- - - - - - - - - - - - - - - - - - - - - - -   
START Overall Template Layout
- - - - - - - - - - - - - - - - - - - - - - - 
*/
body {
	line-height: 1.3;
	font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
.nbr {
	white-space: nowrap;
}
footer {
	color: #fff;
	background-color: rgba(0, 0, 0, .5);
	padding: 1rem .5rem 1rem .5rem;
	width: 100%;
	text-align: center;
	margin-top: 6rem;
}
#main-nav, #main-nav ul {
	display: inline;
	font-size: 110%;
}
#main-nav li, p.copyright {
	display: inline-block;
	margin: 1rem 2rem 1rem 2rem;
	white-space: nowrap;
}
#masthead {
	position: absolute;
	color: #fff;
	font-size: 200%;
	width: 300px;
	top: 2rem;
	left: 6rem;
	padding: 1rem;
	background-color: rgba(0, 0, 0, .5);
}
#masthead h1.sitename,
#masthead p.sitename
 {
	font-size: 200%;
	line-height: 1;
	font-weight:normal;
	margin: 0;
}
#masthead p.sitename a {
	text-decoration: none;
	color: #fff;
}
#pager {
	position: sticky;
	top: 47vh;
	border: 1px solid rgba(0, 0, 0, 0);
}
#pager a {
	color: #fff;
	position: absolute;
	display:inline-block;
	background-color: rgba(0, 0, 0, .5);
	font-weight: bold;
	text-decoration: none;
	font-size: 200%;
	/* margin-top: -30%; */
}
#masthead p.sitename a:hover, 
#pager a:hover {
	text-decoration: underline;
}
#last { 
	top: 0; 
	left: 0;
	padding: .6rem 1.5rem;
	border-top-right-radius: .5rem;
	border-bottom-right-radius: .5rem;
}
#next { 
	top: 0; 
	right: 0;
	padding: .6rem 1.5rem;
	border-top-left-radius: .5rem;
	border-bottom-left-radius: .5rem;
}

a {
	color: var(--secondary-color);
}
#content {
	color: #fff;
	background-color: rgba(0, 0, 0, .5);
	width: calc(100% - 2rem);
	margin: calc(100vh - 100px) auto 2rem;
	max-width: 800px;
	padding: 1rem 2rem;
	font-size: 140%;
}
#content h2,
#content h1  {
	margin-bottom: 1.24rem;
	font-size: 175%;
}

@media (max-width: 830px) {
	#masthead {
		width: calc(100% - 2rem);
		top: 1rem;
		left: 1rem;
		padding: 0 1rem;
	}
	#masthead h1.sitename,
	#masthead p.sitename
	 {
		font-size: 170%;
		margin: 0 0;
	}
	#content h2,
	#content h1  {
		font-size: 155%;
	}
}
@media (max-width: 500px) {
	#masthead h1.sitename,
	#masthead p.sitename
	 {
		font-size: 150%;
	}
	#content h2,
	#content h1  {
		font-size: 140%;
	}
}
@media (max-width: 400px) or (max-height: 570px) {
	#masthead {
		width: calc(100% - 2rem);
		top: 1rem;
	}
	#masthead h1.sitename,
	#masthead p.sitename
	 {
		font-size: 130%;
	}
}
dl {
	margin: 1.7rem 0;
}
dt {
	display: inline-block;
	clear:left;
}
dt:after {
	content:":";
}
dd {
	display: inline;
	font-style: italic;
}
dl div {
	display: block;
	margin-bottom: .65rem;
}
/*
dd:first-of-type {
	display: inline;
}
*/
#content figure img {
	width: 100%;
	border: 2px solid rgba(255,255,255,6);
}
#content figure.half img {
	max-width: 300px;
}
figure.source {
	margin-top: 4rem;
	padding: 4rem 0;
	border-top: 1px dashed var(--secondary-color);
}
figure.source img {
	margin-top: .5rem;
}
.source figcaption {
	font-size: 85%;
}
form {
	margin: 2rem 0;
	font-family: inherit;
}
input, textarea, select, button, pre {
	font-family: inherit;
	font-size: inherit;
	padding: .25rem .5rem;
}
fieldset {
	margin-bottom: 2rem;
}
label {
	font-size: 120%;
	color: rgb(255, 213, 142);
}
input {
	font-size: 120%;
}
input[type="text"],
input[type="email"],
textarea {
	display: block;
	width: 100%;
	max-width: 500px;
	background-color: #eee;
	margin-bottom: 1rem;
}
input[type="submit"] {
	background-color: rgb(255, 213, 142);
	color: #333;
	padding: .25rem 1rem;
	font-weight: bold;
	border-radius: 1rem;
}
input:user-invalid,
textarea:user-invalid {
	border: 2px dashed red;
}
.msg-sent p {
	background-color: var(--primary-color);
	color: #333;
	padding: .75rem;
	font-size: 85%;
}
.listing footer {
	margin-top: 0;
	background-color: rgba(0, 0, 0, .75);
}
.listing #masthead {
	position: relative;
	font-size: 200%;
	width: 100%;
	top: 0rem;
	left: 0rem;
	text-align: center;
}
.listing #pager,
.listing #focus
 {
	display: none;
}
.listing #content {
	width: unset;
	margin: 0;
	max-width: unset;
	padding: .5rem 0;
	font-size: 140%;
	text-align: center;
}
ul.listing {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}
ul.listing li, 
ul.listing figure  {
	margin:0;
	padding:0;
	line-height: 0;
	width: 250px;
	list-style: none;
}
.listing #content P {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
@media (max-width: 830px) {
	.listing #masthead {
		width: 100%;
		top: 0rem;
		left: 0rem;
		padding: .5rem;
	}
}
@media (max-width: 415px) {
	ul.listing {
		display: grid;
		grid-template-columns: 1fr;
	} 
	ul.listing li {
		width: 100%;
	} 
	ul.listing figure  {
		width:100%;
		padding: 0 1rem;
	}
}
@media (max-width: 400px) or (max-height: 570px) {

}

#content a.external:after {
	content: '\2197';
	font-family: monospace;
}
.verse {
	margin-left: 1.5rem;
	font-style: italic;
}
#content ul {
	list-style: disc;
	margin-left: 2rem;
}
main {
	padding: 2rem;
}
#site {
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	position: fixed;
	z-index: -1;
}
#site img,
#site video {
	object-fit: cover;
	object-position: right; 
	width: 100vw;
	height: 100vh;
}
article #content {
	color: #fff;
	background-color: rgba(0, 0, 0, .5);
	width: calc(100% - 2rem);
	margin: calc(100vh - 100px) auto 2rem;
	max-width: 800px;
	padding: 1rem 2rem;
	font-size: 140%;
}