@font-face {
	font-family: champ;
	src: url('images/style/font-champ-bold.ttf') format('truetype');
	font-display: swap;
}
/* @font-face {
	font-family: raleway;
	src: url('images/style/font-raleway-regular.ttf') format('truetype');
	font-display: swap;
} */
/* 0 red, 30 orange, 60 yellow, 90 lime, 120 green, 150 turquoise, 180 cyan, 210 cobalt, 240 blue, 270 violet, 300 magenta, 330 crimson */


:root {
  /* https://contrast-ratio.com */

--txtClr: #333;
--bgClr: hsl(0, 0%, 100%);
--bg: linear-gradient(to right, hsl(214, 100%, 90%) 0%, hsl(214, 100%, 98%) 20%, hsl(214, 100%, 98%) 50%, hsl(214, 100%, 98%) 80%, hsl(214, 100%, 90%) 100%);

--a0Clr: hsl(60, 100%, 97%);    /* v v light yellow */   
--a1Clr: hsl(50, 100%, 95%);    /* v light yellow */   
--a2Clr: hsl(50, 100%, 85%);    /* light yellow  */ 
--a3Clr: hsl(45, 100%, 77%);    /* sand */ 
--a4Clr: hsl(50, 100%, 28%);    /* gold (text) */

--b0Clr: hsl(213, 100%, 96%);   /* v v light  blue */ 
--b1Clr: hsl(214, 100%, 93%);   /* v light blue */ 
--b2Clr: hsl(214, 100%, 84%);   /* light blue */ 
--b3Clr: hsl(214, 65%, 43%);    /* pretty blue (text) */
--b4Clr: hsl(214, 100%, 25%);   /* dark blue (text) */

--o1Clr:  hsl(30, 100%, 45%);   /* orange (text) https://contrast-ratio.com contrast min 3 (large text) 4.5 (normal text) to b1Clr */
/*--o1Clr: hsl(36, 80%, 40%); hsl(60, 80%, 30%); hsl(30, 100%, 41%) orange  hsl(100, 100%, 30%) green */
--r1Clr: hsl(0, 100%, 60%);    /* red (text) */

--hdrImg: url(images/hdr/hdr-main-lite.svg);
--hdrAdvImg: url(images/hdr/hdr-adv-lite.svg);
--h1Shadow2: 2px 2px 2px hsl(0, 0%, 100%), inset 1px 1px 1px hsl(24, 100%, 100%);
--h1Shadow: 1px 1px 1px hsl(0, 0%, 100%), -1px -1px 1px hsl(0, 0%, 100%);

--trans: all linear 0.5s; 

--boldWt: bold;
--boldPct: 100%;
}

:root[theme='dark'] {
--txtClr: hsl(0, 0%, 90%);
--bgClr: hsla(214, 20%, 10%, 100%);
--bg: linear-gradient(to right, hsl(214, 50%, 10%) 0%, hsl(214, 20%, 9%) 20%, hsl(214, 20%, 9%) 50%, hsl(214, 20%, 9%) 80%, hsl(214, 50%, 10%) 100%);

--a0Clr: hsl(220, 50%, 20%);    /* dark blue is much nicer than dark yellow */   
--a1Clr: hsl(220, 65%, 26%);    /*  dark blue*/     
--a2Clr: hsl(220, 50%, 30%);    /*  */ 
--a3Clr: hsl(50, 90%, 85%);    /* sand */ 
--a4Clr: hsl(50, 100%, 90%);    /* v light yellow (text) */

--b0Clr: hsl(210, 80%, 9%);   /* dk blue */ 
--b1Clr: hsl(210, 80%, 12%);    /* dk blue */ 
--b2Clr: hsl(210, 100%, 25%);    /* med blue */ 

--b3Clr: hsl(214, 100%, 84%);   /* light blue (text) */
--b4Clr: hsl(214, 100%, 94%);   /* v light blue (text) */

--o1Clr: hsl(50, 100%, 50%);    /* gold (orange) */
--r1Clr: hsl(0, 100%, 65%);    /* red (text) */

--hdrImg: url(images/hdr/hdr-main-dark.svg);
--hdrAdvImg: url(images/hdr/hdr-adv-dark.svg);
--h1Shadow: 2px 2px 1px var(--bgClr), -2px 2px 1px var(--bgClr), -2px -2px 1px var(--bgClr), 2px -2px 1px var(--bgClr);

--trans: all linear 0.5s; 

--boldWt: 900;
--boldPct: 106%;
}

.img, .imgBg { border: 3px solid aqua; border-radius: 3px; background-color: aqua; }
/* algebra/binomial-theorem.html */

/* fit (particularly an image) into the enclosing div (which has position: relative) */
.fit {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;}
/* geometry/regular-polyhedra.html */

b { font-weight: var(--boldWt); font-size: var(--boldPct); }

/* themed bgs used in: quadrilaterals.html numbers/golden-ratio.html cross-number.js et al */
	.bg {background-color:var(--bgClr);}
	.bga1 {background-color:var(--a1Clr);}
	.bga2 {background-color:var(--a2Clr);}
	.bgb1 {background-color:var(--b1Clr);}
	.bgb2 {background-color:var(--b2Clr);}
	.fga3 {color:var(--a3Clr);}
	.fga4 {color:var(--a4Clr);}
	.fgb3 {color:var(--b3Clr);}
	.fgb4 {color:var(--b4Clr);}
	.fgo1 {color:var(--o1Clr);}
	.fgr1 {color:var(--r1Clr);}

/* svg blue background: 6666ff1a hsla(240,100%,70%,10%)
 
good cross-theme setting:
   border: 2px solid hsla(240,100%,70%,10%);
   background-color: hsla(240,100%,70%,10%);
 
 * */

