/* redurl.css */
:root {
	--rred: #990000;
	--ggray: #eeeeee;
	--llite: #ffffff;
	--ddark: #000000;
	--mmed: #777777;
	scrollbar-color: var(--rred) var(--llite);
}
*	{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	white-space: collapse;
}
body {
	margin: 0;
	padding: 0;
	font-family: "Atkinson Hyperlegible Next", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}
body > header {
	position: relative;
	height: 80px;
	width: auto;
	margin: 8px 0; 
	padding: 0;
	background-color: var(--rred);
	overflow: hidden;
}
	header img {
		position: relative;
			top: 0;
			left: 0;
		width: 184px; 
		height: 80px;
		margin: 0; 
		padding: 0;
		border: none;
	}
	header a:hover img {
		/* don't ask how this works but it does */
		filter: sepia(1) hue-rotate(90deg) saturate(10) contrast(4) invert(1) brightness(1.15);
		/* filter: contrast(0.85) works for gray background effect */
	}
	header > .headline {
		position: absolute;
			bottom: 6px;
			left: 192px;
		margin: 0;
		padding: 0;
		font-family: "Atkinson Hyperlegible Mono", monospace;
		font-optical-sizing: auto;
		font-weight: 800;
		font-style: normal;
		font-size: 12.67px; /* not sure why this works but it does */
		line-height: 1; /* 0.6 to align baseline with bottom 0 */
		text-transform: uppercase;
		letter-spacing: 0;
		color: var(--llite);
	}
body > main {
	display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start
		align-items: stretch;
		align-content: flex-start;
		gap: 8px;
	padding-bottom: 52px;
}
	main > nav {
		flex: 0 0 auto;
		width: 176px;
		height: auto;
		padding: 0 8px;
	}
		nav > ul {
			list-style: none;
			display: block;
			margin: 0;
			padding: 0;
			font-family: "Atkinson Hyperlegible Mono", monospace;
			font-optical-sizing: auto;
			font-weight: 600;
			font-style: normal;
			font-size: 12px;
			line-height: 1;
		}
		nav > ul > li {
			margin-bottom: 8px;
		}
		nav > ul#iconnav > li {
			display: inline-block;
		}
		nav > ul > li > a {
			display: inline-block;
			height: 24px;
			margin: 0;
			text-decoration: none;
			text-align: center;
			text-transform: uppercase;
			letter-spacing: 0;
			border-width: 2px;
			border-style: solid;
		} 
		nav > ul > li > a:link, 
		nav > ul > li > a:visited {
			background-color: var(--rred);
			color: var(--llite);
			border-color: var(--rred);
		}
		#linknav > li > a {
			width: 88px;
			padding: 5px;
		}
		#iconnav > li > a {
			width: 24px;
			padding: 2px;
		}
		#iconnav > li > a > span {
			font-size: 16px;
		}
		#arc_page a#arc_nav, 
		#inq_page a#inq_nav, 
		#con_page a#con_nav, 
		#acc_page a#acc_nav, 
		#pri_page a#pri_nav, 
		#tac_page a#tac_nav {
			background-color: var(--ggray);
			color: var(--rred);
			border-color: var(--llite);
		}
		#arc_page a#arc_nav:hover, 
		#inq_page a#inq_nav:hover, 
		#con_page a#con_nav:hover, 
		#acc_page a#acc_nav:hover, 
		#pri_page a#pri_nav:hover, 
		#tac_page a#tac_nav:hover, 
		nav > ul > li > a:hover {
			background-color: var(--ggray);
			color: var(--rred);
			border-color: var(--rred);
		}
		nav > ul > li > a:active {
			background-color: var(--llite);
			color: var(--rred);
			border-style: dashed;
			border-color: var(--rred);
		}
	main > article {
		flex: 1 1 auto;
		margin: 0;
		padding: 0;
		line-height: 1.5;
	}
		article > h1 {
			color: var(--llite);
			background-color: var(--rred);
			margin: 0 0 8px 0;
			padding: 4px 8px;
			text-transform: uppercase;
			letter-spacing: 0.25em;
		}
		article h2 {
			color: var(--rred);
			text-transform: uppercase;
			letter-spacing: 0.1em;
			padding: 0;
		}
		article h3 {
			color: var(--rred);
			margin-top: 8px;
		}
		article h4 {
			color: var(--ddark);
			margin-top: 8px;
		}
		article p {
			padding-bottom: 8px;
		}
		article > ul {
			color: var(--rred);
			list-style-type: none;
		}
		article > ul li {
			color: var(--rred);
			border-left: 8px solid var(--rred);
			padding-left: 8px;
			margin-bottom: 8px;
		}
		article > ol {
			list-style: none;
			counter-reset: qnum;
		}
		article > ol li {
			margin-top: 4px;
			counter-increment: qnum;
		}
		article > ol li::before {
			content: "Q" counter(qnum) ":";
			color: var(--rred);
			margin-right: 8px;
			font-weight: 800;
		}
		article > section {
			margin-top: 24px;
			border-top: 8px solid var(--rred);
		}
		article dl {
			margin: -8px 4px 8px 0;
		}
		article dt {
			border-width: 4px 0 0 2px;
			border-style: solid;
			border-color: var(--rred);
			font-weight: 600;
			color: var(--rred);
			margin-top: 12px;
			padding-left: 8px;
		}
		article dt > a {
			font-weight: 800;
		}
		article dd {
			padding: 0 8px 0 20px;
			border-left: 2px solid red;
			border-color: var(--rred);
		}
		article a, 
		article a:link {
			display: inline-block;
			font-weight: 600;
			color: var(--rred);
			background-color: var(--llite);
			border: 2px solid white;
			border-color: var(--llite);
			text-decoration: underline;
		}
		article a:visited {
			text-decoration: underline dashed;
		}
		article a:hover, 
		article a:active {
			background-color: var(--rred);
			color: var(--llite);
		}
		article a:active {
			background-color: var(--ggray);
			color: var(--rred);
			border-color: var(--rred);
			border-style: dashed;
		}
body > footer {
	position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	margin: 0;
	padding: 0;
	height: 48px !important;
	width: 100%;
	overflow: visible;
	background-color: var(--rred);
	border: none;
	border-top: 24px solid white;
	border-bottom: 4px solid white;
	border-color: var(--llite);
}
	footer img {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 92px;
		height: 40px;
		margin: 0;
		padding: 0;
	}
	footer > .footline {
		position: relative;
			bottom: 2px;
			left: 8px;
		margin: 0;
		padding: 0;
		font-family: "Atkinson Hyperlegible Mono", monospace;
		font-optical-sizing: auto;
		font-weight: 400;
		font-style: normal;
		font-size: 12px;
		line-height: 1;
		text-transform: uppercase;
		letter-spacing: 0;
		color: var(--llite);
	}
.redurl {
	color: var(--rred);
	font-weight: bold;
}