/* CSS RESET */
blockquote, body, cite, code, h1, h2, h3, h4, h5, h6, html, li, ol, p, pre, ul {
	margin: 0;
	padding: 0;
}

a:not([class]) {
	text-decoration-skip-ink:	auto;
}

html {
	font-variant-numeric:	tabular-nums;
}

html:focus-within {
	scroll-behavior:	smooth;
}

body {
	height:			100vh;
	text-rendering:		optimizeLegibility;
	overflow:		hidden;
}

img, picture {
	max-width:		100%;
	display:		block;
}

ol[role='list'], ul[role='list'] {
	list-style:		none;
}

/* MY CSS */

@font-face {
	font-family:		"Segoe UI Semilight";
	src:			url("/fonts/SegoeUI-Semilight.ttf") format("truetype");
}

@font-face {
	font-family:		"Cascadia Code";
	src:			url("/fonts/CascadiaCode.ttf") format("truetype");
}

html {
	background-color:	#1E1E1E;
	line-height:		1.5;
}

html, blockquote, cite, p, div, span, ul, ol, li, kbd, a {
	font-family:		"Segoe UI Semilight";
	font-size:		12pt;
	font-weight:		400;
	letter-spacing:		0.025em;
	color:			#EEEEEE;
}

input, textarea, select, button {
	font-family:		inherit;
	font-size:		inherit;
	font-weight:		inherit;
	letter-spacing:		inherit;
	border-radius:		4px;
}

input, textarea {
	background-color:	#303030;
	color:			#EEEEEE;
}

button {
	color:			#EEEEEE;
}

:root { --h1-size: 24pt; }

h1 { font-size: var(--h1-size); }
h2 { font-size: calc(var(--h1-size) * 3.0 / 4.0); }
h3 { font-size: calc(var(--h1-size) * 2.0 / 3.0); }
h4 { font-size: calc(var(--h1-size) * 1.0 / 2.0); }

h1, h2, h3, h4 {
	color:			#FFFFFF;
	letter-spacing:		0.025em;
}

h1, h2, h3 {
	font-weight:		700;
	text-shadow:		2px 2px 2px rgba(0,0,0,0.5);
}

h1, h4 {
	text-align:		center;
}

h1 {
	margin-bottom:		0.50em;
}

h2, h3 {
	margin-bottom:		0.25em;
}

h4 {
	font-weight:		500;
	font-style:		italic;
	letter-spacing:		0.10em;
	margin-bottom:		1.00em;
}

blockquote, cite, p, li:not(:has(a)) {
	text-align:		justify;
	text-align-last:	left;
	hyphens:		auto;
	overflow-wrap:		anywhere;
}

p {
	margin-left:		0.25em;
	margin-right:		0.25em;
	margin-bottom:		0.50em;
}

.break {
	word-break:		break-all;
}

pre, blockquote, cite, code {
	background:		#323232;
	border-radius:		4px;
	box-shadow:		rgba(0,0,0,0.5) 0 1px 2px;
	white-space:		pre-wrap;
}

pre, code, .fixed, .fixed * {
	font-family:		"Cascadia Code";
}

code {
	padding-left:		0.250em;
	padding-right:		0.250em;
	padding-top:		0.125em;
	padding-bottom:		0.125em;
}

pre:has(> code.language-mermaid), code[class] {
	background:		none;
	border:			none;
	border-radius:		0;
	box-shadow:		none;
	margin:			0;
}

blockquote, cite, pre {
	margin-left:		0.50em;
	margin-right:		0.50em;
	margin-bottom:		0.50em;
	padding:		0.50em;
}

blockquote, cite {
	font-style:		italic;
	color:			#FFFF00;
}

hr {
	display:		inline-block;
	width:			100%;
	border:			solid 1px #888888;
	margin-top:		1em;
	margin-bottom:		1em;
}

kbd {
	position:		relative;
	font-weight:		600;
	padding:		0 0.25em 0.125em 0.25em;
	border:			solid 1px #888888;
	border-radius:		4px;
	background-color:	#CCCCCC;
	color:			#000000;
	box-shadow:		1px 1px 0 #666666,
				2px 2px 0 #555555,
				3px 3px 0 #444444;
	margin-right:		0.250em;
	cursor:			pointer;
}

kbd::after {
	content:		"";
	position:		absolute;
	top:			0.125em;
	left:			0.125em;
	right:			0.125em;
	bottom:			0.125em;
	background:		rgba(0, 0, 0, 0.25);
	pointer-events:		none;
	border-radius:		4px;
	filter:			blur(4px);
}

ul, ol {
	margin-left:		1.50em;
	margin-right:		1.50em;
	margin-bottom:		0.50em;
}

table {
	margin-left:		0.50em;
	margin-right:		0.50em;
	margin-bottom:		0.50em;
}

table, td, th {
	border:			1px solid #FFFF00;
	border-collapse:	collapse;
}

td, th {
	padding:		0.75em;
}

pre, td {
	font-size:		10pt;
}

th {
	font-weight:		700;
	background:		#FF2200;
}

tr:nth-child(even) {
	background:		#2A2A2A;
}

tr:nth-child(odd) {
	background:		#242424;
}

