:root {
	/* colors */
	--c0: #222;
	--c1: #555;
	--c2: #999;
	--c3: #eee;
	--c0: #046;
	--c1: #086;
	--c2: #bb4;
	--c3: #eff;
	--bgcolor:			var(--c0);
	--bgtextcol:		var(--c2);
	--panebgcol:		var(--c3);
	--panetextcol:		var(--c0);
	--paneshadowcol:	var(--c2);
	--panelinkcol:		var(--c1);
	--panelinkactive:	var(--c2);
	--panestrongcol:	var(--c3);
	
	--borderWidth: .2em;
	
	--paneWidth: 35em;
}

@property --breakWidth {
  syntax: "<length>";
  inherits: true;
  initial-value: 40em;
}

@font-face {
  font-family: Gaslight;
  src: url(fonts/gaslight.ttf);
}
@font-face {
  font-family: Dreamcast;
  src: url(fonts/NiseSegaDreamcast.ttf);
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url(fonts/AtkinsonHyperlegible-Regular.ttf);
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url(fonts/AtkinsonHyperlegible-Bold.ttf);
  font-weight: bold;
}/*
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url(fonts/AtkinsonHyperlegible-Italic.ttf);
  font-style: italic;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url(fonts/AtkinsonHyperlegible-BoldItalic.ttf);
  font-weight: bolder;
  font-style: italic;
}/**/

* {
  box-sizing: border-box;
  font-family: Atkinson Hyperlegible, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  image-rendering: pixelated;
}

body {
	background-color: var(--bgcolor);
	color: var(--bgtextcol);
	font-family: 'Times New Roman', serif;
}

@media screen and (max-width: 45em) {
  body {
    /*background-color: navy;/**/
  }
}

a {
	color: var(--panebgcol);
}

header {
	margin: 0;
}

nav {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	
	margin: 0;
	line-height: 0;
	min-height: 2em;
	
	background-color: var(--c1);
	color: var(--c3);
}
nav a {
	color: var(--c3);
	text-decoration: none;
	margin: 1em;
	white-space: nowrap;
}
nav a:hover {
	text-decoration: underline solid var(--c3) 1px;
}
nav a:before {
  content: '\22C4  ';
}

header h1, header h2 {
	display: block;
	float: center;
	clear: both;
	margin: .25em;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	color: var(--bgtextcol);
	font-size: 1.5em;
	line-height: 1.5em;
}

header h1 {
	font-size: 2em;
	letter-spacing: 1em;
	text-shadow: .5em .5em var(--c1);
	font-family: Dreamcast, sans-serif;
	font-variant-caps: titling-caps;/**/
}

header h2 {
	float: center;
	clear: both;
	font-size: .75em;
	letter-spacing: 0;
	font-style: italic;
}

.floatButtons {
	display: flex;
	float: right;
	clear: none;
	
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
	
	min-width: 3em;
	min-height: 3em;
	
	border-radius: 0em;
	/*background-color: var(--c2);/**/
	margin-bottom: 1em;
}
.floatButtons > a {
	display: flex;
	justify-content: center;
	
	aspect-ratio: 1;
	width: 3em;
	overflow: hidden;
	border-radius: 3em;
	
	margin: .5em;
	margin-right: 1em;
	text-align: center;
	vertical-align: middle;
	border: var(--borderWidth) hidden var(--paneshadowcol);
	align-items: center;
	
	background-color: var(--c3);
	box-shadow: .5em .5em var(--c2);
	color: var(--c1);
}
.floatButtons > a > img {
	display: inline;
	width: 2em;
	height: 2em;
}

@media screen and (max-width: 45em) {
	.floatButtons {
		float: center;
		flex-direction: row;
		width: 100%;
	}
	.floatButtons > a {
		margin: 0;
	}
}

article {
	display: block;
	float: none;
	clear: none;
	margin: 1em;
	margin-bottom: 2em;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--paneWidth);
	min-height: 20em;
	
	padding: 1em;
	border: var(--borderWidth) hidden var(--paneshadowcol);
	border-radius: 1em;
	background-color: var(--panebgcol);
	box-shadow: 1em 1em var(--paneshadowcol);
	color: var(--panetextcol);
	text-align: left;
	line-height: 1.5em;
}

@media screen and (max-width: 45em) {
  article {
    clear: both;
  }
}

article h1, article h2 {
	font-family: Dreamcast, sans-serif;
}

article p {
	text-align: justify;
}
article p.ps {
	font-size: .75em;
}

article strong {
	color: var(--panestrongcol);
	text-shadow:
	 1px  0px var(--panetextcol),
	 1px  1px var(--panetextcol),
	 0px  1px var(--panetextcol),
	-1px  1px var(--panetextcol),
	-1px  0px var(--panetextcol),
	-1px -1px var(--panetextcol),
	 0px -1px var(--panetextcol),
	 1px -1px var(--panetextcol);
}

article a {
	color: var(--panelinkcol);
	text-decoration: underline solid var(--panelinkcol) 1px;
}
article a:hover {
	color: var(--panelinkactive);
	text-decoration: underline solid var(--panelinkactive) 1px;
}
article a:active {
	color: var(--panelinkactive);
	text-decoration: underline solid var(--panelinkactive) 1px;
}

article img {
	margin: 0;
}
article img.floatRight {
	float: right;
	margin-left: 1em;
}

article .question {
	font-style: italic;
}
article .question:before {
	content: "Q: ";
	margin-left: 1em;
}
article .answer {
	margin-left: 3em;
	margin-bottom: 1em;
}
article .answer:before {
	content: "A: ";
	font-style: italic;
}

footer {
	
}

footer h1 {
	display: block;
	clear: both;
	max-width: var(--paneWidth);
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: 1.5em;
	letter-spacing: .5em;
	color: var(--c1);
}

.funnyButtons {
	display: flex;
	float: none;
	clear: none;
	margin: 1em;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--paneWidth);
	
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	
	padding: 0;
	
	/*background-color: var(--c2);/**/
	color: var(--bgtextcol);
}

.funnyButtons a {
	display: block;
	float: left;
	/*background-color: var(--c3);/**/
	line-height: 0;
}