: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 {
	line-height: 1;
	background-color: var(--theme-bg);
	color: var(--theme-txt);
	background-size: contain;
	letter-spacing: -0.5px;
	-webkit-text-size-adjust: none;

}
h1 {
	font-size: clamp(1.5rem, 10vw, 4.5rem);
}
h2 {
	font-size: clamp(1rem, 10vw, 3.5rem);
}
h3 {
	font-size: clamp(1rem, 7vw, 3rem);
}
h4 {
	font-size: 3rem;
}
h5 {
	font-size: 2.5rem;
}
h6 {
	font-size: 2.5rem;
}
h1, h2, h3, h4, h5, h6, .title {
	color:  var(--app-text-hue);
	font-family: var(--app-font-sans); // "GothicFree";
	font-weight: 700;
	text-align: center;
	line-height: normal;
	margin-top: var(--app-gap-large);
	text-shadow: 2px 2px 2px var(--app-bg-dark-hue);
	a {
		color: inherit;
		text-decoration: none;
	}
}
h1 {
	text-align: center;
	line-height: 8rem;
	margin-top: calc( 1.3 *  var(--app-gap-large));
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
	border-left: solid 0.5em #ddd;
	padding: 1em 0 1em 2em;
	font-style: italic;
}
blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
mark {
	background-color: transparent;
	color: inherit;
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form select,
form textarea {
	-moz-transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;
	-ms-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
	_-webkit-appearance: none;
	display: block;
	border: 0;
	background: #ccc;
	box-shadow: none;
	box-shadow: inset 0px 0px 1px 0px #a0a1a7;
	border-radius: 0.35em;
	padding: 0.75em 1em 0.75em 1em;
}
form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form select:focus,
form textarea:focus {
	background: #f8f8f8;
}
form input[type="submit"], form input[type="reset"] {
	font-family: var(--app-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.23em;
	font-size: 1.6rem;
}
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}
/*
input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
} */
body.is-preload *, body.is-preload *:before, body.is-preload *:after {
	-moz-animation: none !important;
	-webkit-animation: none !important;
	-ms-animation: none !important;
	animation: none !important;
	-moz-transition: none !important;
	-webkit-transition: none !important;
	-ms-transition: none !important;
	transition: none !important;
}
body, input, textarea, select {
	font-family: "GFS Didot", serif;
	font-weight: 400;
	color: var(--app-txt);
	font-size: 14pt;
	line-height: 1.75em;
	letter-spacing: 0.025em;
}
a {
	-moz-transition: color .25s ease-in-out;
	-webkit-transition: color .25s ease-in-out;
	-ms-transition: color .25s ease-in-out;
	transition: color .25s ease-in-out;
	text-decoration: underline;
	color: var(--app-txt-2);
}
a:hover {
	text-decoration: none;
}
strong, b {
	font-weight: 700;
	color: #FFF;
}
em, i {
	font-style: italic;
}
hr {
	border: 0;
	border-top: solid 1px #ddd;
	margin: 2em 0 2em 0;
}
sub, sup {
	position: relative;
	top: 0.5em;
	font-size: 0.8em;
}
sup {
	top: -0.5em;
}
.nobr {
	white-space: nowrap;
}
br.clear {
	clear: both;
}
p, ul, ol, dl, table, blockquote, form {
	margin-bottom: var(--app-gap-unit);
}
/* boilerplate */


body > header {
	color: var(--app-text-hue);
	font-family: var(--app-font-sans);
	background-color: var(--app-key-hue);
	background-repeat: no-repeat;
	background-size: cover;
	nav {
		background: #00000099;
		padding: var(--app-gap-unit);
		min-height: 64px;
		#sitelogo {
			position: absolute;
			top: 0;
			right: 0;
			a#title {
				display: none;
			}
			ul.nav {
				display: flex;
				margin-bottom: 0;
				-gap: 0;
				a, label[for="toggle-color-scheme"] {
					display: block;
					padding: var(--app-gap-unit);
					text-decoration: none;
					&:hover {
						text-decoration: underline;
					}
				}
				input {
					display: block;
					width: 6rem;
					height: 32px;
					position: absolute;
					top:  var(--app-gap-unit);
					right:  var(--app-gap-unit);
					margin: 0;

					cursor: pointer;

					opacity: 0; /* hide this */
					z-index: 2;
				}

			}

		}
		#menuToggle {
			display: none;
			/* You can also use relative/absolute here if you want to stay on the top */
			_position: fixed;
			_top: 50px;
			_left: 50px;
			margin:0px;
			z-index: 1;
			-webkit-user-select: none;
			user-select: none;
			a {
				text-decoration: none;
				color: #FFF;
				transition: color 0.3s ease;
			}
			input {
				display: block;
				width: 40px;
				height: 32px;
				position: absolute;
				top:  var(--app-gap-unit);
				left:  var(--app-gap-unit);
				margin: 0;

				cursor: pointer;

				opacity: 0; /* hide this */
				z-index: 2; /* and place it over the hamburger */

				-webkit-touch-callout: none;
				&:checked ~ span {
					opacity: 1;
					transform: rotate(45deg) translate(-2px, -1px);
					background: #fff;
				}
				&:checked ~ span:nth-last-child(3) {
					opacity: 0;
					transform: rotate(0deg) scale(0.2, 0.2);
				}
				&:checked ~ span:nth-last-child(2) {
					transform: rotate(-45deg) translate(0, -1px);
				}
				&:checked ~ ul {
					transform: none;
				}
			}
			span {
				display: block;
				width: 33px;
				height: 4px;
				margin-bottom: 5px;
				position: relative;

				background: #cdcdcd;
				border-radius: 3px;

				z-index: 1;

				transform-origin: 4px 0px;

				transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
						  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
						  opacity 0.55s ease;
				&:first-child {
					transform-origin: 0% 0%;
				}

				&:nth-last-child(2) {
					transform-origin: 0% 100%;
				}

			}
			ul.main {
				position: absolute;
				max-width: 400px;
				width: 100vw;
				max-height: 100vh;
				margin: -100px 0 0 -50px;
				padding: 50px;
				padding-top: 125px;
				box-sizing: border-box;
				overflow-y: auto;
				background: #000;
				list-style-type: none;
				flex-direction: column;
				-webkit-font-smoothing: antialiased;
				/* to stop flickering of text in safari */
				transform-origin: 0% 0%;
				transform: translate(-100%, 0);

				transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
				li {
					padding: 10px 0;
					font-size: 22px;
					label {
						cursor: pointer;
					}
				}

			}

		}
	}

}