@media all {
	body { margin: 0; padding: 0; background:var(--bg); color:var(--txtClr); }
	html { font-size: 16px; font-family: Verdana, Arial, Tahoma, sans-serif;  line-height:1.52; }
	.mid { max-width: 800px;  margin:auto; background: none; }

	img { max-width: 100%; min-width: 8px; height:auto; }

	
	article { margin-left:2px; }  /* so text is not hard against left edge */
	
	
	h1 { margin: 0 0 1.3rem 0; font: normal 2.6rem/3rem champ, Verdana, Arial; text-align: center; color: var(--b3Clr); text-shadow: var(--h1Shadow); }
	h2 { margin: 3.5rem 0 0.8rem 0; font: 2rem champ, Verdana; color: var(--r1Clr); }
	h3 { margin: 2.1rem 0 0.6rem 0; font-size: 1.3rem; font-weight: normal; color: var(--b3Clr); }
	h4 { margin: 1.4rem 0 0.6rem 0; font-size: 1.2rem; font-weight: normal; color: var(--o1Clr); font-variant: small-caps; }
	
	
	h1 + h2 {margin-top: 2rem;}  /* h2 directly following h1 can have a smaller gap */
	h1 + h3 {margin-top: 1rem;}  
	h2 + h3 {margin-top: 1rem;}

	textarea {color: var(--b3Clr); background-color:  var(--b1Clr); padding:5px; border-radius:10px; font-size: 1.1rem; font-family: Verdana, Arial, Tahoma, sans-serif;}

/* General */
	.tiny { font-size: 0.8rem; color: var(--b3Clr); }
	.small { font-size: 0.9rem; color: var(--b3Clr); }
	.large { font-size: 1.1rem; color: var(--b3Clr); }
	.larger { font-size: 1.2rem; color: var(--o1Clr); transition: var(--trans);}
	.largest { font-size: 1.6rem; color: var(--a4Clr); }
  .huge { font-size: 1.6rem; font-weight: bold; color: var(--b3Clr);}

	.min {min-width:170px; overflow: auto;}
  .wd2 {
    display: inline-block;
    width: 2.5rem;
    text-align: center;
  }
	.gap {height: 14px;}


	p { min-width:10ch; max-width: 68ch; padding: 0.25rem 0; overflow: auto; }  /* padding fixes strange vert scrollbars with overflow auto */

/* links within p, give space for clicking */
	p a {
		display: inline-block; padding: 0.1rem 0.3rem; border: 1px solid var(--b2Clr);
		border-radius: 0.6rem; background-color: var(--a0Clr);
	}
	p a:hover {
		border: 1px solid var(--a3Clr); background-color: var(--a2Clr); cursor: pointer;
	}

	a:link { color: var(--b4Clr); }
	a:visited { color: var(--b3Clr); }	
	
	.nobr	{ white-space:nowrap; }

	.center, .centerfull {
		margin-left: auto; margin-right: auto; text-align: center;
	}
	.full {
		overflow-x: scroll; overflow-y: hidden; width: 96vw;
		margin-left: -48vw; margin-right: -48vw; position: relative;
		left: 50%; right: 50%; box-shadow: 0 0 3px 2px var(--b2Clr);
	}
	.right {text-align: right;}

	/* example  */
	.example {
		margin: 1.3rem 0.6rem 1.9rem 3rem; padding: 0.3rem 0.6rem 0.6rem 0.6rem;
		background-color: var(--b1Clr); border: 2px solid var(--bgClr); border-radius: 0.6rem;
		box-shadow: 0.2rem 0.2rem 0.3rem hsl(214, 100%, 20%); overflow: hidden;
	}
	.example h3, .example .h3 {
		font-size: 1.1rem; margin: 0.1rem -0.1rem 0.1rem -0.1rem; padding: 0.1rem 0.3rem;
		background: var(--a1Clr); border-radius: 0.5rem; color: var(--b4Clr);
	}
	
	.center80 {
		max-width: 66ch; margin: 1.3rem auto 0.8rem auto; border: 0.15rem solid var(--b2Clr); border-radius: 1.9rem; padding: 0.5rem;
		background: linear-gradient(170deg, var(--b0Clr) 0%, var(--b1Clr) 90px, var(--b1Clr) calc(100% - 90px), var(--b2Clr) 100%);
	}
	.center80 h3 { margin: 0.3rem 0 1.3rem 0.6rem; color: var(--b3Clr); }
	.center80 p { margin: 0.6rem 0 0.5rem 0; }
	
	.indent50px { margin-left: 2rem; }
	
	.mono { font-family: "Courier New", Courier, monospace; font-size: 20px; line-height: 24px; }
	
	.times { font: bold 130% "Times New Roman", serif; }
	
	.head {
		margin: 0.2rem 0 0.6rem 0; border: 2px solid var(--a2Clr); border-radius: 25px; padding: 0.5rem;
		font: bold 1.1rem Verdana; text-align: center;
		color: var(--fgClr); background: var(--a1Clr) 0%;
	}		
	
  p+ul {  margin-top: -1rem;}
	li { color: var(--b4Clr); list-style-type: disc;  padding-top: 0.5rem;}
	li:hover { color: var(--b3Clr); }


	
	
	ul ul {   /* reduce indent for nested ul */
		margin-left: -9px;
	}
	
	ul p {
		text-indent: 0;/* cancel any text indent */
	}


/* NB: no list-style image, suits some formtting */
ul.large { margin-top: 3px;  margin-left: -10px; }
ul.large > li {
	width: fit-content; margin-top: 9px; border-radius: 10px; padding: 2px 12px 4px 9px; 
	font-size: 1rem; background-color: var(--b1Clr); 
	color: var(--b4Clr); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
	overflow: hidden; list-style-type: none; }
ul.large > li:hover { background-color: var(--a1Clr); }

ul.larger { margin-top: 3px; }
ul.larger > li {
	margin-top: 10px; border-radius: 10px; padding: 10px; 
	font-size: 1rem; background-color: var(--b1Clr); 
	color: var(--b4Clr); 
	list-style-image: url('images/style/disc.svg'); }
ul.larger > li:hover { background-color: var(--b2Clr); }

ul.none { text-indent: 1.5rem; }
ul.none li { list-style: none; }


ul.disc { text-indent: -1.5rem; }
ul.disc li { list-style: none; }
ul.disc li::before {
	margin-right: 9px; line-height: 100%; 
	font-size: 140%; 
	color: var(--b2Clr); 
	content: "\25CF"  !important; 
}

ul.dart { text-indent: -1.5rem; }
ul.dart li { list-style: none; }
ul.dart li::before {
	margin-right: 9px; line-height: 90%; 
	font-size: 110%; 
	color: var(--a4Clr); 
	content: "\27A4"  !important; 
}

ul.star { text-indent: -1.5rem; }
ul.star li { list-style: none; }
ul.star li::before {
	margin-right: 9px; line-height: 100%; 
	font-size: 110%; 
	color: var(--a3Clr); 
	content: "\273A"  !important; 
}

/* https://www.toptal.com/designers/htmlarrows/symbols/ heart 2661 2764, gear 2699, tick 2714, star 2605, open star 2729, 8-star 2737 (nice), angle brack: 276F  */
ul.gear { text-indent: -1.5rem; }
ul.gear li { list-style: none; }
ul.gear li::before {
	margin-right: 9px; line-height: 100%; 
	font-size: 130%; 
	color: var(--a3Clr); 
	content: "\2699"  !important; 
}


	/* formatted to here using python css.py  "grouped inline formatting style" layout, borders,  colors, background, shadows */


	/* so  */
	.so { background: url(images/style/so.svg) no-repeat 3rem 25%; padding: 0 0 0.6rem 100px; color: var(--b3Clr); font-size: 1.1rem; }
	p.so { margin:3px; }
	li .so { padding: 0 0 0.6rem 6.6rem; margin-top:4px;}
	.so ul { margin-top: 0.4rem; }
	
	/* tables  */	
	.simple { overflow:auto; }
	.simple table { border-collapse: collapse; background-color: var(--b1Clr); }
	.simple .tbl { background-color: var(--b0Clr); padding-left: 0.4rem; padding-right: 0.4rem; border-radius: 0.3rem;}
	.simple th, .simple td { border: solid 0.1rem var(--bgClr); padding: 0.3rem 0.9rem; }
	.simple th { background-color: var(--b2Clr); }
	
	.beach { overflow:auto; }
	.beach p { background-color: var(--b0Clr); }
	.beach table { border-collapse: collapse; background-color: var(--b0Clr);  }
	.beach th, .beach td { border: solid 0.1rem var(--bgClr);  padding: 0.3rem 0.9rem; color: var(--b4Clr);  }
	.beach th { background-color: var(--a2Clr); color: var(--a4Clr);  }
	
	/* NB: different attempts to have a single background image PLUS a gradient from corner to corner */
	/* history */
	.history {
		min-height:3rem;
		margin: 1.6rem 2rem 1.3rem 2rem;
		padding: 0.6rem 0.8rem 0.7rem 5rem;
		color: var(--txtClr);
		border: 0.2rem solid var(--a1Clr);
		text-indent: 0.6rem;
		border-radius: 0.6rem;
		background: var(--a1Clr) url(images/style/scroll.svg) no-repeat;
		background-position: 0.3rem 0.3rem; 
		box-shadow: inset 0 0 1.1rem 0  var(--a2Clr); 
	}  
	.history p { margin: 0.5rem 0 0.3rem 0; }
	
  /* words */
  .words {
		margin: 0.9rem 2rem 1.6rem 2rem;
		padding: 0.3rem 0.3rem 0.4rem 4rem;
    background: var(--b1Clr) url(images/style/word.svg) no-repeat;
    background-position: 0.3rem 0.2rem;
		background-repeat: no-repeat;
		border: 0.1rem solid var(--b2Clr);
		border-radius: 0.6rem; 
		min-height: 2.1rem;
	}
	.words p { margin: 0.5rem 0 0.3rem 0; }

	  	/* info */
	.info { 
		margin: 0.9rem 2rem 1.6rem 2rem;
	  padding: 0.6rem 0.3rem 0.7rem 4rem; 
		background-image: url(images/style/info.svg), linear-gradient(170deg, var(--bgClr) 0%, var(--b2Clr) 100%);
		background-position: 9px 0.4rem;
		background-repeat: no-repeat;
		border: 0.1rem solid var(--b2Clr); 
		border-radius: 1.9rem;
		box-shadow: inset 0 0 0.9rem 0.2rem  var(--b2Clr); 
		min-height: 2.3rem;
	}
		.info p { margin: 0.5rem 0 0.3rem 0; }

	  /* fun */
  /*.fun {margin: 0.6rem 1.3rem 0.6rem 1.3rem; padding: 0.3rem 1.4rem 0.1rem 26px; 
	border: 0.1rem solid var(--a2Clr); border-left: 0.4rem solid var(--a2Clr); border-right: 0.4rem solid var(--a2Clr); border-radius: 2.1rem;
	background: var(--a1Clr); box-shadow: inset 0 0 0.6rem var(--a4Clr); }      handsome!*/
  /*.fun {margin: 0.6rem 1.3rem 0.6rem 1.3rem; padding: 0.3rem 1.4rem 0.1rem 26px; 
	border: 0.3rem solid var(--a2Clr);border-radius: 2.1rem; box-shadow: inset 0 0 9px var(--a4Clr);
	background: var(--a1Clr);  }      handsome!*/
/*.fun {margin: 0.6rem 1.3rem 0.6rem 1.3rem; padding: 0.3rem 1.4rem 0.1rem 26px; border-radius: 2.1rem; 
	border-top: 0.2rem dotted var(--a3Clr);
	border-right: 0.2rem dotted var(--a3Clr);
	border-bottom: 0.2rem dotted var(--a3Clr);
	border-left: 0.2rem dotted var(--a3Clr);
	background: var(--a0Clr);  } */
	
	.fun {
		padding: 0.2rem 1.3rem 0 1.4rem;
		margin: 1rem;
		border-radius: 3rem;
		border: 2px solid var(--bgClr);
		box-shadow: 1rem 1rem 1rem -1rem var(--b3Clr), /* dn rt */
		1rem -1rem 1rem -1rem var(--a3Clr), /* up rt */
		-1rem 1rem 1rem -1rem var(--a3Clr), /* dn lt */
		-1rem -1rem 1rem -1rem var(--a3Clr);    /* up lt */
		background: linear-gradient(170deg, var(--bgClr) 0%, var(--bgClr) 50%, var(--a0Clr) 100%);
	}
	.fun h3 { margin-top: 0.9rem;}
	p.fun {padding: 0.6rem 1.3rem 0.6rem 1.4rem; }

  /* def */
	/*.def {margin: 0.6rem 0.9rem 0.6rem 0.9rem; padding: 0.3rem 1.1rem 0.3rem 1.1rem; border-radius: 1.9rem; background:var(--a0Clr); 
	border: 1px solid var(--a2Clr);   box-shadow: inset 0 0 0.4rem var(--a2Clr);} */
	
	.def {margin: 1.6rem 1rem 1.3rem 1rem; padding: 0.3rem 1.1rem 0.3rem 1.1rem; border-radius: 1rem; 	
		background: linear-gradient(160deg, var(--a0Clr) 0%, var(--a0Clr) 100%);
		border: 2px solid var(--bgClr); box-shadow: 0 0 0.9rem var(--a2Clr);
/*		content-visibility: auto;
		contain-intrinsic-size: 1px 200px; */
	}
	.def h3 {margin-top: 1rem;}	

	
/*	footnote or any note really 
		.note {margin: 1.6rem 1rem 1.3rem 1rem; padding: 0.3rem 1.1rem 0.3rem 1.1rem; border-radius: 1rem; 	
		background: linear-gradient(160deg, var(--a0Clr) 0%, var(--a2Clr) 100%);
		border: 2px solid var(--bgClr); box-shadow: 0 0 0.9rem var(--a2Clr);
	}
	.note h3 {margin-top: 1rem;}
*/

	.note { margin: 1.3rem auto 0.8rem auto; padding: 0.5rem; 
		background: linear-gradient(170deg, var(--b0Clr) 0%, var(--b1Clr) 90px, var(--b1Clr) calc(100% - 90px), var(--b2Clr) 100%);
		border: 0.15rem solid   var(--b2Clr); border-radius: 1.9rem;
	}
	.note h3 { margin: 0.3rem 0 1.3rem 0.6rem; color: var(--b3Clr); }
	.note p { margin: 0.6rem 0 0.5rem 0; }


	   /* hide */
	.hide { color: var(--a2Clr); background-color: var(--a2Clr);  border: 1px solid var(--a3Clr); padding: 3px 15px 3px 15px; }
  .hide:hover { color: var(--txtClr); background-color: var(--a1Clr); border: 1px solid var(--a2Clr); }

	.dotpoint { margin: 0 0 0.6rem 0.2rem; padding: 0.3rem 0.6rem 0.3rem 1.1rem; color: var(--b4Clr);
		background:  linear-gradient(-5deg, var(--a0Clr) 0%, var(--a1Clr) 100%); font-size: 1rem;
		/*background-color: var(--a1Clr);*/
    /*background-image: url(images/style/dotpoint.svg); background-repeat: no-repeat;  background-position: left center;*/
		border: 2px solid var(--a2Clr);  border-radius: 25px;
    border-left: 9px solid var(--b2Clr);  
	}
  .dotpoint p { font-size: 1rem; }
  .dotpoint h3 { margin-top: 1rem; }
 
  
	/* questions */
	.questions { min-height:3rem; margin: 2rem 0.3rem 2rem 0.3rem; padding: 0.6rem 0.3rem 0.7rem 118px; border: 1px solid var(--b3Clr); 
		border-radius: 0.6rem; font-size: 1.1rem; 
		background-image: url(images/style/questions.svg), linear-gradient(120deg, var(--a0Clr) 0%, var(--a1Clr) 100%); background-repeat: no-repeat;
	}  
	.questionshuh { min-height: 3rem; margin: 2rem 2rem 2rem 2rem; padding: 0.6rem 0.3rem 0.7rem 7.4rem; border: 1px solid var(--b3Clr); border-radius: 0.6rem; font-size: 1.1rem; background: var(--b0Clr) url(images/style/questions.svg) no-repeat; }  /* #DFFFE1*/
  .questions a { padding: 5px 3px 5px 3px; font-weight: normal; font-size: 1.1rem; }

	
	/* activity */
	.activity {
		margin: 20px 0; padding: 0.6rem 0.3rem 0.7rem 120px; border: 1px solid var(--b3Clr); border-radius: 0.6rem; background: var(--b1Clr) url(images/style/activity-div.svg) no-repeat;
		font-size: 1.1rem;
	}
	.activity a { padding: 0; font-size: 1.1rem; font-weight: normal; }
	
	
 /* related */
	.rel-title { font-weight: bold; font-size: 1.1rem;  }
	.related { min-height: 3.1rem; border-top: 0.2rem solid  var(--b2Clr); border-bottom: 0.2rem solid var(--b2Clr); 
		margin-top: 0.6rem; margin-bottom: 0.6rem; padding-top: 0.8rem; padding-bottom: 9px;  
		font-weight: bold; font-size: 1.1rem; 	
		background-image: url(images/style/related.svg), linear-gradient(120deg, var(--b0Clr) 0%, var(--b1Clr) 100%);
		background-repeat: no-repeat;	
		clear: none; 
	}
	.related a { display: list-item; margin-top: 0.1rem; margin-left: 160px; font-weight: normal; list-style-type: circle; }	
	
	

	

.shadow {
	/* https://neumorphism.io/#d0cbf5 */
	padding: 1rem 1.5rem;
	border-radius: 2.1rem;
	background: var(--b2Clr);
	box-shadow: inset 0.3rem 0.3rem 0.6rem var(--b0Clr), inset -0.3rem -0.3rem 0.6rem var(--b3Clr);
		/* x y blur spread inset color 
		0.5rem 0.5rem 0.9rem var(--b1Clr),
		0.5rem -0.5rem 0.9rem var(--b0Clr)*/
	}

	
	.video { float:left;  min-width:80px; min-height:37px; margin-right:-80px; font-size: 12px; }

	/* in-line "table" fractions */
	.intbl { text-indent:0; display: inline-table; text-align: center; vertical-align: 40%; margin: 0 0.1rem 0 0.1rem; border-collapse: collapse; }
	.intbl em { display: table-row; text-align: center; border-bottom: 0.12ch solid; font-size: 93%; font-style: inherit; line-height: 130%;}
	.intbl strong { display: table-row; text-align: center; font-weight: inherit; font-size: 93%; line-height: 120%; }
	.intbl em:before, .intbl em:after, .intbl strong:before, .intbl strong:after { content: "\2005";	}  /* 2005=unicode 1/4 em space */

	.hilite { background-color: var(--a2Clr); padding-left: 0.3rem; padding-right: 0.3rem;  }
	
	sup .intbl em { line-height: 100%; }
	sup .intbl strong { line-height: 100%; }


	/**** LAYOUTS ****/
	
	.flexx {display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.6rem; }
	.flexx .col {  text-align: center;   }

	/* deprecate and repurpose */
	.flexy {display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.3rem; margin-bottom: 0.6rem; }
	.flexy .col {  text-align: center;   }
	.flexy .rt {  text-align: left; max-width: 60ch;  }

	.box {
	display: inline-block;
	text-align: center;
	vertical-align:top;
 	margin: 0 10px 20px 0;
/* 	border: 1px solid blue; */
}
.box:not(:last-child) {
  margin-bottom: 2%;
}
.box + .box {
  margin-left: 2%;
}

	/* "table"-like features for equations etc calculus/introduction.html */
	.tbl { display: table; table-layout:auto; margin-right: auto; margin-left: auto; border-collapse:separate; border-spacing: 0 0.6rem;
	background: linear-gradient(to bottom right, var(--t0Clr) 0%, var(--t0Clr) 50%, var(--t0Clr) 100%);
	border: 1px solid var(--b0Clr); padding: 0 0.5rem 0 0.5rem; border-radius: 0.6rem;  }
	.tbl .row { display: table-row; height: 1.6rem; }
	.tbl .row .lt,	.tbl .row .left { display: table-cell; text-align: right; padding: 0 0.6rem 0 0; color: var(--a4Clr); font-size: 1.05rem; vertical-align:baseline; }

	.tbl .row .md {display: table-cell; text-align: center; padding: 5px;  white-space: normal;}

	.tbl .row .rt,	.tbl .row .right,	.tbl .row .rtlt,	.tbl .row .rtct,	.tbl .row .rtrt { display: table-cell; padding: 0 0 0 0.4rem; color: var(--b3Clr); font-size: 1.1rem; font-weight: normal;  vertical-align:baseline; white-space: nowrap;}
	.tbl .row .rtlt  { text-align: left;  white-space: normal; }
	.tbl .row .rtct  { text-align: center;  white-space: normal; }
	.tbl .row .rtrt  { text-align: right;  white-space: normal; }

	.tbl .row img {  vertical-align:middle; }
	.tbl .row i { font-size: 0.9rem; color: var(--txtClr); }
	.tbl p { margin: 0.6rem auto 0.6rem auto; color: var(--b3Clr);  }


.two {
  display: grid;
  grid-template-columns: auto auto;
	justify-content: center;
	align-items: end;
	margin:auto;
	width:fit-content;
	row-gap: 10px;
 	background: linear-gradient(to bottom right, var(--b1Clr) 0%, var(--b0Clr) 50%, var(--b1Clr) 100%);
/*  	border: 1px solid var(--b2Clr);  */
	padding: 0.5rem; border-radius: 0.6rem;
}
.two .lt {
	grid-column: 1 / span 1;
  text-align: right; padding: 0 0.7rem 0 0; color: var(--a4Clr); font-size: 1.05rem; vertical-align:baseline; align-self:start;
/* border: 1px solid blue; */
}
.two .rt {
	grid-column: 2 / span 1;
/* border: 1px solid blue; */
  padding: 0 0 0 0.4rem; color: var(--b3Clr); font-size: 1.1rem; font-weight: normal;  vertical-align:baseline; white-space: nowrap;
/* 	justify-self: start; */
}
.two .rt.flow {
    white-space: normal;
}

.two .ct {
	grid-column: 1 / -1;
	text-align: center;
}

/* manually control sup text so it does not push whole line down */
.two .rt sup {
  vertical-align: baseline;
  position: relative;
  top: -0.4rem; /* Adjust the value as needed for alignment */
}

.many {
	display: grid;
	grid-template-columns: repeat(auto-fill, 220px);
	gap: 1rem;
	justify-content: center; /* Centers the grid within the container */
}
.many .ct {
	padding: 0.3rem;
	text-align: center;
}
.many .lt {
	padding: 0.3rem;
	text-align: left;
}


	.floatLt {float:left; margin:0 10px 10px 0;  text-align:center;}
	.floatRt {float:right; margin:0 0 10px 10px; text-align:center;}




/* SNIPPETS best used locally

nice simple table formatting
table {border-spacing: 0px;}
td, th {  border: 1px solid hsla(240,100%,70%,0.3) }
geometry/ellipse-perimeter.html 

.tall {display:inline-block;  margin: -4% 0.1% 4% 0%; transform: scaleY(2.5) translateX(20%);}
geometry/ellipse-perimeter.html

integrals, sums   ...   DEPRECATE use intgl locally instead as each page can have different needs 

.int { font: italic 150% Georgia, Arial; position: relative; top: 1px; padding: 0 1px 0 0.2rem;} 
differential-equations-first-order-linear.html, differential-equations-bernoulli.html, differential-equations-variation-parameters.html

.intgl {...}
numbers/factorial.html calculus/arc-length.html, solids-revolution-disk-washer, solids-revolution-shells.html /algebra/infinite-series.html

.sigma {...}
calculus/fourier-series.html

.limit .lim {...}
numbers/gamma-function.html  calculus/limits-infinity.html  

.choose {...} (n choose r)
combinatorics/combinations-permutations.html, pascals-triangle.html

.nthroot {font-size:75%;display:inline-block; margin-left: -0.5em; transform: translateX(0.8em) translateY(-1em);}  
 algebra/exponent-fractional.html, /numbers/nth-root.html (started)

.mat {...}
/physics/bra-ket-notation.html, /algebra/matrix-inverse.html

.bra {...} .ket {...} .braket {...}
/physics/bra-ket-notation.html

.vertellip {...}  vertical ellipsis
/numbers/nth-root.html 

time-clocks.html, sets/boolean-algebra.html

*/



	.overline { border-top: 0.11rem solid; }

 .bar {
    display: inline-block;
    text-decoration: none;
    position: relative;
  }
 .bar:after {
    content: '';
    display: block;
    width: 100%;
    height: 50%;
    position: absolute;
    top: 0.25rem;
    left: 0;
    border-top: 0.11rem solid;
}

	/* JavaScript */
	.js { position:relative; margin:auto; border: 2px solid var(--b1Clr); border-radius: 10px; }
	.jsCanvas {color: var(--txtClr); background-color:var(--bgClr);}  /* so js can look up theme colors */
	.can {  border-radius:10px; background-color:var(--b0Clr);}   /* when we want a nice border/bg for canvas, such as graphs */
	.pop { padding: 0.4rem; border-radius: 0.5rem; background-color:var(--b2Clr);
		box-shadow: 0.4rem 0.4rem 0.3rem 0 rgba(40,40,40,0.75);
		transition: all linear 0.5s; text-align: center;
	}

	.control {  border-radius:0.6rem; padding: 0.3rem 0.3rem;  transition: all linear 0.3s;
		background: linear-gradient(to bottom right, var(--b0Clr) 0%, var(--b1Clr) 100%);
	}
	.wow { padding: 0.3rem 1.1rem 0.3rem 1.1rem; border-radius: 1rem; 	
		background: linear-gradient(120deg, var(--a0Clr) 0%, var(--a1Clr) 100%);
		border: 0.1rem solid var(--bgClr); box-shadow: 0 0 0.9rem var(--a2Clr);
	}
	
	.sect { background-color:var(--b1Clr); border-radius: 0.3rem; padding: 0.1rem; margin: 0.2rem; border: 1px inset;}
	.label { color:  var(--txtClr); padding: 0.1rem;  outline-style:none; } 

	.item { color: var(--txtClr); background-color: var(--a0Clr);  padding: 0.15rem;  font: 1.2rem Arial; outline-style:none;}
	.item:hover { background-color: var(--b2Clr); }

/*.input  { color: var(--txtClr); background-color: var(--a0Clr); border: 2px inset var(--a1Clr); border-radius: 0.6rem; padding: 2px; font: 1.2rem Arial; outline-style:none; text-align:center; }
	.input:hover { background-color: var(--b0Clr); border: 2px inset var(--b1Clr); }*/
	.input { color: var(--txtClr); background-color: var(--b1Clr); border: 2px inset var(--b1Clr); border-radius: 0.6rem; padding: 3px; font: 1.2rem Arial; outline-style:none; text-align:center;} 
	.input:hover {  box-shadow: inset 2px 2px 2px var(--b2Clr), inset -2px -2px 2px var(--b2Clr);}
	
	.output { color: var(--txtClr); background-color: var(--a1Clr); border: 1px solid var(--b2Clr); border-radius: 0.6rem; padding: 3px; font: 1.2rem Arial; text-align: center;  }

	.outbig {  padding: 0.5rem; background: linear-gradient(120deg, var(--b0Clr) 0%, var(--b1Clr) 100%);	border-radius: 1.9rem; 	border: 0.1rem solid  var(--b2Clr);  }
	
	.select { font: 1.1rem Arial; color: var(--txtClr); background: var(--b1Clr); padding: 1px; line-height:1.9rem; text-align:center; cursor:pointer; }
	.radio { font: 1.2rem Arial; background: var(--b0Clr); border: 1px solid var(--a1Clr); padding: 2px 10px; border-radius: 0.6rem; line-height:1.9rem; text-align:left; margin:1px; }
	.radio label {font: 1rem Arial;}
	.radio input {  cursor:pointer; }
	.radio input+label {  cursor:pointer; }
	.radio input:checked+label { font-weight: bold;  }
	/* input[type="radio"]:checked+label {font: 2.2rem Arial; border: 1px solid blue;} */

  /*.script { font: italic 1.2rem Courier; } display:none;*/
	.script { color: var(--bgClr); }

	.btn { text-align: center; margin: 0.1rem; padding: 0 0.5rem 0 0.5rem; text-decoration: none; font: bold 0.9rem/1.6rem Arial, sans-serif; color: var(--b3Clr);
		border: 0.1rem solid var(--b2Clr); border-radius: 0.6rem; cursor: pointer; background: linear-gradient(to top right, var(--b2Clr) 0%, var(--b2Clr) 30%, var(--bgClr) 100%);
		outline-style:none; user-select: none;
	}
  .btn:hover, .btn.lo:hover, .btn.hi:hover { background: linear-gradient(to top, var(--a2Clr) 0%, var(--b0Clr) 100%); color: var(--txtClr) }
  .btn.yy { border: solid 0.1rem rgba(255,220,130,0.5); background: linear-gradient(to top right, rgba(255,220,130,1) 0%, var(--bgClr) 100%);  }
  .btn.lo { border: solid 0.1rem var(--b2Clr); background: linear-gradient(to top right, var(--b2Clr) 0%, var(--b2Clr) 100%);  }
  .btn.hi { border: solid 0.1rem white; background: linear-gradient(to top right, var(--a2Clr) 0%, var(--a1Clr) 50%, var(--a0Clr) 100%); box-shadow: 0.1rem 0.1rem 0.3rem var(--b2Clr); }


  /* large button */
.btnLg {  text-align: center;  padding: 4px; }
.btnLg a { display:inline-block; width:93px; height:39px; padding: 20px 0px 0px 0px; font: bold 16px sans-serif; color:white;
	background: url("images/style/button.svg") 0 0 no-repeat;	text-decoration: none; text-align: center; outline-style:none; }
.btnLg a:hover {
		background-position: -100px 0;
		color:white;
		}
.btnLg a:active {
		background-position: -200px 0;
		color:white;
		}

/* TODO: merge btn and playbtn */

.playbtn {display: inline-block; position: relative; margin-right: 0.2em; padding: 0.6em; 
		 border-radius: 100%;
		background: linear-gradient(to top right, var(--b2Clr) 0%, var(--b2Clr) 20%, var(--bgClr) 100%); 
		border:none;
		cursor: pointer; outline-style:none; user-select: none; }
		
.playbtn:hover {background: linear-gradient(to top right, var(--a2Clr) 0%, var(--b0Clr) 100%); }
.playbtn:before, button:after {content: " "; position: absolute; }
.playbtn:active {top: 0.05em; box-shadow: 0 0.02em 0.03em rgba(0,0,0,.4); }

.play:before {  left: 0.4em; top: 0.26em; border: 0.33em solid transparent;
border-left-width: 0.52em; border-left-color: var(--b3Clr);  }
.play:hover:before {border-left-color: var(--txtClr); }

.pause:before, .pause:after {display: block; left: 0.33em; top: 0.32em; width: 0.22em; height: 0.54em; background-color: var(--b3Clr); }
.pause:after {left: 0.62em; }
.pause:hover:before, .pause:hover:after {background-color: var(--txtClr); }



/* better slider styling for FF var(--a0Clr)*/
.slider { background:none;  }
.slider::-moz-range-progress {
  background-color: var(--b3Clr);
  height: 0.5rem;
}
.slider::-moz-range-track {
  background-color: var(--b2Clr);
}

/* TODO: https://larsenwork.com/easing-gradients/#editor */

	
/* Template Items */

	#menuLt { display: table-cell; width: 7rem; height: 3.8rem; vertical-align: middle; padding: 0 0 0 1.9rem; text-decoration: none; background: transparent url("images/style/arrow-tall-left.svg") no-repeat left center; }
	#menuRt { display: table-cell; width: 7rem; height: 3.8rem; vertical-align: middle; padding: 0 1.9rem 0 0; text-decoration: none; background: transparent url("images/style/arrow-tall-right.svg") no-repeat right center; }

	/* menu */
		#menuWide { display: block; position: relative; z-index: 2;	}
	#menuTiny { display: block; position: fixed; right: 0.2rem; top: 0.2rem; height: 3.6rem; text-align: left; margin: 0;  }  
	#menuSlim { display: none; position: fixed; left:100px; right:100px; top: 6px; }
	
.menu {
	text-align: center;
	margin: 0 auto 0.3rem auto;
	height: auto; /* Allowing for multiple lines */
	
	z-index: 2;
}

.menu ul {
	display: flex;  
	flex-wrap: wrap; 
	justify-content: center;  
	overflow: hidden; 
	padding: 0;
	margin: 0;
	max-height: 5em;             /* allow for 2 lines */
	list-style-type: none; 
}


	.menu li { display: inline-block; position: relative;  margin: 0; padding: 0.4rem 0.1rem 0.4rem 0.1rem; border: 1px solid rgba(0, 0, 0, 0.1); background-color: var(--a0Clr); }
 .menu li:hover { background-color: var(--b2Clr); }
  .menu li:before { content: none; }
	.menu li a { font-size: 0.9rem;  text-decoration: none; padding: 0.4rem 0.4rem 0.3rem 0.4rem; height:1.6rem;  color: var(--txtClr);}
	.menu li ul { display: block; position: absolute; right: 0; top: 27px; z-index: 1; }
	.menu li li { display: block; background-color: var(--b1Clr); }
	.menu ul ul { display: none; }
	.menu ul li:hover > ul { display: block; }

	
	#hdr { position: absolute; top: 0; width: 100%; height: 300px; margin: auto; z-index: -1; background: var(--hdrImg) no-repeat fixed center top; }
	.adv #hdr { position: absolute; top: 0; width: 100%; height: 300px; margin: auto; z-index: -1; background: var(--hdrAdvImg) no-repeat fixed center top; }
	#logo { position: absolute; left:7px; top:5px;  z-index: 1;}
	#logo img {width: 104px; height: 69px;}

	
	#cookOK2 { position:absolute; right:2px; top:42px; border-radius: 1px; background-color: var(--b1Clr); padding:3px; font: 16px Arial; min-width:200px; min-height:31px; border: 1px solid blue; text-align: right; }
	

	#cookOK {
		position: absolute;
		top: 42px;
		right: 2px;
		background-color: var(--b1Clr);
		border-radius: 4px;
		padding: 2px 6px;
		font-family: Arial, sans-serif;
		font-size: 16px;
		min-width: 200px;
		min-height: 31px;
		text-align: right;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
	


	/*	#adHide { position: absolute; left: 50%; top: 0.2rem; margin-left: 410px; text-align: center; font: 0.8rem Verdana; padding:2px; z-index:10; }*/
	#adHide { position: absolute; right: 3px; top: 78px; text-align: center; font: 1rem Verdana; padding:2px;  }
	#adsHide1 { display: inline; }
	#adsShow1 { display: none; }
	
	/* links margin: 0 0 98px auto;*/
	#linkto { height: 48px; margin: 0 0 95px auto; width: 270px; }  /* BIG GAP to content (H1 etc)  margin: 0 0 105px auto;*/

		/* https://24ways.org/2014/an-overview-of-svg-sprite-creation-techniques/ */
	#linkfb, #linktw, #linkpi, #linkgp, #linkem, #linkus, #linkli { display: block; width: 48px; height: 48px; float: left; margin-left: 5px; text-indent: -9999px; background: transparent url(images/style/links48.svg) no-repeat; }
	#linkfb:hover, #linktw:hover, #linkpi:hover, #linkgp:hover, #linkem:hover, #linkus:hover, #linkli:hover { background-color: var(--b2Clr); border-radius: 0.2rem; }	
	#linkfb { background-position: 0 0; }
	#linktw { background-position: -50px 0; }
	#linkpi { background-position: -100px 0; }
	#linkgp { background-position: -150px 0; }
	#linkem { background-position: -250px 0; }
	#linkus { background-position: -300px 0; width: 50px; }
	#linkli { background-position: -350px 0; }
	
	/* hover generally */
	.hov:hover { background-color: var(--a1Clr); border-radius: 0.5rem; }	
	

/* search */
	#search { display:block; position:relative; height: 3rem; margin: -4px auto 10px auto; width: 350px;  z-index: 3;}

	#searchFld { width: 16rem; margin: 1px; padding: 0.3rem; border-radius: 0.4rem; font-size: 1.1rem; color: var(--b4Clr); background-color: var(--a0Clr); 
	border-color: var(--b2Clr); text-align: left; }
	#searchFld:hover { background-color: var(--b2Clr); }
	#searchBtn { width: 50px; height: 50px; vertical-align: middle; margin-bottom: 1px; border: 1px solid var(--a2Clr); border-radius: 0.3rem; background: var(--a0Clr) url(images/style/search.svg) no-repeat; cursor: pointer;border-style: outset; }
	#searchBtn:hover { background-color: var(--b2Clr); }
	::placeholder { color: var(--b3Clr); opacity: 1; }

	.searchSuggestBox {
		position: absolute;
		left: 50px; /* Align with input field */
		top: 42px; /* Align with input field */
		width: 100%; /* Match the width of the search container */
		border: 1px solid grey;
		background-color: white; /* Gives background to suggest box */
		z-index: 3;
		text-align: left;
		visibility: hidden;
		box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Optional for a subtle shadow effect */
	}
	
	.searchSuggestBox .item {
		padding-left: 5px;
		cursor: pointer;
	}
	
	.searchSuggestBox .item:hover {
		background-color: #f0f0f0; /* Optional hover effect */
	}


		/* Footer*/
		/* https://the-echoplex.net/flexyboxes */
  .foot { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-content: flex-start; align-items: flex-start;
  background-color: var(--b0Clr); margin-top:30px; padding:10px 0 10px 0; border-top: 1px solid blue;}
  .footCol { order: 0; flex: 0 1 auto; align-self: auto; text-align:left; }
  .footHdr { font: bold 1.1rem Arial; margin: 0 0 5px -6px;  }
  .footItem { margin: 0 0 2px 0; }
  .footCol a {  padding:3px;  text-decoration: none;}

		
	#footMenu { text-align:center; margin: 0.8rem auto 0.5rem auto; }
	#copyrt, .copyrt { margin: 0.6rem auto 0.3rem auto; text-align: center; font: 0.7rem Arial; color: var(--o1Clr); }


