@font-face {
    font-family: champ;
    src: url('images/style/font-champ-bold.woff2') format('woff2'),
        url('images/style/font-champ-bold.woff') format('woff'),
        url('images/style/font-champ-bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: champ;
    src: url('images/style/font-champ-bolditalic.woff2') format('woff2'),
        url('images/style/font-champ-bolditalic.woff') format('woff'),
        url('images/style/font-champ-bolditalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    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(60, 100%, 98%) 0%, hsl(214, 100%, 98%) 5%, hsl(214, 100%, 98%) 50%, hsl(214, 100%, 98%) 95%, hsl(60, 100%, 98%) 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%, 50%);    /* pretty blue (text) */
--b4Clr: hsl(214, 100%, 25%);   /* dark blue (text) */

--o1Clr:  hsl(30, 100%, 40%);   /* orange (text) https://contrast-ratio.com contrast min 3 (large text) 4.5 (normal text) to b1Clr 
https://coolors.co/contrast-checker/ffd900-161b22   https://webaim.org/resources/contrastchecker/ */
/*--o1Clr: hsl(36, 80%, 40%); hsl(60, 80%, 30%); hsl(30, 100%, 41%) orange  hsl(100, 100%, 30%) green */
--r1Clr: hsl(0, 100%, 40%);    /* 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%;
--shade: rgba(50, 70, 90, 0.25);
}

:root[theme='dark'] {
--txtClr: hsl(0, 0%, 90%);
--bgClr: hsl(220, 20%, 5%);
--bg: hsl(220, 0%, 5%);
/* --bg: linear-gradient(to right, hsl(220, 100%, 5%) 0%, hsl(220, 20%, 5%) 20%, hsl(220, 20%, 5%) 50%, hsl(220, 20%, 5%) 80%, hsl(220, 100%, 5%) 100%); */

--a0ClrOld: hsl(220, 60%, 16%);    /* dark blue is much nicer than dark yellow */   
--a1ClrOld: hsl(220, 60%, 28%);    /*  dark blue*/     
--a2ClrOld: hsl(220, 60%, 35%);    /*  */ 

/* Deep Olive Green 
--a0Clr: hsl(80, 20%, 15%);
--a1Clr: hsl(80, 20%, 20%);
--a2Clr: hsl(80, 20%, 25%);*/

/* Muted Burgundy 
--a0Clr: hsl(350, 20%, 15%);
--a1Clr: hsl(350, 20%, 25%);
--a2Clr: hsl(350, 20%, 35%);*/

/* Cool Gray-Purple */
--a0Clr: hsl(250, 20%, 24%);
--a1Clr: hsl(250, 20%, 33%);
--a2Clr: hsl(250, 20%, 40%);

--a3Clr: hsl(48, 85%, 80%);    /* sand */ 
--a4Clr: hsl(48, 90%, 85%);    /* 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(220, 100%, 82%);   /* light blue (text) */
--b4Clr: hsl(220, 100%, 92%);   /* v light blue (text) */

--o1Clr: hsl(45, 100%, 55%);    /* gold (orange) */
--r1Clr: hsl(0, 100%, 60%);    /* 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%;
--shade: rgba(185, 215, 245, 0.25);
}

.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 
var(--b0Clr) used in geometry/constructions.html */
	.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 1rem 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;}
	.gap {height: 16px;}


	p { font-size: 1rem; line-height: 1.54;  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);
	}
	.left {text-align: left;}
	.right {text-align: right;}

	/* example  */
	.example {
		margin: 0.3rem 0.6rem 1.5rem 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.6rem;
		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 135% "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; padding-left: 10px; }
ul.large > li {
	width: fit-content; 
	margin-top: 9px; border-radius: 10px; 
	padding: 4px 9px 4px 11px; 
	font-size: 1rem; background-color: var(--b1Clr); 
	color: var(--b4Clr); 
	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: 120%; 
	font-size: 160%; 
	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; 
}

ul.deco { list-style-type: none; padding: 0; margin: 0; }
ul.deco li {
  margin: 0 0 0.6rem 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;
  border: 2px solid var(--a2Clr); border-radius: 25px;
  border-left: 9px solid var(--b2Clr); display: flex; align-items: center;
}
ul.deco li p { font-size: 1rem; margin: 0; }
ul.deco li h3 { margin-top: 1rem; }


ul.actv { text-indent: -1.5rem; }
ul.actv li { list-style: none; position: relative;
	padding-left: 75px; /* space for the image */
}
ul.actv li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.2rem; /* adjust vertically */
	width: 41px;
	height: 30px;
	background-image: url(images/style/activity-small.svg);
	background-size: contain;
	background-repeat: no-repeat;
}

	/* 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 2.5rem 25%; padding: 0 0 0.6rem 6.1rem; 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  */	
	.clear { overflow:auto; }
	.clear table { border-collapse: collapse;  }
	.clear .tbl {  padding-left: 0.4rem; padding-right: 0.4rem; border-radius: 0.3rem;}
	.clear th, .simple td {  padding: 0.3rem 0.9rem; }
	
	.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 {
		padding: 0.2rem 1.3rem 0 1.4rem;
		margin: 2.5rem 1rem 2rem 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 */
		0.4rem 0 1rem var(--a3Clr),  /* rt */
		-0.4rem 0 1rem var(--b3Clr);  /* 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(--a1Clr) 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 1.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:3.5rem; 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; }
	
	.bdr {
		border: 1px solid blue;
	}
	
 /* 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; }	
	
	.glow {
	margin: 20px;
		padding: 1rem 1.5rem;
		border-radius: 40px;
		background: linear-gradient(175deg, var(--b1Clr) , var(--b2Clr));
		box-shadow:  -5px -5px 10px var(--b1Clr),
								 5px 5px 30px var(--b3Clr);
	}
	.glow p { margin: 0.5rem 0 0.3rem 0; }
	
	.vivid {
		margin: 20px 15px 25px 15px;
		padding: 1rem 1.5rem;
		border-radius: 40px;
		background: linear-gradient(175deg, var(--bgClr), var(--a1Clr));
		box-shadow:  -5px -5px 10px var(--a1Clr),
									5px 5px 30px var(--a3Clr);
	}
	.vivid p { margin: 0.5rem 0 0.3rem 0; }



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


	
	/* em:not(.intbl em):not(p em) {  display: inline-block; width: 1.3rem; text-align: center; font-style: bold; font-size:110%; } */
	/* <em>=</em> used in
	activity/associative-commutative-distributive.html
	measure/unit-conversion-method.html
	*/
	/* test it on  algebra/factoring-quadratics.html display: inline-block; */
	li em, p em, .large em, .larger em, .huge em { width: 1.4rem; text-align: center;}



	/* 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; font-weight: inherit; line-height: 130%;}
	.intbl strong { display: table-row; text-align: center; font-style: inherit; 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; 
		margin-bottom: 0.6rem; 
		flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 1rem;
	}
.flexx .col { text-align: center; }

.rtUp {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1rem;
      margin: 0 auto;
}
.rtUp .col { flex: 0 1 auto; box-sizing: border-box;  }

.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 */
	/* also see sets/real-number-properties.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 p { margin: 0.6rem auto 0.6rem auto; color: var(--b3Clr);  }

	/* .many at algebra/sohcahtoa.html  */

.two, .many {
  display: grid;
  grid-template-columns: minmax(auto, max-content) minmax(auto, max-content);
	justify-content: center;
	align-items: end;
	margin: 0.8rem auto;
	width:fit-content;
	row-gap: 0.5rem;
	padding: 0.5rem; border-radius: 0.6rem;
	max-width: 100%;
	box-sizing: border-box;
 	/* background: linear-gradient(to bottom right, var(--b1Clr) 0%, var(--b0Clr) 50%, var(--b1Clr) 100%); */
/*  	border: 1px solid var(--b2Clr);  */
	/* gap: 0.6rem 0; */
}
.many {
	grid-template-columns: repeat(auto-fill, 220px);
	justify-content: center; /* Centers the grid within the container */
	gap: 0.7rem;
		margin: 0.8rem auto;

}
.two .lt, .many .lt {
	/* grid-column: 1 / span 1; */
  text-align: right;
	padding: 0 0.4rem 0 0; 
	font-size: 1.05rem; 
	color: var(--a4Clr); 
	/* vertical-align: end;  */
	align-self:center;
}
.two .ct, .many .ct {
	/* grid-column: 1 / -1; */
	padding: 0.5rem; 
	text-align: center;
	white-space: normal; 
	align-self: baseline;
}
.two .rt, .two .rtlt, .two .rtct, .two .rtrt,
.many .rt, .many .rtlt, .many .rtct, .many .rtrt { 
	/* grid-column: 2 / span 1; */
  padding: 0 0 0 0.4rem; 
	font-size: 1.1rem; 	
	font-weight: normal;
	color: var(--b3Clr); 
  /* vertical-align: center;  */
	white-space: normal;
	/* justify-self: start; */
	
	align-self: end; 
}

.many .rt, .many .rtlt, .many .rtct, .many .rtrt { 
align-self: baseline;
}

.two .tp, .many .tp {align-self:baseline;} 

.two .rt, .many .rt { text-align: left; }
.two .rtlt, .many .rtlt { text-align: left;  }
.two .rtct, .many .rtct { text-align: center;  }
.two .rtrt, .many .rtrt { text-align: right;  }

.two img { align-self:center;  }

.two p { margin:  auto;  color: var(--b4Clr); grid-column: span 2; }

.two .span2, .many .span2 { grid-column: span 2; }
.many .span3 { grid-column: span 3; }

/* manually control sup text so it does not push whole line down */
.two .rt sup {
  vertical-align: baseline;
  position: relative;
  top: -0.4rem; 
	line-height: 0;
}


	.floatLt {float:left; padding:0 20px 10px 0;  text-align:center;}
	.floatRt {float:right; padding: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: linear-gradient(165deg, var(--b2Clr) 0%, var(--b0Clr) 35%, var(--b0Clr) 75%, var(--b2Clr) 100%);
		box-shadow: 0.4rem 0.4rem 0.3rem 0 rgba(40,40,40,0.75);
		transition: all linear 0.5s; text-align: center;
	}
	.btns {border-radius:0.6rem; padding: 0.3rem 0.3rem;  transition: all linear 0.3s;
		background: var(--a0Clr); box-shadow: 2px 2px 4px 0 black; }

	.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; border-radius: 10px; outline-style:none;}
	.item:hover { background-color: var(--b2Clr); }

	.input {
		border: 2px inset var(--b3Clr) ; border-radius: 0.6rem; padding: 3px; outline-style: none; 
		font: 1.2rem Arial; background-color: var(--b2Clr); text-align: center; 
		color: var(--txtClr);
	} 
	.input:hover { box-shadow: inset 2px 2px 2px var(--b2Clr), inset -1px -1px 2px var(--b3Clr); }
	
	.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 {
		border-radius: 0.6rem; padding: 3px; 
		font: 1.2rem Arial; text-align: center; 
		color: var(--txtClr); background: var(--b1Clr); cursor: pointer;
	}
	.select:hover {  box-shadow: inset 2px 2px 2px var(--b2Clr), inset -2px -2px 2px var(--b2Clr);}


	.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 1rem/1.8rem 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 { 
		background: linear-gradient(to top right, var(--b2Clr) 0%, var(--b2Clr) 100%);  }
  .btn.hi { 
		border: solid 0.1rem var(--a3Clr); 
		background: linear-gradient(to top, var(--a2Clr) 0%, var(--a0Clr) 30%, var(--a2Clr) 100%); 
		box-shadow: 0.1rem 0.1rem 0.3rem var(--a2Clr); }


  /* 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; top: 36px;  }
	
.menu {
	text-align: center;
	margin: 0 auto 0.3rem auto;
	height: auto; /* Allowing for multiple lines */
	z-index: 2;
}



