*{margin:0 0 0 0;
padding:0 0 0 0;
}

html {
scroll-behavior: smooth;
-moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
box-sizing : border-box;
}

body {
max-width: 1920px;
min-width :360px;
min-height : 100svh ;
font-family: arial , helvetica , system-ui , sans-serif;
font-size: clamp(1.125rem , 1.125rem + .25dvw , 1.5rem);
line-height:  1.4; 
letter-spacing: 0;
font-style: normal;
font-weight: normal;
background: whitesmoke;
color: #000;
overscroll-behavior: contain;
-webkit-font-smoothing: antialiased;
 
}

:root::-webkit-scrollbar{
  display: none;
}

:root {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

@view-transition {
  navigation: auto;
}


/*Nested header*/

header {
  display : flex;
  flex-wrap :wrap;
  justify-content: flex-start;
  align-items: flex-start;
gap : 2dvw;
  padding: 3rem clamp(1.5rem, 1.5rem + 9dvw , 10dvw);
  padding-bottom: 0;
  background : linear-gradient(to bottom , dodgerblue , whitesmoke);}

   header p {
   color: #fff;
   font-size: clamp(1.5rem , 1.5rem + 1dvw , 3rem);
   line-height: 1.4;
  	font-weight: bold;
   text-indent:0;
   text-decoration : none;
	text-shadow: 1px 2px 2px #000;
	 margin: 0 0; padding: 0;
	 margin-bottom : 8pv;
	 padding-bottom: 8px
      }
      
      header p {
  view-transition-name: header p;
}

nav {
float: left;
width: 100%;
padding: 0 clamp(1.5rem, 1.5rem + 9dvw , 10dvw);
background : transparent;
} 




main , div.main , div.full , section {
 margin:  0;
padding: 2rem clamp(1.5rem, 1.5rem + 9dvw , 10dvw);
}


section {
content-visibility: auto;
}

div.container {
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 2dvw;
padding: 1rem 0;
}


div.container div.column {
flex: 1;
}

div.container div.column-2 {
flex: 2;
}

div.container div.column-3 {
flex: 3;
}

div.container div.column-cq { /*See @container below*/
flex: 1;
container-type: inline-size;
}



div.flex-container { 
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content : space-between;
gap : 2dvw;}

div.flex-container div.left {
flex: 1;
}
div.flex-container div.left-3 {
flex: 3;
}
div.flex-container div.right , div.middle {
flex: 1;
}

div.tbl-container {
display: flex;
flex-wrap: wrap;
justify-content :space-between;
gap : 4px;
max-width: 650px;
margin:0 auto
}

div.tbl-column {
flex: 1;
border: solid 1px dodgerblue;
padding: 2px;
max-width: 25dvw;
text-align: center;
font-size: 1.125rem
}

main p ,
div.left p ,
div.middle p ,
 div.right p ,
 div.main p ,
 div.full p ,
 div.column p ,
 div.column-cq ,
 div.flex-container p ,
code, li a , ul.nolist li a {
font-size : clamp( 1rem , 1rem + .5dvw , 1.5rem ); /* Adjusts between 18px and 24px */
  line-height:  1.4; /* 1.2 to 1.5 times size of text */
  text-indent: 1.25rem;
margin : 0 auto ;
text-wrap: pretty;}


/* li a {
font-size: clamp(1.125rem,  1.125rem + .325dvw  , 1.5rem);
text-underline-offset: 0.25em;
}*/

a {
color: #000;
font-size: inherit;
text-underline-offset: 0.25em;
}
a:hover {
color: #ff0000;
}



.haze {
padding : 8px;
background: #E3F1FF;
border: none;
box-shadow:none;

}


footer { 
display : flex;
flex-wrap : wrap;
justify-content : space-between;
padding: 0 10dvw;
padding-bottom: 2rem;
gap : 1dvw;
background:linear-gradient(to top , dodgerblue , whitesmoke );
color: #000;
text-shadow : none;
content-visibility: auto;
}

footer div.ftr-left  { /* Child container */
  flex: 1;
  background-color: transparent;
  text-align: left;
  margin: 0;
  padding: 0;}
             
 footer div.ftr-middle { /* Child container */
  flex: 4; /* width 4 times size of default */
  flex-wrap : wrap;
  text-align : center;
  background-color: transparent;
  margin: 0;
  padding: 0; }

 footer div.ftr-right { /* Child container */
  flex: 1;
  text-align : right;
  background-color: transparent;
  margin: 0;
  padding: 0;
            }
            
            
footer div.ftr-left a {
text-shadow: 1px 1px 4px #000;
font-size: clamp( 2rem , 2rem + 2dvw , 4rem); /* finger size */
text-decoration : none
                }
                
footer div.ftr-middle p {
font-size: clamp( 1.125rem , 1.125rem + .125dvw , 1.25rem); /* text size */
line-height: 1.4;
text-align: center;
color: #000 !important;
text-indent: 0;
margin : .5rem 0 ;
background: transparent
                  }

 footer div.ftr-right a {
text-shadow: 1px 1px 4px #000;
font-size: clamp( 2rem , 2rem + 2dvw , 4rem); /* finger size */
text-decoration : none;
                 }
footer div.ftr-left a:hover , footer div.ftr-right a:hover {
text-shadow: none}

 img {
max-width: 100%;
margin: 1rem;

}


img.img-h {
	float:none;
display:block;
margin: 1dvw auto;

}
img.img-h:hover {

	transition: transform 0.4s ease;
transform: scale(2); }

img.l-img {
float:left;
display: block;
}
img.r-img{
float:right;
display:block;
}

@container (max-width: 500px) {
div.container div.column-cq { 
img.l-img , img.r-img {
display:block;
float:none;
margin :0 auto}
}}



img.centerimg{
float:none;
display:block;
margin: 1dvw auto;
}

figcaption { text-align: center}

h1 , h2 , h3 {
	text-align: center;
	font-weight: normal;
	letter-spacing: -0.04rem
}
 h1 {
   font-size: clamp(1.5rem, 1.5rem + .625dvw , 2.25rem);
   line-height : 1.2 ;
   margin-top: 3rem auto;
	text-wrap: balance;
 }
 h2 {
   font-size: clamp(1.375rem, 1.375rem + .625dvw , 1.875rem);
   line-height : 1.2 ;
   margin: 1dvw auto;
 }
 h3 {
   font-size: clamp(1.125rem, 1.125rem + .375dvw , 1.5rem);
   line-height : 1.2 ;
	margin: 1dvw auto;
}
 h2.huge {
font-size: clamp(2rem, 2rem + .625dvw , 3rem);
   line-height : 1.2 ;
   color: red;
   font-weight: 600;
   text-shadow : 1px 1px 2px #000;
   margin: 1dvw auto;
}
ol ,dl ,
ul.nolist {
max-width:65ch;
font-weight: normal;
padding-left:1.5rem;

}


ul.nolist  {
list-style: none;
padding-left: 2rem;
}
ul.nolist li a {
text-underline-offset: 0.25rem;
}
pre {
font-size: clamp(1rem,  1rem + .25dvw  , 1.125rem);
line-height: 1.4;
white-space: pre-wrap;
padding: 1rem ;
margin: 1dvw auto;
background : linear-gradient(to bottom right , #c0c0c0 , whitesmoke);
border-radius: 1rem;
border: outset 2px whitesmoke;
/*border-top: rgba(0,0,0,0.025);
border-left: rgba(0,0,0,0.025);*/
}

pre.small {max-width: 40ch}
pre.medium {max-width: 85ch}
pre.large {max-width: 90dvw ; margin : 0 auto}
ol.norm1 ,
pre.norm1 {
max-width: 65ch;
margin: 0 auto }

pre:hover , pre.small:hover , pre.medium:hover , pre.large:hover {
/*box-shadow: 1px 1px 4px #444*/
border:outset 2px #000
}



p.note  {
max-width: 65ch;
float:none;
color: #000;
font-weight: normal ;
text-shadow: none;
padding: 1rem;
margin: 1dvw auto;
border-radius: 1rem;
border: solid 4px dodgerblue;
background: #C7E3FF ;
box-shadow: 2px 2px 2px whitesmoke;
}

p.note:hover {box-shadow: 2px 2px 2px #444;}

p.note a {color: #000 }
p.note a:hover {color: red}
span.blue {color: #8fc7ff;  writing-mode: vertical-lr; text-orientation: upright; letter-spacing: -1rem; line-height:1.5rem; }



p.rainbow  {
max-width: 65ch;
float:none;
color: #000;
text-shadow: none;
padding: 1rem;
margin: 1dvw auto;
border-radius: 1rem;
background: linear-gradient(135deg, #ff0000 0%, #ffd700 50%, dodgerblue 100%);
}
.rainbow {
color: #000;
text-shadow: none;
}
.copypaste  {
float:none;
width: 70%;
color: #fff;
background-color : dodgerblue;
text-align : center;
text-indent: 0;
text-shadow: 1px 1px 1px #000;
padding: 1rem;

border-radius: 1rem;
border: solid 2px rgba(0,0,0, 0.75);
border-top: rgba(0,0,0,0.025);
border-left: rgba(0,0,0,0.025);
margin: 1dvw auto;
}
.exercise  {
text-align: center;
float:none;
width: 60dvw;
margin: 0.5rem auto;
color: gold !important;
background: #000;
padding:.625rem;
border-radius: 1rem;
border: solid 1px;
}

.main-exp pre {
font-size: clamp(1.125rem, 1dvw + .5rem , 1.25rem);
padding: 1rem 2rem;
margin: 0;
background-color: #c4e3ff;
border-radius: 1rem;
border: solid 1px;
margin-bottom: 4px;
}


* b {
font-weight: 700}

.clear {
clear:both;
 padding: 0 0;
margin:0;
line-height: 1rem;

 }

.spacer {
display: block;
line-height: 1.5rem;
clear:both;
}

.code , .noindent {
text-indent: 0 !important;
 }

.centerzero  {
text-align: center;
text-indent: 0 !important;
margin: 1rem 0
 }

input , label , select {
font-size: 1.25rem}

hr {
border:solid #1e90ff 2px; 
height: 2px; 
display: block;
max-width: 65ch; 
margin: 0 auto;
}


dl   {
font-weight: normal;
max-width: 65ch;
margin: 0 auto;

}


 dd  {
padding: 0 1rem;

}

span.codehilite , span.red {
color: #cc3100;
font-weight: bold;
text-shadow: 1px 1px 1px #000
}

.quiz {
display:block;
width: 60%;
float:none;
color: #000;
background: gold;
margin: 1dvw auto;
padding:.625rem;
border-radius: 1rem;
border: solid 2px ;
box-shadow: 2px 2px 2px #000;
}

.quiz:hover {box-shadow: none}

.quiz p {
text-shadow :none;
background: gold;
text-align: center;

font-weight: bold;}

.quiz h2 , .quiz a  {
text-shadow : none;
background:gold;
font-weight: bold
}

.quiz a  {
text-decoration: underline;
}
.quiz a:hover{color:#ff0000}


.advanced {
max-width: 30dvw;
margin: 2dvw auto;
padding: 1rem;
border-radius: 1rem;
border: solid 1px;
background: red;
h2 , p , p a  {
color: #fff !important;
text-shadow: 1px 1px 2px #000
}}

blockquote {
margin:1dvw auto;
padding: .625rem
}

details {
border: none;
width: 50dvw;
min-width:340px;
max-height: 300px;
padding: 1dvw;
overflow: scroll;
scrollbar-width:none;
overscroll-behavior: contain;
}
details[open] {
border: solid 1px;
p , p a {
		color: #444;
		font-size: clamp(1.125rem , .095rem + .25dvw , 1.25rem);
		line-height:  1.4; }

}

details[open]:hover {
border: 1px solid;
box-shadow: 1px 1px 8px #444 ;

}


summary {
	width: 200px;
	min-width: 180px;
	background:dodgerblue;
	color:#fff;
	font-weight: 600;
	text-shadow: 1px 1px 2px #444;
	border: solid 1px #444;
	padding: 8px 16px;
	box-shadow: 1px 1px 8px #444
}

summary:hover {
box-shadow: none;
cursor: pointer}

summary::marker {
  color: #fff;
  font-size: 1.125em;
}

table.tbl{
/*width: 98%;*/
min-width: 33dvw;
margin: 1rem auto;


}

table.tbl tr , #main tr{
vertical-align: top
}

table.tbl  tr th, #main tr th , table.chart tr th{
box-shadow: none


}

table.tbl tr td , table.tbl tr th ,table.main tr td{
font-size: clamp(1rem , 1rem + .25dvw , 1.25rem);
padding: .25rem;
text-align: center;
border: solid 2px dodgerblue
}



table.tbl tr td li {
  text-align: left;
  margin-left: 1.25rem
}


iframe.iframeview {
display:block;
width: 302px;
height:302px;
margin: 0 auto;
margin-bottom: 8px;
box-shadow: none;
border:solid 1px gold;

}
/* buttons */

 
 /* Define modal button */
	
  .modal-button {
  	position: fixed;
  	top: .125rem; left:0;
  	z-index: 10;
		font-family : arial;
		font-size: 1.25rem; 
		text-shadow: 1px 1px 2px #000;
		text-decoration: none;
		color : #fff; 
		background : dodgerblue;
		padding: 12px 16px;
		border: solid 1px #fff;
		border-radius: 8px;
      box-shadow: 1px 2px 8px #000;}
      
      .modal-button:hover {
background : #0066cc;
color:#ddd !important;
box-shadow: none;
text-shadow:none;
border: solid 1px;
cursor: pointer;
}

/* Close button styling */
    .close a {
      position: absolute;
      top: 20px;
      right: 15px;
      color: dodgerblue;
		font-size: 28px;
      font-weight: 500;
		padding: 1px 4px;
		text-decoration: none;
		cursor: pointer;
    }

    .close a:hover,
    .close a:focus {
      color: red;
      text-decoration: none;
    }
    
    /* Show modal when targeted */
  #openModal:target {
    display: flex;
  }

  /* Modal background */
  .modal {
  	
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
  }

  /* Modal content */
  .modal-content {
  
  position: fixed;
    top: 2rem; left: 0;
    
    background: rgba(0,0,0,0.6);
    padding: 0;
    border-radius: 1rem;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    box-shadow: 0 5px 15px #444;
  }

  /* Iframe inside modal */
  .modal-content iframe {
  	 width: 100dvw;
    height: 21rem;
    border: none;
   
    
  }
  
  
 	
.menu-display { display: none} /* hide modal button */

 

/*The X*/
button.explain {
	width: 50px;
	float:left; 
	border: none; 
	box-shadow:none; 
	background:whitesmoke; 
	font-size: 2rem; 
	color:#000; 
	padding: 4px 5px}
	
	/*The button*/
	#explanation, #explanation2 {
	background:red; 
	font-size: 1.375rem; 
	font-weight: 700;
	color:#fff;
	text-shadow: 1px 1px 2px #000;
	box-shadow: 1px 1px 8px #444;
	padding: 8px 16px;
	}
	
	#explanation:hover , #explanation2:hover {
	box-shadow:none;
	cursor: pointer}


.buttonx { /* The X*/
position: absolute; 
top :0; right: 20px;
background:whitesmoke; 
font-size: 1.25rem; 
color:#000;
padding: 4px 5px; 
margin: 1dvw 5%;
border: none
}

#btn , #btn2 , #btn3 { /* The Button*/
max-width: 200px;
min-width: 180px;
background: dodgerblue;
 color:#fff;
 font-size: 1.375rem;
 font-weight: 600;
 text-shadow: 1px 1px 1px #000;
 padding: 8px 16px;
 border: solid 1px #444;
 box-shadow: 1px 1px 8px #444;
 }
 
 #btn:hover , #btn2:hover , #btn3:hover {
 box-shadow: none;
 cursor: pointer;}

 
 #popup1 , #popup2 , #popup3 , #popup4 { /* The popup */
max-width:360px;
height: 400px;

 margin :0 auto;
 scrollbar-width:none;
 border: solid 1px #444;
 overscroll-behavior: contain;
 box-shadow: 1px 1px 8px #444}
 
  
 form div.content  {
 	
  padding: 1rem 2rem;
  overscroll-behavior: contain;}
  
  form div.content p {
  font-size: 1rem}
  form div.content h2 {
  font-size: 1.125rem}
  
  

p a.top-button , 
p a.bottom-button , 
button.top-button , 
button.bottom-button {
/*Button*/
display : flex;
justify-content : center;
align-items: center;
position: fixed; /*Make it Sticky*/
bottom: 2rem;
right: 1.5rem;
width: 3rem;
height: 3rem;
background: darkgray;
border: solid 4px silver;
border-radius: 50%;
box-shadow: 1px 1px 4px #000;
font-size:2rem;
text-decoration: none;
text-indent:0;
text-shadow : 1px 1px 1px #000;
z-index: 2;
}
p a.bottom-button , button.bottom-button {
/*Button*/
position: fixed; /*Make it Sticky*/
top: 2rem;
right: 1.5rem;
}

p a:hover.top-button ,
p a:hover.bottom-button , 
button.top-button:hover , 
button.bottom-button:hover {
background-color: silver;
box-shadow: 1px 1px 4px #000 inset !important;
text-shadow:none;
cursor:pointer;
}




/* Exit
p a.button1 {
position: fixed;
top:1rem;
right: 20dvw;
border: none;
border-radius: 45px;
}

p a.button1 {
font-family : arial;
font-size: 1.25rem;
color : #fff;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
background : #ff931e;
padding : .5rem .75rem;
text-indent: 0;
box-shadow: -2px -2px 8px #000 inset;

}

p a:hover.button1 {
background : whitesmoke;
color:#000 ;
text-decoration: none;
box-shadow: 2px 2px 8px #000 inset;
text-shadow:none;
border: none
}*/






@media (max-width: 650px) {
nav ul.hnavbar2 {display: none} /*Hide Nav Menu*/

div.menu-display  {display:block} /*Show or Hide Toggle Button */


#myexplanation , #mywintip {
float:left;
width: 80dvw;
height: 500px;
padding: 5dvw 0;
margin: 0 0;
display:block;
position:absolute;
z-index: 5;
border: solid 1px
}



}

