@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

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, sub, sup, tt, var,
b, u, i, center,
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, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.75; /* altered from 1.0 */
}
ol, ul {
	list-style: none;
}
/* Quotes Altered from the orgional Meyer's */
q  {quotes: auto;
	}
q.christ {color: var(--color-rubric);
	}
blockquote, cite.quote {
	quotes: "“" "”";
	}
blockquote, cite.quote::before {
	content: open-quote;
	}
blockquote, cite.quote::after {
  content: close-quote;
	}
	
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Color Palette */
:root {
	--color-main:	DimGray;
	--color-light:	White;
	--color-dark:	Black;
	--color-accent:	MidnightBlue;
	--color-rubric: FireBrick;
	--color-offset:	#f2f2f2;
	}

/* Ed Style */
/* by Ed Tillman, for edtillman.net updated: May 2026 */
/* Mobile 1px to 400px */

body {
	color: var(--color-main);
	background-color: var(--color-light);
	font-family: 'Montserrat', Varela, Verdana, system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 450;
	font-variant-ligatures: common-ligatures;
	font-optical-sizing: auto;
	font-synthesis: none;
	font-feature-settings: "liga" on, "dlig" on;
	text-rendering: optimizeLegibility;

	}
header, nav, section {
	display: block;
	position: relative;
	width: 95%;
	max-width: 75rem;
	margin: 0 auto 1rem auto;
	}
main, footer {
	display: flex;
	position: relative;
	width: 95%;
	max-width: 75rem;
	margin: 0 auto 1rem auto;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	}
footer {
	border-top: 2px solid var(--color-accent);
	padding-top: 0.5rem;
	}
h1, h2, h3, h4 {
	font-weight: 500;
	text-transform: uppercase;
	line-height: 1.25;
	}
h1 {	font-size: 1.75rem;
	}
h2 {	font-size: 1.5rem;
	}
h3 {	font-size: 1.25rem;
	}
h4 {	font-size: 1rem;
	letter-spacing: 0.1rem;
	}
p, ul	{
	margin-top: 0;
	margin-bottom: 0.2rem;
	}
i, em, .italic	{font-style: italic;
	}
b, strong {font-weight: 550;
	}
a:link, a:visited {
	color: var(--color-dark);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color 0.2s ease;
	}
a:hover, a:focus {
	color: var(--color-accent);
	text-decoration: none;
	border-bottom: 2px solid var(--color-accent);
	}
nav a {
	display: block;
	width: fit-content;
	margin-bottom: 1.5rem;
	font-size: 1.25rem;
	font-weight: 550;
	line-height: 1;
	text-transform: uppercase;
	}
article, .module {margin-bottom: 1rem;
	}
abbr, acronym {
	text-decoration: none;
	border-bottom: thin dashed var(--color-main);
	}

.responsive {max-width: 100%;
	height: auto;
	align-self: start;
	}
.skip-link {
	position: absolute;
	left: -500rem;}
.skip-link:focus {
	left: 1rem;
	top: 1rem;
	background: var(--color-light);
	padding: 0.5rem 1rem;
	border: 2px solid var(--color-accent);}
.container1 {order: 1;
	flex: 1;
	margin-bottom: 1rem;
	}
.container2 {order: 2;
	flex: 1;
	}
.stickybanner-lr {
  	width: 100%;
  	height: 100%;
 	object-fit: cover;
	object-position: center left;
	}
.stickybanner-ctr {
 	 width: 100%;
  	height: 100%;
  	object-fit: cover;
  	object-position: center center;
	}
.stickybanner-rl {
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
  	object-position: center right;
	}
.wall {
	display: flex;
	margin-bottom: 1rem;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	}
.item1 {
	order: 1;
	flex: 1;
	margin-bottom: 0.5rem;
	}
.walltag {
	order: 2;
	flex: 2;
	}
.fine-print {
	font-size: 0.75rem;
	}
.prop-name, .title {
	white-space: nowrap;
	}
.badge {
	display: block;
	width: 5rem;
	margin: 0.5rem auto 1rem 0;
	}
.mycredit {
	font-size: .95rem;
	font-weight: 650;
	text-transform: uppercase;
	}
.framed {
	display: block;
	box-sizing: border-box;
	border: 0.25rem solid var(--color-dark);
	background-color: var(--color-light);
	padding: 0.55rem;
	}
.dropshadow {
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
	}
.ghost {
	opacity: 0.5;
	}
#logo {
	display: block;
	width: 95%;
	}
#display {
	display: block;
	width: clamp(4.5rem, 90vw, 25rem);
	height: clamp(4.5rem, 90vw, 25rem);
	overflow: hidden;
	}
#display h2 {
	display:none;
	}
#webid {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	}
#webid p {
	color: var(--color-dark);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.5;
	}
#avatar {
	width: clamp(2rem, 16%, 6rem);
	height: clamp(2rem, 16%, 6rem);
	border: 4px solid var(--color-dark);
	border-radius: 6rem;
	margin: auto 1rem auto 0rem;
	}
	
/* Tablet from 401 to 800 px */
@media screen and (min-width: 401px) {
header, section, nav {
	width: 90vw;
	}
main, footer {
	width: 90vw;
	}
nav	{text-align: center;}
nav a	{display: inline-block;
	width: fit-content;
	margin-right:0.5rem;
	margin-left:0.5rem;
	margin-bottom: 1.0rem;
	font-size: 1.25rem;
	font-weight: 550;
	text-transform: uppercase;
	}

#logo {
	display: block;
	width: 25rem;
	margin: 0.25rem auto 1rem auto;
	}
#display {
	display: block;
	width: 90vw;
	height: clamp(4.5rem, 90vw, 25rem);
	overflow: hidden;
	}
#avatar {
	width: 6rem;
	height: 6rem;
	border: 4px solid var(--color-dark);
	border-radius: 6rem;
	margin: auto 1rem auto 0rem;
	}
}

/* Desktop from 801 to Max 1200 px */
@media screen and (min-width: 801px) {
header, section, nav {
	display: block;
	position: relative;
	width: 88vw;
	max-width: 75rem;
	margin: 0 auto 1.5rem auto;
	}
main, footer {
	width: 88vw;
	flex-direction: row;
	justify-content: space-between;
	gap: 2rem;
	}

.container1 {order: 1;
	flex: 4;
	}
.container2 {order: 2;
	flex: 1;
	}
.wall {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem
	}
.item1 {
	flex: 1;
	}
.walltag {
	flex: 2;
	}
.badge {
	margin: 0.25rem auto 1rem auto;
	}

#webid {
	flex-flow: column nowrap;
	justify-content: space-between;
	align-items: center;
	}
#webid p {
	text-align: center;
	}
#avatar {
	margin: 0 auto 8px auto;
	}
#display {
	display: block;
	width: 88vw;
	height: clamp(4.5rem, 90vw, 25rem);
	overflow: hidden;
	}
}