@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 */
	/* light hsl fallbacks */
	--sand0: hsl(60, 100%, 97%);
	--sand1: hsl(50, 100%, 95%);
	--sand2: hsl(50, 100%, 85%);
	--sand: hsl(45, 100%, 77%);
	--gold: hsl(50, 100%, 28%);
	--blue0: hsl(213, 100%, 96%);
	--blue1: hsl(214, 100%, 93%);
	--blue2: hsl(214, 100%, 84%);
	--blue: hsl(214, 65%, 50%);
	--blue-fg: hsl(214, 100%, 25%);
	--orange: hsl(30, 100%, 40%);
	--red: hsl(0, 100%, 40%);

	/* should suit both dark and light themes 
	Jade & Lilac: complementary pairing — green + purple is playful and vibrant.
	Gold & Lilac: warm + cool contrast — works well for highlights and borders.
	Blue & Lilac: analogous scheme — soft, harmonious.*/
	--jade: oklch(0.60 0.28 138);
	--lilac: oklch(0.67 0.07 315);


--fg: oklch(0.28 0 0);          
--bg: oklch(0.98 0.02 220);             
--body-bg: linear-gradient(to right,
  oklch(0.9 0.04 220) 0%,
  oklch(0.96 0.02 220) 10%,
  oklch(0.96 0.02 220) 50%,
  oklch(0.96 0.02 220) 90%,
  oklch(0.9 0.04 220) 100%);



	--sand0: oklch(0.97 0.03 100);    /* very light yellow */
	--sand1: oklch(0.96 0.04 100);    /* light yellow */
	--sand2: oklch(0.94 0.06 95);     /* soft yellow */
	--sand: oklch(0.8 0.11 85);     /* sand */
	/* --sand-fg: oklch(0.4 0.1 200);     dark sand */
	--sand-fg: oklch(0.36 0.1 285);          /* dark bluish purple */
	
	--blue0: oklch(0.96 0.02 235);    /* very light blue */
	--blue1: oklch(0.93 0.04 235);    /* light blue */
	--blue2: oklch(0.82 0.07 235);    /* medium blue */
	--blue: oklch(0.60 0.15 250);    /* “pretty blue” text */
	--blue-fg: oklch(0.45 0.18 250);    /* dark blue text */
	
	--gold: oklch(0.67 0.3 95);     /* gold (text) */
	--orange: oklch(0.67 0.17 65);     /* orange (text) */
	--red: oklch(0.65 0.23 25);     /* red (text) */

	--hdr-img: url(images/hdr/hdr-main-lite.svg);
	--hdr-adv-img: url(images/hdr/hdr-adv-lite.svg);

	--h1-glow: color-mix(in oklch, var(--bg), white 20%);
  --h1-shadow: 1px 1px 2px var(--h1-glow), -1px -1px 2px var(--h1-glow);

	--trans: all linear 0.5s; 

	--bold-wt: bold;
	--bold-pct: 100%;
	/* --shade: rgba(50, 70, 90, 0.25); */
	--shade: oklch(0.85 0.06 240);
}

:root[theme='dark'] {

	/* dark hsl fallbacks */
	--sand0: hsl(250, 20%, 24%);
	--sand1: hsl(250, 20%, 33%);
	--sand2: hsl(250, 20%, 40%);
	--sand: hsl(48, 85%, 80%);
	--gold: hsl(48, 90%, 85%);
	--blue0: hsl(210, 80%, 6%);
	--blue1: hsl(210, 80%, 10%);
	--blue2: hsl(210, 100%, 25%);
	--blue: hsl(220, 100%, 82%);
	--blue-fg: hsl(220, 100%, 92%);
	--orange: hsl(45, 100%, 55%);
	--red: hsl(0, 100%, 60%);

	--fg: oklch(0.88 0 0);             
	--bg: oklch(0.1 0.03 250);          /* deep navy gray */

	--body-bg: oklch(0.06 0.09 250);


/* A: muted purple-blues (backgrounds), gold for text */
	--sand0: oklch(0.36 0.04 285);          /* dark bluish purple */
	--sand1: oklch(0.40 0.05 285);          /* mid bluish purple */
	--sand2: oklch(0.47 0.05 285);          /* softer bluish */
	--sand: oklch(0.82 0.10 95);           /* sand */
	--sand-fg: oklch(0.92 0.10 95);           /* sand */
	--gold: oklch(0.87 0.10 95);           /* light yellow-gold text */

	/* B: blue scale */
	--blue0: oklch(0.20 0.03 250);          /* deep blue */
	--blue1: oklch(0.25 0.05 250);          /* slightly lighter */
	--blue2: oklch(0.30 0.12 250);          /* medium blue */
	--blue: oklch(0.82 0.14 250);          /* light blue text */
	--blue-fg: oklch(0.90 0.08 250);          /* very light blue text */

	/* Accents */
	--orange: oklch(0.75 0.15 80);           /* warm gold-orange */
	--red: oklch(0.65 0.25 25);           /* bright red (text) */

--hdr-img: url(images/hdr/hdr-main-dark.svg);
--hdr-adv-img: url(images/hdr/hdr-adv-dark.svg);

	--h1-glow: color-mix(in oklch, var(--bg), white 30%);
  --h1-shadow: 0 0 8px var(--bg);

--trans: all linear 0.5s; 

--bold-wt: 900;
--bold-pct: 106%;
/* --shade: rgba(185, 215, 245, 0.25);
--shade: color-mix(in oklch, oklch(0.85 0.08 250), transparent 75%);
--shade: oklch(0.5 0.10 240 / 0.5); */
	--shade: oklch(0.6 0.04 240);


}

