:root {
 	color-scheme: light dark;
	--app-key-hue: #F80;
	--app-key-light-hue: hsl(from var(--app-key-hue) h s calc(l + 10));
	--app-key-dark-hue: hsl(from var(--app-key-hue) h s calc(l - 10));
	--app-text-hue: #eee;
	--app-text-light-hue: hsl(from var(--app-text-hue) h s calc(l + 10));
	--app-text-dark-hue: hsl(from var(--app-text-hue) h s calc(l - 10));
	--app-bg-hue: #444;
	--app-bg-light-hue: hsl(from var(--app-bg-hue) h s calc(l + 10));
	--app-bg-dark-hue: hsl(from var(--app-bg-hue) h s calc(l - 10));

	--theme-key-bg: light-dark(var(--app-key-light-hue), var(--app-key-dark-hue));
	--theme-key-txt: light-dark(var(--app-key-dark-hue), var(--app-key-light-hue));
	--theme-bg: light-dark(var(--app-text-hue), var(--app-bg-hue));
	--theme-bg-2: light-dark(var(--app-text-dark-hue), var(--app-bg-dark-hue));
	--theme-bg-mod: light-dark(var(--app-text-light-hue), var(--app-bg-light-hue));
	--theme-txt: light-dark(var(--app-bg-hue), var(--app-text-hue));
	--theme-txt-2: light-dark(var(--app-bg-dark-hue), var(--app-text-dark-hue));

	--app-font-sans:  Arial, Tahoma, Verdana, Sans, sans-serif;
	--app-font-serif:  Georgia, Times New Roman, Times, Serif, serif;
	--app-gap-unit: 1rem;
	--app-gap-large: calc( 4 * var(--app-gap-unit));
}
@media (prefers-color-scheme: dark) {
  &:has([name="toggle-color-scheme"]:checked) {
    color-scheme: light;
  }
}
@media (prefers-color-scheme: light) {
  &:has([name="toggle-color-scheme"]:checked) {
    color-scheme: dark;
  }
}
@font-face {
  font-family:"GothicFree";
  src: url("/inc/font/GOTHFB__.TTF") format("truetype");
}
@-ms-viewport {
	width: device-width;
}

/* boilerplate */
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;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

body {
	p#cover-i {display:none;}
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	padding-block: 2px;
	color: #000;
	background: #999 url('./../../inc/img/gray_flannel.png');
	text-align: center;
	font-family: Sans, Verdana, Helvetica, Arial, sans-serif;
	img.curbs {
		position: fixed;
		top: 3rem;
		left: 50%;
		transform: translateX(-316%);
	}
	main {
		padding-left: 5rem;
		img.header {
            margin: 0.5rem auto 2rem auto;
            display: block;
            height: 88px;
            width: 300px;
		}
		img.cover {
			border: 1px solid #555;
			margin: 0 auto 2rem auto;
			display: block;
			height: 300px;
			width: 300px;
			box-shadow: 0 3px 3px #444;
			transition: all 250ms ease-in-out;
			&:hover {
				border-color: #777;
				box-shadow: 0 7px 20px #444;
			}
		}
		content {
			margin: 0 auto 2rem auto;
			border: 1px solid #555;
			display: block; 
			width: 300px;
			background: #FFF;
			padding-bottom: 4rem;
			dl {
				margin:20px 20px 1px 30px;
				text-align: left;
				padding-bottom: 20px;
				dt {
					font-weight: bold;
					padding-bottom:6px;
				}
				dd {
					margin-left:20px;
					padding-bottom: 6px;
				}

				small {
					font-weight: normal;
					float:right;
				}
			}
			p {
				padding: 1rem 2rem;
			}
			img {
				width:240px;
				image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
				image-rendering: -moz-crisp-edges;          /* Firefox                        */
				image-rendering: -o-crisp-edges;            /* Opera                          */
				image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
				image-rendering: pixelated;                 /* Universal support since 2021   */
				image-rendering: optimize-contrast; 
			}
			hr {
				border: none;
				border-top: dotted 3px black;
				box-shadow: none;
				height: 1px;
				width: 60%;
				position: relative;
				margin: 2rem auto 2rem;
				background-color: transparent;		
			}
		}
	}
	&.issue {
		main content 
	}
	footer {
		background: #FFFFFF66;
		margin: -8px;
		padding: 3em;
		a {
			color:black;
		}
		a:visited{
			color: #666;
		}
		ul {
			list-style-type: none;
		}
	}
}

@media screen and (width <= 1024px) {
  main section.excerpt article {

    width: 25%;
  }
}	

@media screen and (width <= 800px) {
  main section.excerpt article {

    width: 45%;
  }
}

@media screen and (width <= 600px) {
	body > header {
		nav{
			#menuToggle {
				display:block;
			}
			#sitelogo {
				a#title {
					display: block;
				}
				ul.nav {
					display:none;
				}
			}
		}
	}
	body > main {
		&.blog{
			width: 100%;
		}
		section.excerpt article {
			width: 100%;
		}
	}
	body > footer {
		#connections {
			max-width: 100%;
		}
	}
}