ul.nav {
	list-style-type: none;
	display: flex;
	gap: var(--app-gap-unit);
	flex-direction: row;
	li {
		display: block;
	}
	label {
		cursor: pointer;
	}
}
section.flexrow, div.flexrow {
	display: flex;
		flex-direction: row;
		gap: var(--app-gap-large);
flex-flow: row wrap;
justify-content: center;
		margin-top: var(--app-gap-unit);
}
body > main {
	h2, h3, h4, h5, h6{
	font-family: Sans, Verdana, Arial, Tahoma, sans-serif;
		color:  var(--theme-key-txt);
	}
	.title, p, q {
		color:  var(--theme-text-hue);
	}
	font-family: Georgia, Times, serif;
	width: 100%;
	padding-top: 1px;
	margin : 0 auto;
	text-align:left;
	padding-bottom: var(--app-gap-large);
	&.blog {
		padding: 0 var(--app-gap-unit) var(--app-gap-large) var(--app-gap-unit);
		width: 60%;
		h2, h3, h4 {
			text-align:left;
		}
		p {
			margin-top: calc( 2 * var(--app-gap-unit));
		}
	}
	section.excerpt {
		margin: var(--app-gap-large) auto 0 auto;
		display: flex;
		gap: calc( 2 * var(--app-gap-unit));
		flex-wrap: wrap;
  		justify-content: center;
		flex-direction: row;

		article {
			width: 19%;
			border-radius: 8px;
			background: #bb999933;
			overflow: hidden;
			cursor: pointer;
			box-shadow: 1px 2px 2px var(--app-bg-dark-hue);
			transition: all 250ms ease-in-out;
			h3 {
				margin-top: 0;
				text-shadow: 1px 2px 2px var(--app-bg-dark-hue);
    			outline: black;
				font-size: 1.5rem;
				padding: var(--app-gap-unit);
				text-align: left;
				color:  var(--app-key-light-hue);
				a {
					display: block;
				}
			}
			img {
				width: 100%;			
				--f: 1.03; /* the scale factor */
				clip-path: inset(0);
				transition: .4s;
			}
			div {
				padding: 0 var(--app-gap-unit);
			}
			&:hover {
				box-shadow: 0 7px 20px var(--app-bg-dark-hue);
				img {
				  clip-path: inset(calc((1 - 1/var(--f)) * 50%));
				  scale: var(--f)
				}
			}
		}
	}
}

body > footer {
	color: var(--app-text-hue);
	font-family: var(--app-font-sans);
	background-color: var(--app-key-dark-hue);
    padding-left: var(--app-gap-unit);
    padding-right: var(--app-gap-unit);
    padding-top: 1px;
	padding-bottom: calc( 2 * var(--app-gap-large));
	h4,h5 {
    	padding: var(--app-gap-unit) 0;
	}
	section {
		text-align: center;
		margin-bottom: var(--app-gap-large);
		ul.nav {
			flex-direction: column;
			&.buttonlinks {
				flex-direction: row;
				justify-content: center;
				flex-wrap: wrap;
				_align-items: center
			}
		}
	}
	#connections {
		margin-left: auto;
		margin-right: auto;
		max-width:60%;
		div.flexrow {
	    	gap: var(--app-gap-unit);
		}
		ul {
			margin-top: var(--app-gap-unit);
			flex-grow: 1;
			&.nav li {
				text-align: right;
			}
		}
		form.contact {
			flex-grow: 4;
			min-width: 40%;
			display: flex;
			flex-flow: column nowrap;
			input {
				flex-grow: 1;
			}
			textarea {
				margin-top: var(--app-gap-unit);
			}
		}
	}
	#copyright {
		text-align: center;
		display: block;
	}
}

@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%;
		}
	}
}