.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(--bold-wt); font-size: var(--bold-pct); }

/* themed bgs used in: quadrilaterals.html numbers/golden-ratio.html cross-number.js et al 
var(--blue0) used in geometry/constructions.html */
	.bg {background-color:var(--bg); }
	.bga1, .sand1 {background-color:var(--sand1);}
	.bga2, .sand2 {background-color:var(--sand2);}
	.bgb1, .blue1 {background-color:var(--blue1);}
	.bgb2, .blue2 {background-color:var(--blue2);}
	.fga3, .sand {color:var(--sand);}
	.fga4, .gold {color:var(--gold);}
	.fgb3, .blue {color:var(--blue);}
	.fgb4, .blue-fg {color:var(--blue-fg);}
	.fgo1, .orange {color:var(--orange);}
	.fgr1, .red {color:var(--red);}

/* 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(--body-bg); color:var(--fg); }
	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-size: 2.6rem; line-height: 1.3; font-weight: normal; font-family: champ, Verdana, Arial; text-align: center; color: var(--blue); text-shadow: var(--h1-shadow); }

h2 { margin: 3.5rem 0 1rem 0; font-size: 2.3rem; line-height: 1.4; font-weight: normal; font-family: champ, Verdana, Arial; color: var(--red); }

h3 { margin: 2.1rem 0 0.6rem 0; font-size: 1.6rem; line-height: 1.4; font-weight: normal; color: var(--blue); }

h4 { margin: 1.4rem 0 0.6rem 0; font-size: 1.2rem; line-height: 1.5; font-weight: normal; font-variant: small-caps; color: var(--orange); }

	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(--blue); background-color: var(--blue1); padding: 5px; border-radius: 10px; font-size: 1.1rem; font-family: Verdana, Arial, Tahoma, sans-serif; }

.tiny { font-size: 0.8rem; line-height: 1.5; color: var(--blue); }
.small { font-size: 0.9rem; line-height: 1.5; color: var(--blue); }
.large { font-size: 1.2rem; line-height: 1.5; color: var(--blue); }
.larger { font-size: 1.3rem; line-height: 1.5; color: var(--orange); transition: var(--trans); }
.largest { font-size: 1.6rem; line-height: 1.5; color: var(--gold); }
.huge { font-size: 1.8rem; line-height: 1.5; font-weight: bold; color: var(--blue); }

	.min {min-width:170px; overflow: auto;}
	.gap {height: 20px;}


	p { font-size: 1rem; line-height: 1.55rem;  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(--blue2);
		border-radius: 0.6rem; background-color: var(--sand0);
	}
	p a:hover {
		border: 1px solid var(--sand); background-color: var(--sand2); cursor: pointer;
	}

	a:link { color: var(--blue-fg); }
	a:visited { color: var(--blue); }	
	
	.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(--blue2);
	}
	.left {text-align: left;}
	.right {text-align: right;}

	/* example  */
	.example {
		margin: 0.3rem 0.6rem 1.3rem 0.6rem; padding: 0.1rem 0.6rem 0.6rem 0.6rem;
		background-color: var(--blue1); border: 1px solid var(--blue2); border-radius: 0.6rem;
		box-shadow: 0.2rem 0.2rem 0.3rem var(--shade); 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(--sand1); border-radius: 0.5rem; color: var(--blue-fg);
	}
	
	.center80 {
		max-width: 66ch; margin: 1.3rem auto 0.8rem auto; border: 0.15rem solid var(--blue2); border-radius: 1.9rem; padding: 0.5rem;
		background: linear-gradient(170deg, var(--blue0) 0%, var(--blue1) 90px, var(--blue1) calc(100% - 90px), var(--blue2) 100%);
	}
	.center80 h3 { margin: 0.3rem 0 1.3rem 0.6rem; color: var(--blue); }
	.center80 p { margin: 0.6rem 0 0.5rem 0; }
	
	.indent50px { margin-left: 2rem; }
	
	.mono { font-family: "Courier New", Courier, monospace; font-size: 1.3rem; line-height: 2rem; }
	
	.times { font: bold 135% "Times New Roman", serif; }
	
	.head {
		margin: 0.2rem 0 0.6rem 0; border: 2px solid var(--sand2); border-radius: 25px; padding: 0.5rem;
		font: bold 1.1rem Verdana; text-align: center;
		color: var(--fg); background: var(--sand1) 0%;
	}		
	
  p+ul {  margin-top: -1rem;}
	li { color: var(--blue-fg); list-style-type: disc;  padding-top: 0.5rem;}
	li:hover { color: var(--blue); }


		ul ul {   /* reduce indent for nested ul */
		margin-left: -9px;
	}
	
