/* global CSS variables */
:root {
	--textFontSize: 11pt;
	--headFontSize: 28pt;
	--ipaFontSize:  12pt;
	--monoFontSize: 14pt;
	--shawFontSize: 14pt;
	--textFontFamily: Poppins;
	--headFontFamily: TexGyreHerosCondensed;
	--ipaFontFamily: InterAlia;
	--monoFontFamily: RobotoMono;
	--shawFontFamily: InterAlia;
	--lineHeight: 1.4;
	--wordSpace: 1px;
}

html, body {
	min-height: 100vh;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* ---------- website layout (header + main + footer) ---------- */
header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	/*height:48px;*/
	background-color: #6A5ACD; /*slateblue*/
	font-weight: bold;
	z-index:1;
}
div.hdr {
	display:flex;
	gap: 1.5rem;
}
div.hdr > * {
	/*border: 3px solid lime;*/
	color: white;
}
/*
             ┌────────────────┬──────┬─────────┬─────┐
             │ NeilRaiden.com │   ⚙  │         │  ☰  │
             ├────────────────┼──────┼─────────┼─────┤
class:         hlogo           hsetup  hspacer  hmenu
class:hover
pressed:                       hspres           hmpres
*/
.hlogo {
	flex-basis: 14ch;
	padding: 4px 12px;
	font-size:20px;
}
.hsetup {
	padding: 0px 12px;
	font-size: 24px;
}
.hspacer {
	flex-grow:1; /* this will "float:right" the elements to the right of spacer */
}
.hmenu {
	padding: 0px 12px;
	font-size: 24px;
	/*float: right;*/
}
.hspres, .hmpres {
	padding: 0px 12px;
	font-size: 24px;
	background-color: lavender;
	color: black;
}
.hsetup:hover, .hmenu:hover {
	color: black;
	background-color: white;
}

/* --- main body for articles, etc --- */
main {
	/*display: flex; * /
	position: relative;  */
	/*margin-top: 150px; */
	/*top: 150px; */
	padding-top: 48px; /* to compensate for header */
	padding-left:5px;
	left: 0px;
	margin: 0;
	width: 96%;
	z-index: 2; 
	/*padding: 1px 6px; /* T-R-B-L */
}
footer {
	/*position: fixed;
	left: 0;
	bottom: 0; */
	width: 100%;
	background-color: #6A5ACD; /*slateblue*/
	background: #6A5ACD; /*slateblue*/
	text-align: center;
	height: 36px;
}
div.ftr {
	display:flex;
	align-items:center; /* for "display:flex;" */
	/*vertical-align: middle; / * only in "display:table-cell;"*/
	/*gap: 1.5rem;*/
}
div.ftr > * {
	/*border: 3px solid lime;*/
	color: white;
}
div.ftrcopy {
	/*flex-basis: 14ch;*/
	flex-grow:1;
	text-align: center;
	font-size: 10px;
}
div.ftrtotop {
	padding: 0px 12px;
	font-size: 24px;
	/*float: right;*/
}
div.ftrtotop:hover {
	color: black;
	background-color: white;
}

/* ---------- home & hamburger button/icon ---------- */
header button {
	float: left;
	display: inline-block;
	border: none;
	margin: 0;
	height: 48px;
	padding: 2px 12px; /*top & bottom = 2 - right & left = 12 */
	/*color: white;*/
	background-color: #6A5ACD; /*slateblue*/
	font-family: var(--headFontFamily);
	line-height: 2;
	text-decoration: none;
	text-align: center;
	/*vertical-align: middle;*/
	font-size: 20px;
	font-weight: bold;
}
header button:hover {
	/*color: black;*/
	background-color: silver; /* #c0c0c0; */
}

/*-------------------- footer-------------------- */
footer p.copy {
	display: inline-block;
	font-size: 12px;
	padding: 6px 19px;
	margin: 0px;
	/*height: 26px;*/
}
footer div.button {
	float: right;
	display: inline-block;
	border: none;
	color: black;
	background-color: #6A5ACD; /*slateblue*/
	text-decoration: none;
	font-size: 24px;
	font-weight: bold;
	padding: 0px 16px; /* top & bottom = 2 - right&left = 12 */
	margin: 0px;
}
footer div.button:hover {
	background-color: silver;
	color: black;
}

/* ---------- navigation menu - default: hidden ---------- */
nav {
/*	position: relative; */
	position: fixed; 
	top:48px;
	width: 100%;
	background-color: #444;
	font-weight: bold;
	z-index:1;
}
nav #menuLinks {
	display: none;
}
/* color of the bullets in the menu UL list */
nav #menuLinks ul li::marker {
	color: blue;
}
nav ul {
	padding: 0% 5% 0% 5%;
}
nav li a {
	display: block;
	color: white;
	margin: 3px 20px 3px 0px; /* top right bottom left */
	padding: 12px 12px;
	text-decoration: none;
	font-size: 14pt;
}
/* grey background color on hover */
nav a:hover {
	background-color: silver;
	color: black;
}

