/*
style sheet for the game hen games site
created by Electric Keet https://electrickeet.com/
*/

/* these are all converted; look to the original foundry for proper fonts */
@font-face {
	font-family: 'Linux Biolinum';
	src: url('/res/Linux-Biolinum-Bold-subset.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	size-adjust: 121%;
	font-display: block;
}
@font-face {
	font-family: 'Linux Biolinum';
	src: url('/res/Linux-Biolinum-Italic-subset.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	size-adjust: 121%;
	font-display: block;
}
@font-face {
	font-family: 'Linux Biolinum';
	src: url('/res/Linux-Biolinum-Regular-subset.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	size-adjust: 121%;
	font-display: block;
}
@font-face {
	font-family: 'Linux Libertine Mono';
	src: url('/res/Linux-Libertine-Mono-subset.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	size-adjust: 108%;
}
/* and custom font work by me, Electric Keet! */
@font-face {
	font-family: 'game hen games';
	src: url('/res/game hen games.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	size-adjust: 121%;
}



:root {
	--c-white: #ffffff;
	--c-tan:   #faefe6;
	--c-gold:  #f2d117;
	--c-green: #007f60;
	--c-teal:  #00394d;
	--c-black: #00000099;

	--c-back: var(--c-tan);
	--c-cont: var(--c-gold);
	--c-fore: var(--c-green);
	--c-text: var(--c-teal);
	--c-shad: var(--c-teal);
	--c-logo-shad: var(--c-teal);
	color-scheme: light;

	--t-back: url("/res/back-green.jpg");
	--t-fore: url("/res/back-tan.jpg")
}
@media (prefers-color-scheme: light) {
	:root {
		color-scheme: light;
	}
}
@media (prefers-color-scheme: dark) {
	:root {
		--c-back: var(--c-teal);
		--c-cont: var(--c-green);
		--c-fore: var(--c-gold);
		--c-text: var(--c-tan);
		--c-shad: var(--c-black);
		--c-logo-shad: var(--c-green);
		color-scheme: dark;

		--t-fore: url("/res/back-teal.jpg")
	}
}
@media print {
	:root {
		--c-back: var(--c-white);
		--c-cont: var(--c-gold);
		--c-fore: var(--c-green);
		--c-text: var(--c-teal);
		--c-shad: var(--c-teal);
		--c-logo-shad: var(--c-green);
		color-scheme: light;
	}
}

/*
:focus {
	outline: 0.1rem solid var(--c-fore);
	outline-offset:  0.1rem;
}
*/

html {
	min-height: 100%;
	/* font size will scale with viewport size! For mobile users! */
	font-size: clamp(0.75em, calc(0.75em + (1 - 0.75) * ((100vw - 12em) / (48 - 12))), 1em);
  box-decoration-break: clone;
}

body {
	font-family: "Linux Biolinum", sans-serif;
	background-color: var(--c-green);
	background-image: var(--t-back);
	background-size: 20rem 32rem;
	background-position: center top;
	color: var(--c-text);
	padding: 0;
	margin: 0;
	line-height: 1.75;
	min-height: 100%;
}
@media print {
	body {
		background-image: none;
		background-color: var(--c-tan);
	}
}
.body {
	padding: 0 clamp(1rem, calc((100% - 24em) / 6), 4.5rem) 0 clamp(1rem, calc((100% - 24em) / 6), 4.5rem);
	margin: 0 auto;
	max-width: 48rem;
	background-image: none;
	/* hate to calculate this, but it keeps the solid page background at max height */
	/* full height - padding - borders */
	min-height: calc(100vh - 5rem - 2rem);
	border-top: 1rem solid var(--c-patt);
	border-bottom: 1rem solid var(--c-patt);
	font-variant-numeric: oldstyle-nums;
}
div.landing,
div.banner,
main,
footer,
aside {
	background-color: var(--c-back);
	background-image: var(--t-fore);
	background-position: center top;
	background-size: 25rem 40rem;
	box-shadow: 0 0.25rem 1rem .0 var(--c-shad);
	padding: 1rem 3rem 1rem 3rem;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

h1,
h2,
h3 {
	margin-top: 2rem;
	margin-bottom: 0.5em;
/*	font-variant-numeric: lining-nums; */
}

p {
	margin-top: 0.75rem;
	margin-bottom: 0.75rem;
}
p,
li {
/*	turning this off because Firefox does a lousy job of it, ugh */
/*	hyphens: auto; */
}

dt {
	font-weight: bold;
	margin-top: 1rem;
}
dd {
	margin-bottom: 1rem;
}

header {
	display: contents;
	grid-template-rows: 1fr 1fr;
}
header a,
header a:visited
 {
	text-decoration: none;
	color: var(--c-text);
}
div.banner {
	display: grid;
	grid-template-columns: min-content 1fr;
	grid-template-rows: auto;
	grid-column-gap: 2rem;
	grid-row-gap: 0;
	justify-items: stretch;
	align-items: flex-end;
}
div.banner * {
	direction: initial;
}
div.banner h1 {
	margin: 0;
	font-size: 2.5rem;
	line-height: 133.333%;
	font-weight: normal;
  text-transform: lowercase;
}
header .headlogo {
	display: grid;
	grid-row-end: span 2;
	align-self: center;

	padding: 0;
	margin: 0;
	transform: none;
	transition: none;
}
header .headlogo:hover {
	background: none;
	box-shadow: none;
	transform: none;
	transition: none;
}
header .headlogo:active {
	position: initial;
	padding: 0;
	margin: 0;
	box-shadow: none;
	transform: none;
	z-index: initial;
	transition: none;
}
@media only screen and (max-width: 36.75rem) {
	header  {
		display: unset;
		margin-top: 0.5rem;
	}
	.landing header {
		margin-top: 0;
	}
	div.banner {
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	}
}

ul, 
ol {
	padding-left: 2em;
	}
li {
}
li ul,
li ol {
  padding-left: 1em;
}
li p {
	margin: 0;
	text-indent: -1em;
}
li::marker {
	font-variant-numeric: oldstyle-nums;
}
ul li::marker {
  list-style-type: disc;
  padding-right: 0.2em;
  color: var(--c-cont);
  list-style-position: inside;
}
li.current {
	font-weight: bold;
}
li.current li {
	font-weight: normal;
}

ol ol {
    list-style-type: lower-latin;
}

dt {
	font-size: 1.2em;
	margin-top: 0.2rem;
}
dd {
	margin-left: 1rem;
}

hr {
	width: 25%;
	height: 0.2rem;
	text-align: center;
	color: var(--c-cont);
	border: none;
	background-color: var(--c-cont);
	clear: both;
	margin-top: 2rem;
	margin-bottom: 2rem;
}
header hr,
footer hr {
	height: 0.2rem;
}

main {
}
main h1:first-child,
main h2:first-child {
	padding-top: 1rem;
	margin-top: 0;
}

nav {
}

nav h1 {
	margin-top: 0;
}
nav ul,
nav menu {
	padding-left: 0;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}
nav li {
	display: inline list-item;
	list-style-type: none;
	font-size: 1rem;
	margin: 0 0.75em 0 0;
	text-indent: 0;
	padding: 0 0 0.25em 0;
}
nav li a {
	white-space: nowrap;
}
nav > menu > li:first-child::marker {
	content: "";
}

/* magical CSS dropdown menus that no longer impress anyone */
nav li {
  position: relative;
}
nav ul ul,
nav menu menu {
  visibility: hidden;
  position: absolute;
	background-color: var(--c-back);
	background-image: var(--t-fore);
	background-size: 25rem 40rem;
  top: 1em;
	left: -0.25em;
	right: -0.25em;
	width: auto;
	padding: 0.25em 0.25em 0.25em 0.25em;
	transform: translateY(0.15rem);
	box-shadow: 0 0 0 0 var(--c-shad);
	z-index: 100;
	opacity: 0;
	transition:
		opacity .2s ease-in-out,
		box-shadow .2s ease-in-out,
		transform .2s ease-in-out,
		visibility .2s step-end;
}
nav menu li:first-child menu {
	left: 0;
}
nav ul ul li,
nav menu menu li {
	margin: 0.25em;
	padding-bottom: 0;
	width: 100%;
	white-space: nowrap;
	list-style-type: none;
	display: block;
}
nav li:hover ul,
nav li ul:hover,
nav li:hover menu,
nav li menu:hover {
	box-shadow: 0 0.15rem 0.3rem 0 var(--c-shad);
	transform: translateY(0);
	opacity: 1;
	z-index: 100;
	visibility: visible;
	transition:
		opacity .2s ease-in-out,
		box-shadow .2s ease-in-out,
		transform .2s ease-in-out;
}
nav li:hover menu.empty,
nav li menu.empty:hover {
  display: none;
}

div.landing-pad {
}
div.landing {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: min-content min-content;
	grid-column-gap: 0;
	grid-row-gap: 0;
	justify-items: stretch;
	align-items: center;
	justify-content: center;
}
div.landing h1 {
	text-align: center;
	/* accounting for line-height adding space at the bottom */
	margin: 0 auto -0.75em auto;
}
div.landing svg {
	width: 16rem;
}
div.landing > nav > menu {
	/* accounting for the space at the left of the image */
	margin: 0 2.5em 0 1.25em;
	text-align: center;
}
div.landing menu menu {
  top: 1.125em;
	right: -0.25em;
}
div.landing menu menu li {
	margin-left: 0;
}
div.landing li {
	display: list-item;
	margin-top: 0.25em;
	margin-bottom: 0.25em;
}
div.landing picture {
	vertical-align: bottom;
}
@media only screen and (max-width: 24rem) {
	div.landing {
		grid-template-columns: min-content;
		grid-column-gap: 0;
		grid-row-gap: 0;
		justify-items: stretch;
		align-items: center;
		justify-content: center;
		padding-bottom: 2em;
	}
	div.landing nav {
		column-count: 2;
	}
	div.landing > nav > menu {
		margin: 0;
	}
	div.landing li {
		margin-left: 0;
		margin-right: 0;
		margin-top: 0;
	}
}


details {
	margin-left: 0.75em;
	margin-top: 0.75em;
}
div.writing-tree > details {
	margin-left: 0em;
	clear: both;
	margin-bottom: 0.5em;
}
details details {
	margin-top: 0.5rem;
}
details p {
	margin-top: 0;
	padding-left: 2.25rem;
}
summary {
  list-style-type: " ▷ ";
}
details[open] > summary {
  list-style-type: " ▼ ";
}
summary:hover a {
	text-decoration-color: var(--c-fore);
}
summary::marker {
  color: var(--c-fore);
}

footer {
	clear: both;
}
footer p {
	font-size: 0.8em;
	margin-top: 0.4em;
	margin-bottom: 0.4em; 
}

.about img {
	max-width: 100%;
}
.cover img {
	max-width: 50%;
	margin: 0 0 1.5rem 1.5rem;
	float: right;
}
@media only screen and (max-width: 30em) {
	.cover {
		text-align: center;
	}
	.cover img {
		max-width: 80%;
		margin: 0;
		float: none;
	}
}



a {
	display: inline-block;
	color: var(--c-fore);
	text-decoration-color: var(--c-cont);
	text-decoration-thickness: 0.2rem;
	padding: 0.25rem;
	margin: -0.25rem;
	transform: translateY(0);
	transition: 
		text-decoration-color .2s ease-in-out,
		background-color .2s ease-in-out, 
		box-shadow .2s ease-in-out,
		transform .2s ease-in-out;
}
a:hover {
	background: var(--c-cont);
	/* outline: 0.2rem solid var(--c-cont); */
	text-decoration-color: var(--c-fore);
	box-shadow: 0 0.1rem 0.2rem 0 var(--c-shad);
	transform: translateY(-0.1rem);
	transition:
		text-decoration-color .2s ease-in-out,
		background-color .2s ease-in-out,
		box-shadow .2s ease-in-out,
		transform .2s ease-in-out;
}
a:active {
	position: relative;
	padding: 0.25rem;
	margin: -0.25rem;
	box-shadow: 0 0.1rem 0.2rem 0 var(--c-shad) inset;
	transform: translateY(0.1rem);
	z-index: 100;
	transition:
	  text-decoration-color .2s ease-in-out,
		background-color .2s ease-in-out,
		box-shadow .2s ease-in-out,
		transform .2s ease-in-out;
}
a:hover:active {
	transition: none;
}
a:visited {
	color: var(--c-text);
}

blockquote {
	margin-left: clamp(1.5rem, calc((100% - 24em) / 6), 3rem);
	margin-right: clamp(1.5rem, calc((100% - 24em) / 6), 3rem);
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}
blockquote em {
/*	hyphens: none; */
	white-space: nowrap;
}
blockquote em i {
	font-style: normal;
}

cite {
  font-style: italic;
}
code {
	font-family: "Linux Libertine Mono", monospace;
}
span.smallcaps {
	font-variant-caps: all-small-caps;
	font-synthesis: none;
}
span.title {
}
span.nobreak {
	white-space: nowrap;
}
span.arrow {
	color: var(--c-cont);
}

.breadcrumbs {
	font-size: 80%;
}
.breadcrumbs ul {
	padding-left: 0;
}
.breadcrumbs li {
	display: inline-block;
	margin-left: 0;
	margin-bottom: 0;
	text-indent: 0;
}
.breadcrumbs li::before {
  content: none;
  padding-right: 0;
}
.breadcrumbs li::after {
	color: var(--c-cont);
	content: "  » ";
}
.breadcrumbs li:last-child::after {
	content: "";
}

.news-nav {
	margin-top: 2em;
	margin-bottom: 2em;
}

div.breadcrumbs {
	margin-bottom: 0;
}
div.prevnext {
	margin-top: 0;
}
div.breadcrumbs + div.prevnext {
	margin-top: 0;
}
div.prevnext + div.breadcrumbs {
	margin-bottom: 3em;
}
.pieceNav hr,
.newsNav hr {
	width: 100%;
	height: 0.2em;
}

/* for the symbol at the end of a news post */
/*
div.news > p:last-child:after {
  content: "⁂"; 
  margin-left: 0.3333em; 
  display: inline-block;
  position: relative;
	font-family: "game hen games", "Linux Biolinum", sans-serif;
}
*/

/* uncomment this for the feed symbol */
.feed::after {
	font-family: "game hen games";
	content: " \F020";
}

aside {
	margin-bottom: 2rem;
}
.news li p {
	text-indent: 0rem;
}

.empty {
	display: none;
}

.news span.image {
	display: block;
	text-align: center;
	margin: 1.5em 1em;
}
.news span.image a {
	margin: 0;
	padding: 0;
	box-shadow: 0 0.15rem 0.3rem 0 var(--c-shad);
	display: inline-block;
}
.news span.image a:hover {
	box-shadow: 0 0.2rem 0.4rem 0 var(--c-shad);
}
.news span.image a:active {
	box-shadow: 0 0.1rem 0.2rem 0 var(--c-shad);
}
.news span.image img {
	max-width: 100%;
	max-height: 75vh;
	vertical-align: bottom;
}

/* floaty egg effect on hover */
svg .floaty {
	transform: translateY(0%);
	transition:
		transform 1s cubic-bezier(.3333333,4,.5,.2);
}
svg:hover .floaty {
	transform: translateY(-2%);
	transition:
		transform 1s cubic-bezier(.333333,1,.333333,1);
}
svg:active .floaty {
	transform: translateY(2%);
	transition:
		transform 1s cubic-bezier(.333333,1,.333333,1);
}
svg #shadow {
	fill: var(--c-logo-shad);
	opacity: 0.6;
	transition:
		opacity 1s cubic-bezier(.3333333,4,.5,.2);
}
@media (prefers-color-scheme: light) {
	svg #shadow {
		mix-blend-mode: screen;
	}
}
svg:hover #shadow {
	opacity: 0.5;
	transition:
		opacity 1s cubic-bezier(.333333,1,.333333,1);
}
svg:active #shadow {
	opacity: 0.7;
	transition:
		opacity 1s cubic-bezier(.333333,1,.333333,1);
}