#content {
	margin:			0 auto;
	width:			calc((100vw * var(--dpr)) / 2);
	min-width:		1024px;
	max-width:		1024px;
	padding-top:		80px;
	padding-bottom:		64px;
	display:		flex;
	flex-direction:		column;
	overflow-y:		scroll;
	height:			100vh;
	scrollbar-width:	none;
	box-sizing:		border-box;
}

#content::-webkit-scrollbar {
	display:		none;
}

#pager {
	margin-top:		12px;
}

#pager a {
	text-decoration:	none;
	font-weight:		600;
	padding-top:		8px;
	padding-bottom:		8px;
	padding-left:		16px;
	padding-right:		16px;
	background:		#303030;
	color:			#FFFFFF;
	border-radius:		4px;
	box-shadow:		rgba(0,0,0,0.5) 0 1px 2px;
	cursor:			pointer;
}

#header, #footer {
	position:		fixed;
	box-sizing:		border-box;
	left:			50%;
	transform:		translateX(-50%);
	width:			calc((100vw * var(--dpr)) / 2);
	min-width:		1024px;
	max-width:		1024px;
	z-index:		10;
}

#header {
	top:			0;
	height:			80px;
	background:		linear-gradient(to bottom,
				#1E1E1E 0px,
				#1E1E1E 64px,
				rgba(30, 30, 30, 0) 80px);
}

#header img {
	float:			right;
}

#footer {
	bottom:			0;
	height:			64px;
	background:		linear-gradient(to bottom,
				rgba(30, 30, 30, 0) 0px,
				#1E1E1E 16px,
				#1E1E1E 48px);
	display:		flex;
	padding-top:		16px;
	box-sizing:		border-box;
	justify-content:	center;
	align-items:		center;
}

#menu {
	display:		inline-block;
}

#menu a img {
	float:			left;
	width:			64px;
	height:			64px;
	padding-left:		6px;
	padding-right:		6px;
}

#contact_form {
	display:		table;
	margin:			0 auto 16px;
}

#contact_form button, #contact_form input {
	padding-left:		8px;
	padding-right:		8px;
	padding-top:		4px;
	padding-bottom:		4px;
}

#contact_form button {
	background-color:	#404040;
	color:			#FFFFFF;
}

#contact_form input {
	margin-right:		8px;
	min-width:		240px;
}

#contact_form label {
	margin-right:		4px;
	margin-bottom:		6px;
	display:		inline-block;
	vertical-align:		middle; 
}

a.external {
	padding-right:		16px;
	background:		url(/icons/external.gif) no-repeat 100% 49%;
	cursor:			pointer;
}

a.pdf {
	background:		url(/icons/pdf.gif) 0 0.4em no-repeat;
	padding-left:		20px;
}

a.zip {
	background:		url(/icons/zip.gif) 0 0.4em no-repeat;
	padding-left:		20px;
}

.photo {
//	position:		relative;
	margin:			16px;
	padding:		8px;
	width:			200px;
	border-radius:		4px;
	box-shadow:		rgba(0,0,0,0.5) 0 1px 3px;
	background:		#303030;
//	display:		flex;
//	justify-content:	center;
//	align-items:		center;
}

.item {
	background:		#303030;
	border-radius:		4px;
	box-shadow:		rgba(0,0,0,0.5) 0 1px 2px;
	margin-bottom:		16px;
	padding-top:		8px;
	padding-bottom:		8px;
	padding-left:		16px;
	padding-right:		16px;
}

.gallery {
	display:		flex;
	flex-direction:		column;
}

.gallery-row {
	display:		flex;
	flex-direction:		row;
	flex-basis:		100%;
}

.fixed {
	display:		inline;
}

.hash {
	cursor:			pointer;
}

img.center {
	display:		block;
	margin-left:		auto;
	margin-right:		auto;
	max-width:		100%;
	max-height:		100%;
	margin-bottom:		18px;
}

.grecaptcha-badge {
	display:		none;
}

@media screen and (orientation: portrait) {
	#header, #footer, #content {
		width:			95%;
		min-width:		unset;
	}
	
	#header {
		height:			64px;
		background:		linear-gradient(to bottom,
					#1E1E1E 0px,
					#1E1E1E 48px,
					rgba(30, 30, 30, 0) 64px);
	}

	#content {
		padding-top:		64px;
	}

	#menu a img {
		width:			34px;
		height:			34px;
	}

	#sitelogo, #copyright {
		display:		none;
	}

	.hideonmobile {
		display:		none;
	}
}

@media screen and (orientation: landscape) and (max-width: 1280px) {
	#header, #footer, #content {
		width:			90%;
		min-width:		unset;
	}

	#header {
		height:			64px;
		background:		linear-gradient(to bottom,
					#1E1E1E 0px,
					#1E1E1E 48px,
					rgba(30, 30, 30, 0) 64px);
	}

	#content {
		padding-top:		64px;
	}

	#menu a img {
		width:			36px;
		height:			36px;
		padding-left:		4px;
		padding-right:		4px;
	}

	#sitelogo {
		width:			360px;
	}

	.hideonmobile {
		display:		none;
	}
}