/* themeChg: the box around the theme slider */
#themeChg { position: absolute; left:3px; top:100px; width: 60px; height: 34px; }
#themeChg input { opacity: 0; width: 0; height: 0; } /* Hide default checkbox */

/* theme */
#themeIcon1 { margin: 0.1rem; vertical-align: top; } 
#themeIcon2 { margin-top: 0.4rem; vertical-align: top;  }  
.themelite, .themedark { display: inline-block; width: 48px; height: 34px; text-indent: -9999px; background: transparent url(images/style/theme.svg) no-repeat; }
.themelite { background-position: 0 0; }
.themedark { background-position: -50px 0; }

#themeSlider1 { position: absolute; top: 0; left: 0; right: 0;  bottom: 0;  background-color: #2196f3;cursor: pointer;  transition: 0.4s;}
#themeSlider1:before {  position: absolute;  content: "";  height: 40px;  width: 40px;  left: 0px; bottom: 4px;  top: 0;  bottom: 0;
  margin: auto 0;  transition: 0.4s;  box-shadow: 0 0px 15px #2020203d;  background: white url(images/style/theme-lite.svg) center no-repeat; }
#themeSlider1:hover { box-shadow: 0 0 5px 5px var(--b4Clr); }

input:checked + #themeSlider1 {  background-color: var(--b3Clr); }
input:checked + #themeSlider1:before {  transform: translateX(24px);  background: white url(images/style/theme-dark.svg) center no-repeat; }