ul { font-size: 1rem; line-height: 1.5rem; }

	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(--blue1); 
	color: var(--blue-fg); 
	overflow: hidden; list-style-type: none; }
ul.large > li:hover { background-color: var(--sand1); }

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

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(--blue2); 
	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(--gold); 
	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(--sand); 
	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(--sand); 
	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(--blue-fg);
  background: linear-gradient(-5deg, var(--sand0) 0%, var(--sand1) 100%); font-size: 1rem;
  border: 2px solid var(--sand2); border-radius: 25px;
  border-left: 9px solid var(--blue2); 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;
}

    ul.dotpoint > li {
            /* Reset default list styling */
            list-style: none;
            /* Margin, padding, and layout */
            margin: 0 0 0.9rem 0; /* Adjusted margin left to 0 so custom padding handles the indentation */
            padding: 1rem 0.5rem; /* Increased padding for better appearance */
            
            /* Typography */
            color: var(--blue-fg);

            /* Background and Borders */
            background: linear-gradient(135deg, var(--sand0) 0%, var(--sand1) 100%);
            border: 2px solid var(--sand2);
            border-radius: 25px; /* Rounded corners */
            border-left: 9px solid var(--blue2); /* The defining 'dotpoint' feature */
            
            /* Add subtle shadow for depth */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
            /* transition: transform 0.2s ease-in-out; */
						transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        /* Add hover effect for interactivity */
        ul.dotpoint > li:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
        }

        ul.dotpoint > li:focus {
            outline: 2px solid var(--blue2);
            outline-offset: 2px;
        }

        /* Ensure the main UL container doesn't have default formatting */
        ul.dotpoint {
            list-style-type: none; /* Remove default dots/bullets from the ul */
            padding-left: 0; /* Remove default padding/indentation from the ul */
						background: none;
						border: none;
        }

	/* 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(--blue); 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  */	

  table { font-size: 1rem; line-height: 1.5rem;}
	.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(--blue1); }
	.simple .tbl { background-color: var(--blue0); padding-left: 0.4rem; padding-right: 0.4rem; border-radius: 0.3rem;}
	.simple td { background-color: var(--bg); }
	.simple th, .simple td { border: solid 0.1rem var(--blue2); padding: 0.3rem 0.9rem; }
	.simple th { background-color: var(--blue2); }
	
	.beach { overflow:auto; }
	.beach p { background-color: var(--blue0); }
	.beach table { border-collapse: collapse; background-color: var(--blue0);  }
	.beach th, .beach td { border: solid 0.1rem var(--bg);  padding: 0.3rem 0.9rem; color: var(--blue-fg);  }
	.beach th { background-color: var(--sand2); color: var(--gold);  }
	
	/* 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(--fg);
		border: 0.2rem solid var(--sand1);
		text-indent: 0.6rem;
		border-radius: 0.6rem;
		background: var(--sand1) url(images/style/scroll.svg) no-repeat;
		background-position: 0.3rem 0.3rem; 
		box-shadow: inset 0 0 1.1rem 0  var(--sand2); 
	}  
	.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 5rem;
    background: var(--blue1) url(images/style/word.svg) no-repeat;
    background-position: 0.3rem 0.2rem;
		background-repeat: no-repeat;
		border: 0.1rem solid var(--blue2);
		border-radius: 0.6rem; 
		min-height: 2.1rem;
    background-size: 60px 60px; 
	}
	.words p { margin: 0.5rem 0 0.3rem 0; }

	  	/* info */
	.info { 
		margin: 0.9rem 2rem 1.6rem 2rem;
	  padding: 0.6rem 1rem 0.7rem 5rem; 
		background-image: url(images/style/info.svg), linear-gradient(170deg, var(--bg) 0%, var(--blue2) 100%);
		background-position: 9px 0.4rem;
		background-repeat: no-repeat;
		border: 0.1rem solid var(--blue2); 
		border-radius: 1.9rem;
		box-shadow: inset 0 0 0.9rem 0.2rem  var(--blue2); 
		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(--bg);

		box-shadow: 1rem 1rem 1rem -1rem var(--blue), /* dn rt */
		1rem -1rem 1rem -1rem var(--sand), /* up rt */
		-1rem 1rem 1rem -1rem var(--sand), /* dn lt */
		-1rem -1rem 1rem -1rem var(--sand),    /* up lt */
		0.4rem 0 1rem var(--sand),  /* rt */
		-0.4rem 0 1rem var(--blue);  /* lt */

		background: linear-gradient(170deg, var(--bg) 0%, var(--bg) 50%, var(--sand0) 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(--sand0); 
	border: 1px solid var(--sand2);   box-shadow: inset 0 0 0.4rem var(--sand2);} */
	
	.def {margin: 1.6rem 1rem 1.3rem 1rem; padding: 0.3rem 0.9rem 0.3rem 0.9rem; border-radius: 1rem; 	
		background: linear-gradient(160deg, var(--sand0) 0%, var(--sand1) 100%);
		border: 2px solid var(--bg); box-shadow: 0 0 0.9rem var(--sand2);
/*		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(--sand0) 0%, var(--sand2) 100%);
		border: 2px solid var(--bg); box-shadow: 0 0 0.9rem var(--sand2);
	}
	.note h3 {margin-top: 1rem;}
*/

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


	   /* hide */
	.hide { color: var(--sand2); background-color: var(--sand2);  border: 1px solid var(--sand); padding: 3px 15px 3px 15px; }
  .hide:hover { color: var(--fg); background-color: var(--sand1); border: 1px solid var(--sand2); }

	.dotpoint { margin: 0 0 0.6rem 1.2rem; padding: 0.3rem 0.6rem 0.3rem 1.1rem; background:  linear-gradient(-5deg, var(--sand0) 0%, var(--sand1) 100%); font-size: 1rem;
		border: 2px solid var(--sand2);  border-radius: 25px;
    border-left: 9px solid var(--blue2);  
	}
  .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(--blue); 
		border-radius: 0.6rem; font-size: 1.1rem; 
		background-image: url(images/style/questions.svg), linear-gradient(120deg, var(--sand0) 0%, var(--sand1) 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(--blue); border-radius: 0.6rem; font-size: 1.1rem; background: var(--blue0) 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(--blue); border-radius: 0.6rem; background: var(--blue1) 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(--blue2); border-bottom: 0.2rem solid var(--blue2); 
		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(--blue0) 0%, var(--blue1) 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(--blue1) , var(--blue2));
		box-shadow:  -5px -5px 10px var(--blue1),
								 5px 5px 30px var(--blue);
	}
	.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(--bg), var(--sand1));
		box-shadow:  -5px -5px 10px var(--sand1),
									5px 5px 30px var(--sand);
	}
	.vivid p { margin: 0.5rem 0 0.3rem 0; }



	.video { float:left;  min-width:56px; min-height:49px; border: 2px solid  transparent; }
	.video:hover {
		border: 2px solid  var(--blue2); 
		outline: none; /* Remove default focus outline if border/bg changes are enough */
		/* box-shadow: 0 6px 6px var(--shade); */
	}

	.video:active {
		box-shadow: none;
	}

	
	li em, p em, .large em, .larger em, .huge em { padding-left:0.3rem; padding-right:0.3rem; text-align: center;}