@media (max-width: 400px) {
	#myexplanation, #mywintip {
	float:left;
	width: 80dvw;
	min-width:300px;
	height: 500px;
	padding: 5dvw 0;}
		
	
}







	 @media (max-width: 1118px) {
  div.flex-container div.left , 
  div.flex-container div.right {
  flex: 100%;}
    
  div.container div.column {  
    flex: 100%;
        }
  
   
/*header p {padding: 0; margin: 0}*/
header {
display: flex;
flex-direction: column;
justify-content: center;
  align-items: center;
}
img.l-img , img.r-img , img.centerimg {
max-width : 100%;
display: block;
float: none;
margin: 2rem auto;
clear:both}
}




 @media (max-width: 475px) {
 
 header {display: flex; padding: 3rem; margin: 0}
 div.main , div.full , div.flex-container {
 padding: 2rem clamp(1rem, .090rem + .25dvw , 5dvw);}


.btn , .btn2 , .btn3 {
	position:relative;
	z-index: 1;
	top:0;
	display: block;
	padding-top:0;
   margin:0 auto;}

}




@media  (max-width: 360px){
	header ,  div.main , .left, .right, div.chart-half , div.chart-right {
	float:none;
	display:block;
	max-width:100%;
	margin: 0 auto;
	}
	details {max-width: 300px;}


}