/* Rounded sliders */
#themeSlider1.round { border-radius: 30px; height:30px; }
#themeSlider1.round:before { border-radius: 50%; }
	
#adend {
	display: block; /* Ensures the element takes up space */
	width: 100%; /* Makes the ad responsive to container width */
	min-height: 200px; /* Minimum height for smaller ads */
	margin: 1em auto; /* Centers the ad horizontally with some vertical spacing */
	overflow: hidden; /* Prevents content overflow if the ad is unexpectedly larger */
}

#login { background-color: var(--bgClr); border: 2px solid var(--bgClr); }

/* example: q.html page */
.minimal header { height: 20px;  }
.minimal #hdr { background-image:none;}

.minimal #menuWide,
.minimal #linkto,
.minimal #adHide,
.minimal #adend,
.minimal #search,
.minimal #cookOK { display: none; }

	.minimal #logo { position: absolute;  top:8px; }
	.minimal #themeChg { position: absolute; top: 8px; left: 115px;   }
}

/* Nov 2020 resolutions: 360 or less: 11%, 361 to 414: 21%, 760 to 1279: 3%, 1280 and up: 50% (majority around 1300)  */ 


@media (max-width: 700px) {  

	html { font-size: 14px; }
	
	#search { width: 250px; }

	#searchFld { width: 12rem;  }

	.example { margin: 0.9rem 0.3rem 1.9rem 1.3rem;  }

	/* 
	.related a { margin-left: 170px; }
	.def {padding: 0.2rem 0.6rem 0.2rem 0.6rem; }

	#linkto { margin: 0 0 130px auto; }  

	.minimal #logo { display: none;  }
	.minimal #themeChg { position: absolute; top: 5px; left: 5px;  }

	#menuLt { display: none; }
	#menuRt { display: none; }
	
	#menuWide { display: none; }
	#menuTiny { display: block; position: fixed; right: 0.2rem; top: 0.2rem; height: 3.6rem; text-align: left; margin: 0;  }  
	#menuSlim { display: none; position: fixed; left:10px; right:10px; top: 6px; } 
	*/
	
	#adHide {display: none; }
	#adsHide1 { display: none; }
	#adsShow1 { display: none; }
}

@media (max-width: 440px) {  
/* just so that floated divs will now center themselves neatly, except if maked as slim */
	.floatLt:not(.slim), .floatRt:not(.slim) { display: block; margin: 0 auto; float:none; }
}


@media print {
.noprint {display: none;}
	#logo { position: absolute; left: 0; top: 0; }
	#hdr {display: none;}
	#adTop {display: none;}
	#adend {display: none;}
	#footer {display: none;}
	#gtran {display: none; }
	#adHide {display: none; }
	#adsHide1 { display: none; }
	#adsShow1 { display: none; }
	#linkto { display: none;}
	#linktort {display: none;}
	#menuWide { display: none; }
	#menuSlim { display: none; }
	#menuTiny { display: none; }
	#search { display: none; }
	.related { display: none; }
	#menuLt { display: none; }
	#menuRt { display: none; }
	#advText { display: none; }
	.bg { height: 6.3rem; }
	#bodybg { background: none; }
		body { background: none; } 

	h1 {color: var(--b4Clr); }
}