/* fractions (above and below style) */

	.f { 
		display: inline-table; 
		text-align: center; 
		vertical-align: 40%; 
		margin: 0 0.1rem; 
		border-collapse: collapse;
		text-indent:0; 
	}
	.f::before, .f::after { content: none; }
	.f u, .f em {
		display: table-row;
		text-align: center;
	}
	.f u { text-decoration: none; }
	.f em { font-style: normal; }
	.f u { 
		border-bottom: 0.1em solid currentColor; 
		font-size: 90%; 
		line-height: 140%;
	}
	.f em { 
		font-size: 90%; 
		line-height: 140%; 
	}
	.f em:before, .f em:after, .f strong:before, .f strong:after { content: "\2005";	}  /* 2005=unicode 1/4 em space  */





/* ins used on /mixed-fractions-multiply.html, algebra/partial-fractions.html */

	ins { 
		display: inline-table; 
		text-align: center; 
		vertical-align: 35%; 
		margin: 0 0.1rem; 
		border-collapse: collapse;
		text-indent:0; 
		text-decoration: none;
	}
	ins::before, ins::after { content: none; }
	ins u, ins em {
		display: table-row;
		text-align: center;
				text-decoration: none;

	}
	ins u { text-decoration: none; }
	ins em { font-style: normal; }
	ins u { 
		border-bottom: 0.1em solid currentColor; 
		font-size: 93%; 
		line-height: 140%;
	}
	ins em { 
		font-size: 93%; 
		line-height: 140%; 
	}
	ins em:before, ins em:after, ins strong:before, ins strong:after { content: "\2005";	}  /* 2005=unicode 1/4 em space  */



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