/* ---------- setup page (font size, etc) ---------- */
#pageSetup {
	display: none;  /* default = hidden */
	position: fixed;
	z-index: 1;
	top: 48px;
	left: 0px;
	margin: auto;
	padding: 1px;
}
table.pgSetupTb {
	background-color: white;
}
table.pgSetupTb td {
	color: black;
	background-color: lavender;
	border-collapse: collapse;
}

/* grid container for styles dialog - not used anymore - switched to <table>*/
.grid-container {
	display: grid;
	width: 420px;
	grid-template-columns: auto auto auto auto;
	gap: 1px;
	/*background-color: gray; */
	/*background-color: dodgerblue;*/
	padding: 1px 1px;
	align-items: center;
}
/* grid element styles */
.grid-container > div {
	background-color: #f1f1f1;
	color: #000;
	padding: 0px 0px;
	text-align: center;
	line-height: 1.5;
	font-family:NotoSans;
	/*font-weight: bold; */
	/* font-size: 12pt; */
	font-size:1em; 
}
/*
.grid-container > div.txt {
	line-height: 1.8;
}
*/
.grid-container > div.yel { background-color: yellow; }
.grid-container > div.blu { background-color: mediumslateblue; }
.grid-container > div.lim { background-color: lime; }
.grid-container > div.sil { background-color: silver; }
/* CornflowerBlue #6495ED */
/* buttons for changing font size, line size, etc */
button.pgSetup {
	display: inline-block;
	padding: 0px 10px 0px 10px;
	margin:0;
	/*width: 32px;*/
	color: black;
	font-weight: bold;
	font-size: 1em;
	text-align: center;
	word-spacing: 10px;
	border: 1px solid red;
}

/* ---------- splash screen ---------- */
#splash {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content:center;
	width: 100%;
}
#splash p {
	display: block;
	position: relative;
}

/* ---------- main page setup ---------- */
main button.icon {
	display: inline-block;
	float: left;
	border: none;
	color: black;
	background-color: white;
	text-decoration: none;
	font-size: 28px;
	font-weight: bold;
}
main button:hover {
	background-color: #eef;
	color: blue;
}

/* ---------- fonts size, line spacing, word spacing ---------- */
/*body, a, div, ul, li, p, i, b { */
body {
	font-family:  var(--textFontFamily);
	font-size:    var(--textFontSize);
	line-height:  var(--lineHeight);
	word-spacing: var(--wordSpace);
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--headFontFamily);
	font-weight: bold;
	margin-top:  20px;
	margin-bottom: 10px;
}
/* old 
h1 { font-size: var(--fontSizeHead); }
h2 { font-size: calc(var(--fontSizeHead) / 1.3 ); }
h3 { font-size: calc(var(--fontSizeHead) / 1.3 / 1.3 ); }
h4 { font-size: calc(var(--fontSizeHead) / 1.3 / 1.3 / 1.2 ); }
h5 { font-size: calc(var(--fontSizeHead) / 1.3 / 1.3 / 1.2 / 1.2 ); }
h6 { font-size: calc(var(--fontSizeHead) / 1.3 / 1.3 / 1.2 / 1.2 / 1.1 ); }
*/

h1 { font-size: calc(var(--textFontSize) * 1.8 ); }
h2 { font-size: calc(var(--textFontSize) * 1.6 ); }
h3 { font-size: calc(var(--textFontSize) * 1.4 ); }
h4 { font-size: calc(var(--textFontSize) * 1.2 ); }
h5 { font-size: calc(var(--textFontSize) * 1.1 ); }
h6 { font-size:      var(--textFontSize); }

h3:target {
	color: blue;
	background: Indigo;
}

/* ---------- other styles ---------- */
/* to use: 
  <span class="ipa">/ðɪs ɪz ən aɪ-piː-eɪ ɪɡzæmpəl/</span> */   
.ipa { 
	/* font-size: 0.8em; */
	font-family: var(--ipaFontFamily);
	font-size: var(--ipaFontSize);
	color: black;
}
/* --- select does not allow vertical-align ---- */
select {
	font-size: 1em;
	/* padding-top:4px;*/ 
	vertical-align: middle;
}

/* ---------- flexbox ---------- */
.flex-container {
	margin-left: auto;
	margin-right: auto; 
	display:flex;
	flex-direction: column;
	width: fit-content;
/*	justify-content: center;*/ 
/*	border: 1px solid red; */
}
.flexline {
	display:flex;
	flex-direction: row; /*default anyway*/
	flex-wrap: wrap;     /*default is nowrap*/
}
.flexline > div {
	margin-right:4px;
	padding-right:2px;
	text-align: center;
}