@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;
}
	
table {
	border-collapse: collapse;
	border-spacing: 0;
}
*, *::before, *::after {
    box-sizing: border-box;
	}

/* 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 */

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;
	max-width: 75rem;
	overflow-wrap: break-word;
	margin: 0 auto 1rem auto;
	}
main, footer {
	display: flex;
	position: relative;
	max-width: 75rem;
	margin: 0 auto 1rem auto;
	}
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);
	}
article, .module {margin-bottom: 1rem;
	}
abbr, acronym {
	text-decoration: none;
	border-bottom: thin dashed var(--color-main);
	}
mark.realistic {
  	background: linear-gradient(104deg, rgba(255, 255, 0, 0) 0.9%, rgba(255, 255, 0, 1) 2.4%, 
	rgba(255, 255, 0, 0.5) 5.8%, rgba(255, 255, 0, 0.1) 93%, rgba(255, 255, 0, 0.7) 96%, 
	rgba(255, 255, 0, 0) 98%);
  	padding: 0.2em 0.5em;
  	border-radius: 5px;
 	 /* Adds a subtle "glow" to mimic ink saturation */
  	text-shadow: 0 0 5px rgba(255, 255, 0, 0.5);
	}
	
.responsive {
	display: block;
	max-width: 100%;
	height: auto;
	object-fit: contain;
	}
.skip-link {
	position: absolute;
	left: -500rem;
	z-index: 999;
	}
.skip-link:focus {
	left: 1rem;
	top: 1rem;
	background: var(--color-light);
	padding: 0.5rem 1rem;
	border: 2px solid var(--color-accent);
	}
.dropshadow {
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
	}
.ghost {
	opacity: 0.5;
	}
.shelf {
	display: flex;
	flex-flow: row nowrap;
	gap: 1rem;
	justify-content: space-between;
	}
.item3 {
	flex: 1;
	}
.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;
	}
.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;
	}

#display h2 {
	display:none;
	}
	
/* Small from 0 to 400px */
	@media (max-width: 400px) {
		header, nav, section {
			width: 95vw;
			}
		main, footer {
			width: 95vw;
			flex-direction: column;
			gap: 1rem;
			}
		nav a {
			display: block;
			width: fit-content;
			margin: 0 0.5rem 1.5rem 0.5rem;
			font-size: 1.25rem;
			font-weight: 550;
			line-height: 1;
			text-transform: uppercase;
			}
		
		.container1,  .container2 {
        	width: 95vw
			}
		.wall {
			display: flex;
			margin-bottom: 1rem;
			flex-direction: column;
			flex-wrap: nowrap;
			gap: 0.5rem;
			justify-content: flex-start;
			}
		.item1 {
			order: 1;
			flex: 1 1 min-content;
			margin-bottom: 0.25rem;
			}
		.walltag {
			order: 2;
			flex: 1 1 min-content;
			}
		#logo {
			display: block;
			width: 95vw;
			}			
		#display {
			display: block;
			overflow: hidden;
			width: 95vw;
			height: 95vw;
			background-color: var(--color-offset);
			}
		#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: 1vw solid var(--color-dark);
			border-radius: 6rem;
			margin: auto 1rem auto 0rem;
			}
		}

/* Medium from 401 to 800px */
	@media (min-width: 401px) {
		header, nav, section {
			width: 90vw;
			}
		main, footer {
			width: 90vw;
			flex-direction: column;
			gap: 1rem;
			}
		nav	{
			text-align: center;
			}
		nav a {
			display: inline-block;
			margin: 0 0.5rem 1rem 0.5rem;
			font-size: 1.5rem;
			line-height: 1;
			text-transform: uppercase;
			}
		.container1,  .container2 {
        	width: 90vw
			}
		.wall {
			margin-bottom: 1rem;
			}
		.item1 {
			margin-bottom: 0.25rem;
			}

		#logo {
			display: block;
			width: 25rem;
			margin: 0.25rem auto 1rem auto;
			}
		#display {
			display: block;
			overflow: hidden;
			height: 25rem;
			background-color: var(--color-offset);
			}
		#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: 6rem;
			height: 6rem;
			border: 4px solid var(--color-dark);
			border-radius: 6rem;
			margin: auto 1rem auto 0rem;
			}
		}

/* Large from 801 to 1200px */
	@media (min-width: 801px) {
    	main, footer {
       			flex-direction: row;
        		gap: 1.5rem;
        		align-items: flex-start;
    			}
		.container1 {
			flex: 4;
			}
		.container2 {
			flex: 1;
			}
		.wall {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			gap: 1.5rem;
			margin-bottom: 1rem;
			}
		.item1 {
			order: 1;
			flex: 0 1 40%;
			min-width: 0;
			}
		.walltag {
			order: 2;
			flex: 1;
			min-width: 0;
			}
		.badge {
			margin: 0.25rem auto 1rem auto;
			}

		#webid {
			flex-flow: column nowrap;
			justify-content: space-between;
			align-items: center;
			}
		#webid p {
			color: var(--color-dark);
			font-weight: 700;
			text-transform: uppercase;
			line-height: 1.5;
			text-align: center;
			}
		#avatar {
			margin: 0 auto 8px auto;
			}
		}