/* inline fractions - side by side */
.frac {
    display: inline;
    text-align: center;
    vertical-align: baseline;
    margin: 0 0.1rem;
    font-size: 80%;
}

.frac u {
    display: inline;
    text-align: center;
		text-decoration: none;
    position: relative; 
		top: -0.35em;
	}
	
	.frac em {
    display: inline;
    text-align: center;
			font-style: normal;
		position: relative; 
		top: 0.4em; /* Lower the denominator */
				left: -0.3em;

}



/* Optional: Add slash between numerator and denominator */
.frac u:after {
    content: "/";
    border-bottom: none;
		font-size: 130%;
		position: relative; 
		top: 0.3em; /* Lower the denominator */
}






	.hilite { background-color: var(--sand2); 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, .rtUp .box { flex: 0 1 auto; box-sizing: border-box;  }



.box {
	display: inline-block;
	text-align: center;
	vertical-align:top;
	margin-bottom:12px;
}

.box + .box {
	margin-left: 15px;
} 

.simple .box {
	vertical-align: top;
	margin:0;
	margin: 3px 0px 3px 0px; 
	padding: 0.4rem 1rem;
	background-color: var(--blue1);
	border-radius: 0.3rem;
}

/* algebra/sequences-series.html has a nice "flex" row of small boxes, good for sequences */
.box-row {
  display: flex; 
  flex-wrap: wrap; 
  justify-content: flex-start;
  gap: 0px; /* Space between the boxes */
  padding: 10px 0;
}

.box-row .box-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid var(--shade);
  padding: 8px 5px;
  min-width: 40px;
  box-sizing: border-box; /* Includes padding and border in the width calculation */
  line-height: 1.3;
}





.two {
	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;
	column-gap: 0.2rem;
	padding: 0.5rem; 
	border-radius: 0.6rem;
	max-width: 100%;
	box-sizing: border-box;
}

.many {
	display: grid;
	grid-template-columns: repeat(auto-fit, auto);
	width:fit-content;

	/* grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); */
	justify-content: center; /* Centers the grid within the container */
	 gap: 0rem;  

	margin: 0.8rem auto;
}

/* style="grid-template-columns: repeat(3, 1fr); */
.many.cols2 { grid-template-columns: repeat(2, auto); }
.many.cols3 { grid-template-columns: repeat(3, auto); }
.many.cols4 { grid-template-columns: repeat(4, auto); }
.many.cols5 { grid-template-columns: repeat(5, auto); }




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



/* vertical center */
.two .vttp, .many .vttp { align-self: flex-start; }
.two .vtct, .many .vtct { align-self: center; }
/* left color */
.two .ltClr {
	color: var(--gold); 
}



.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 {   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;
}