/* dropdown style menu */
.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;  background-color: var(--a0Clr); border: 1px solid var(--shade);
	}
 .menu li:hover { background-color: var(--a2Clr) }
  .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; }

/* popup menu */


.menuPop {
	display: flex;
	flex-direction: row;
	width: fit-content;
	margin: 0px;
	align-items: flex-start;
	background: linear-gradient(170deg, var(--b1Clr) 0%, var(--bgClr) 50%, var(--a0Clr) 100%);
	padding: 10px;
	/* border: 1px solid var(--txtClr); */
	border-radius: 10px;
	box-shadow: 1px 1px 4px 4px var(--b2Clr);
}

.menuCol {
	margin: 5px 5px;
	min-width: 30px;
	text-align: left;
}

.menuCol a {
	text-decoration: none;
	color: var(--b4Clr);
	display: inline-block;
	transition: color 0.3s ease;
}

.menuCol a:hover {
	background-color: var(--b2Clr);
}

.menuCol img {
	vertical-align: middle;
	transition: transform 0.3s ease;
}

.menuCol img:hover {
	transform: scale(1.2);
}


	#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;}

	

	#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: 2px 2px 4px var(--shade);
	}
	


	/*	#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, #linkwa, #linkdo { 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, #linkwa:hover, #linkdo: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; }
	#linkwa { background-position: -400px 0; }
	#linkdo { background-position: -450px 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: 4px 4px 8px var(--shade); 
	}
	
	.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.2rem;  }
	
	#adHide {display: none; }
	#adsHide1 { display: none; }
	#adsShow1 { display: none; }
}

/* mobile */
@media (max-width: 440px) {  

	h2 { margin: 2.5rem 0 0.8rem 0; }

  .rtUp {
    flex-direction: column-reverse; /* Right-most div appears on top */
    align-items: center;
  }
  .rtUp .col { width: 90% !important; /* Overrides inline width */ }


/* 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; }

	.so { background: url(images/style/so.svg) no-repeat 1.6rem 25%; padding: 0 0 0.6rem 5.7rem; color: var(--b3Clr); font-size: 1.1rem; }


  .two {
    grid-template-columns: 1fr; /* Change to a single column, stacking items */
    width: 100%; /* Allow the table to take full width on mobile */
    /*padding: 0.5rem 1rem;  Adjust overall padding for mobile layout */
    gap: 0.2rem; /* This gap now applies vertically between stacked items border: 1px solid red; */
  }

	
	/* Adjust text alignment and padding for stacked items */
  .two .lt    { text-align: left;  align-self: center; margin-top:8px; } 
  .two .rt    { text-align: center;  align-self: center;  } 
  .two .rtlt  { text-align: center;  align-self: center; } 
  .two .rtct  { text-align: center;  align-self: center; } 
  .two .rtrt  { text-align: right;  align-self: center; } 
	
	.two p { margin: auto;  grid-column: 1/-1; }
	.two .span2 { grid-column: 1/-1; }


}


@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); }
}