:root {
	--text: #111;
	--html-background: #000;
	--content-background: #FFFA;
	--menu-text: #FFFA;
	--menu-background: #FFFA;
	--gold: #CC9C12;
	--menu-hover-text: #111;
	--width-break: 1000px;
	--empty-space: 2em;
}
a.gold-horizontal-menu {
	text-decoration:underline;
	padding:0 1em;
}

body, html {
	margin:0;
	padding:0;
}

picture.left {
	margin-right: 2em;
}
picture.right{
	margin-left: 2em;
}

div.image-small {
	height:64px;
	width:64px;
}

html {
	background-color: var(--html-background);
	color:var(--text);
	min-height:100%;
}

.square {
	aspect-ratio:1/1;
}
.right {
	float:right;
}

gold-page-area {
	display:block;
	margin: 5px auto;
	max-width:var(--width-break);
}

gold-content {
	text-wrap:pretty;
	-moz-box-shadow: 12px 12px 33px -11px rgba(0,0,0,0.75);
	-webkit-box-shadow: 12px 12px 33px -11px rgba(0,0,0,0.75);
	background:var(--content-background);
	border-radius:20px;
	box-shadow: 12px 12px 33px -11px rgba(0,0,0,0.75);
	display:block;
	min-height:400px;
	overflow:hidden;
	padding:var(--empty-space);
	position:relative;
}

gold-header {
	align-items: center;
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content: space-between;
	margin: 0 20px;
	overflow:hidden;
	padding: 10px;
	position:relative;
	z-index:10;
	h1 {
		color:var(--color2);
		margin: 0;
		padding: 0;
	}
	text-shadow: 0px 0px 5px black;
}
span.info {
	font-weight:bold;
	color:green;
}
span.important {
	font-weight:bold;
	color:yellow;
}
span.error {
	font-weight:bold;
	color:red;
}
.gold-menu  {
	color:var(--menu-text);
	display:flex;
	align-items: center;
	justify-content: center;
	flex-wrap:wrap;
	float:right;
	font-size:xx-large;
	font-weight:bold;
	list-style-type: none;
	margin: 0;
	overflow: hidden;
	padding: 0;
	z-index:100;
}
img {
	border:0;
	margin:0;
	padding:0;
}
.gold-menu li {
	z-index:100;
	float: left;
}

.gold-menu li a {
	z-index:100;
	display: block;
	text-align: center;
	padding: 1em;
	text-decoration: none;
	border-radius:2em;
}

.gold-menu li a:hover:not(.active) {
	z-index:100;
	transition: 0.3s ease-in-out;
	background:var(--gold);
}

.gold-menu li a.active {
	z-index:100;
	float: right;
}

gold-clear { display:block; clear:both; }
gold-banner {
	display:flex;
	position:relative;
	overflow:hidden;
	gold-banner-card {
		position:absolute;
		display:flex;
		height:100%;
		width:100%;
		transition: transform 2s ease-in-out;
		image-frame {
			display:inline-block;
			img {
				float:left;
				aspect-ratio:1/1;
				margin-right:1em;
			}
		}
		text-frame {
			display:inline-block;
			h2,p {
				padding:0;
				margin:0;
				margin-left:1em;
			}
		}
	}
}
@media (max-width: 600px) { h2,h1{ font-size:medium;} gold-banner { font-size:small;} }
@media (min-width: 600px) { gold-banner { FONT-SIZE:small;} }

a.gold-row {
	display:block;
	overflow:hidden;
	max-height:500px;
	text-decoration:none;
	transition: all 0.4s ease-in-out;
}
a.gold-row:hover {
	background: rgba(128,0,0,0.2);
}
gold-row-date {
	display:block;
	text-align:center;
	width:64px;
	height:64px;
	overflow:hidden;
	color:rgba(128,0,0,1);
}
gold-row-date-holder {
	padding:0 0.5em 0 0;
	color:var(--color2);
}
gold-row-date-month-day { display:block;font-size:large;text-wrap:no-wrap; }
gold-row-date-year { display:block;font-size:x-large; }

gold-row {
	display:flex;
	align-items:center;
	padding:5px 0;
	margin:0;
	border-top:1px solid var(--color2);
	border-bottom:1px solid var(--color2);
	gold-text-block {
		overflow:hidden;
		display:block;
		width:100%;
		align-self:stretch;
	}
	h3 { 
		display:block;
		padding:0 0 0 0.5em;
		font-size:normal;
		margin:0;
	}
	p {
		display:block;
		padding:0 0 0 0.5em;
		margin:0;
	}
}
gold-row.gap {
	gap: 1em;
}

.left {float:left}
.right {float:right}

a {
	color: inherit;
	text-decoration:none;
}
a.block {
	display:block;
}
/*/////////////////////////////////////	2025-04 REFACTOR /////////////////////////////////*/

flex.mmenu{
	flex-wrap:wrap;
	justify-content:center;
	span:hover{
		text-decoration:underline;
		cursor: pointer;
	}
	span.active {
		font-weight:bold;
	}
	margin-bottom:1em;
}
gold-image-place-holder {
	img {
		object-fit:contain;
	}
}

gold-image-place-holder.flex {
	display: flex;
	justify-content: center;
	align-items: center;
}
gold-image-place-holder.s64{
	height:64px;
	width:64px;
	min-width:64px;
	min-height:64px;
}

/* NOTE: you cannot use var() in @media queries */
@media (max-width: 1000px) {
	gold-content {
		border-radius:0px;
	}
	.gold-menu, h1 {
		font-size: x-large;
	}
}