/* under develpment: color schemes */
.two.beach {
		background-color: var(--blue1); 
}
.two.beach .lt {
		color: var(--blue-fg); 
}
.two.beach .rt, .two.beach .rtlt, .two.beach .rtct, .two.beach .rtrt {
		background-color: var(--blue2); 
}


	.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

.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

*/

.integral {display:inline-block; text-align:center;}

.sigma { display: inline-block; vertical-align: middle; text-align: center; margin-right: -0.2em;   
    line-height: 1;  /* Important for consistent vertical alignment */
}
.sigma .to { text-align: center; width: 2.5em; font-size: 0.8em; margin: 0; line-height: 1; }
.sigma .symb { font-size: 2.5em; font-family: Georgia, serif; line-height: 0.8; }
.sigma .from { text-align: center; width: 2.5em; font-size: 0.8em; overflow: visible; margin: 0; line-height: 1; }
.sigma-text { display: inline-block; vertical-align: middle; }


	.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(--blue1); border-radius: 10px; }
	.jsCanvas {color: var(--fg); background-color:var(--bg);}  /* so js can look up theme colors */
	.can {  border-radius:10px; background-color:var(--blue0);}   /* 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(--blue2) 0%, var(--blue0) 35%, var(--blue0) 75%, var(--blue2) 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(--sand0); 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(--blue0) 0%, var(--blue1) 100%);
	}
	.wow { padding: 0.3rem 1.1rem 0.3rem 1.1rem; border-radius: 1rem; 	
		background: linear-gradient(120deg, var(--sand0) 0%, var(--sand1) 100%);
		border: 0.1rem solid var(--bg); box-shadow: 0 0 0.9rem var(--sand2);
	}
	
	.sect { background-color:var(--blue1); border-radius: 0.3rem; padding: 0.1rem; margin: 0.2rem; border: 1px inset;}
	.label { color:  var(--fg); padding: 0.1rem;  outline-style:none; } 

	.item { color: var(--fg); background-color: var(--sand0);  padding: 0.15rem;  font: 1.2rem Arial; border-radius: 10px; outline-style:none;}
	.item:hover { background-color: var(--blue2); }

	.input {
		border: 2px inset var(--blue) ; border-radius: 0.6rem; padding: 3px; outline-style: none; 
		font: 1.2rem Arial; background-color: var(--blue2); text-align: center; 
		color: var(--fg);
	} 
	.input:hover { box-shadow: inset 2px 2px 2px var(--blue2), inset -1px -1px 2px var(--blue); }
	
	.output { color: var(--fg); background-color: var(--sand1); border: 1px solid var(--blue2); border-radius: 0.6rem; padding: 3px; font: 1.2rem Arial; text-align: center;  }
	
	.outbig {  padding: 0.5rem; background: linear-gradient(120deg, var(--blue0) 0%, var(--blue1) 100%);	border-radius: 1.9rem; 	border: 0.1rem solid  var(--blue2);  }
	
	.select {
		border-radius: 0.6rem; padding: 3px; 
		font: 1.2rem Arial; text-align: center; 
		color: var(--fg); background: var(--blue1); cursor: pointer;
	}
	.select:hover {  box-shadow: inset 2px 2px 2px var(--blue2), inset -2px -2px 2px var(--blue2);}


	.radio { font: 1.2rem Arial; background: var(--blue0); border: 1px solid var(--sand1); 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(--bg); }

	.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(--blue);
		border: 0.1rem solid var(--blue2); border-radius: 0.6rem; cursor: pointer; background: linear-gradient(to top right, var(--blue2) 0%, var(--blue2) 30%, var(--bg) 100%);
		outline-style:none; user-select: none;
	}
  .btn:hover, .btn.lo:hover, .btn.hi:hover { background: linear-gradient(to top, var(--sand2) 0%, var(--blue0) 100%); color: var(--fg) }
  .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(--bg) 100%);  }
  .btn.lo { 
		background: linear-gradient(to top right, var(--blue2) 0%, var(--blue2) 100%);  }
  .btn.hi { 
		border: solid 0.1rem var(--sand); 
		background: linear-gradient(to top, var(--sand2) 0%, var(--sand0) 30%, var(--sand2) 100%); 
		box-shadow: 0.1rem 0.1rem 0.3rem var(--sand2); }


  /* 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(--blue2) 0%, var(--blue2) 20%, var(--bg) 100%); 
		border:none;
		cursor: pointer; outline-style:none; user-select: none; }
		
.playbtn:hover {background: linear-gradient(to top right, var(--sand2) 0%, var(--blue0) 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(--blue);  }
.play:hover:before {border-left-color: var(--fg); }

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



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

/* 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(--sand0); border: 1px solid var(--shade);
	}
 .menu li:hover { background-color: var(--sand2) }
  .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(--fg);}
	.menu li ul { display: block; position: absolute; right: 0; top: 27px; z-index: 1; }
	.menu li li { display: block; background-color: var(--blue1); }
	.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(--blue1) 0%, var(--bg) 50%, var(--sand0) 100%);
	padding: 10px;
	/* border: 1px solid var(--fg); */
	border-radius: 10px;
	box-shadow: 1px 1px 4px 4px var(--blue2);
}

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

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

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

.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(--hdr-img) no-repeat fixed center top; }
	.adv #hdr { position: absolute; top: 0; width: 100%; height: 300px; margin: auto; z-index: -1; background: var(--hdr-adv-img) 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(--blue1);
		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(--blue2); 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(--sand1); 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(--blue-fg); background-color: var(--sand0); 
	border-color: var(--blue2); text-align: left; }
	#searchFld:hover { background-color: var(--blue2); }
	#searchBtn { width: 50px; height: 50px; vertical-align: middle; margin-bottom: 1px; border: 1px solid var(--sand2); border-radius: 0.3rem; background: var(--sand0) url(images/style/search.svg) no-repeat; cursor: pointer;border-style: outset; }
	#searchBtn:hover { background-color: var(--blue2); }
	::placeholder { color: var(--blue); 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(--blue0); 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(--orange); }


/* 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(--blue-fg); }

input:checked + #themeSlider1 {  background-color: var(--blue); }
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(--bg); border: 2px solid var(--bg); }

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


/* Base class and styling for all openface symbols   <span class="set" data-set="R"></span>  */
.set::after {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 130%;
  line-height: 1; /* Helps with vertical alignment */
	/* Baseline Adjustment (New Style) */
  vertical-align: -0.1em; /* Adjust this value (e.g., -0.1em to -0.2em) */
}

.set[data-set="R"]::after { content: "\211D"; } 
.set[data-set="Z"]::after { content: "\2124"; }
.set[data-set="N"]::after { content: "\2115"; }
.set[data-set="Q"]::after { content: "\211A"; }
.set[data-set="C"]::after { content: "\2102"; }
.set[data-set="in"]::after { content: "\2208"; } /* ∈ &isin; */

}

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

	.wideOnly {
  display: block !important; /* or initial, or flex, depending on the element */
}






}

/* mobile */

@media (max-width: 440px) {  

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

	.video { float:none;  }


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


/* just so that floated divs will now center themselves neatly, except if marked 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(--blue); 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 */
    gap: 0.2rem; /* This gap now applies vertically between stacked items border: 1px solid red; */
  }
  .many.cols2, .many.cols3, .many.cols4, .many.cols5 {
    grid-template-columns: 1fr; /* Change to a single column, stacking items */
    gap: 0.1rem; /* This gap now applies vertically between stacked items border: 1px solid red; */
		justify-items: center;        /* center each cell's content horizontally */
  }
  .many.cols2 > :nth-child(2n),
  .many.cols3 > :nth-child(3n),
  .many.cols4 > :nth-child(4n),
  .many.cols5 > :nth-child(5n) {
    margin-bottom: 2rem;      /* adjust to taste */
  }
	  /* but remove it for the very last element */
  .many > :last-child {
    margin-bottom: 0;
  }
.two .lt:empty, .many .lt:empty {
	padding: 0px;   /* remove the padding */
	margin: 0px;   /* remove the padding */
	/* border: 1px solid yellow; */
}

	/*padding: 0.5rem 1rem;  Adjust overall padding for mobile layout */
  .two.no-stack {
  	grid-template-columns: minmax(auto, max-content) minmax(auto, max-content);
  }
	
	/* Adjust text alignment and padding for stacked items */
  .two .lt    { text-align: left;  margin-top:8px; } 
  .two .rt    { text-align: center;    } 
  .two .rtlt  { text-align: center;  } 
  .two .rtct  { text-align: center;  } 
  .two .rtrt  { text-align: right;   } 
	
	.two p {  grid-column: 1/-1; }
	.two .span2 { grid-column: 1/-1; }

  .wideOnly {
    display: none !important;
  }

}


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