* {
margin: 0 0 0 0;
padding: 0 0 0 0;
box-sizing : border-box
}

html {
scroll-behavior: smooth
}


body {
max-width: 100dvw;
min-width : 360px;
color: #444;
background: whitesmoke;
font-family: Helvetica , Roboto , arial, serif;
font-style: normal;
font-weight: normal
}

/* Default Light Mode Styles */
body.light-mode {
            background-color: whitesmoke;
            color: #444;
        }

body.dark-mode {
            background-color: #303030;
            p , pre, ul , label  {
				background: transparent;
				color: #eee}
header {
background:linear-gradient(to bottom , dodgerblue, #303030);
}

.container ,
.flex-container ,
.flex-container .column ,
.column-front {
background: #303030;
}

footer {
background:linear-gradient(to top , dodgerblue, #303030);
 div.ftr-middle p,
 div.ftr-middle p a { color: #eee !important;}
}

ul.hnavbar1 {
background: transparent;}

ul.hnavbar1 li:hover a {
	background-color:#778899;}

ul.hnavbar1 li:hover ul li a:hover{
	color:#fff;
	background:#303030;}
        }



header { /* Begin nested header */
	display: flex; 
	flex-wrap : wrap;
	justify-content : flex-start;
	background:linear-gradient(to bottom , dodgerblue, whitesmoke);
	box-shadow: none; 
	padding : 4dvw 10dvw;
	padding-bottom : 0;

	p {
	font-size: clamp(1.5rem , 1.5rem + .5dvw , 2.25rem);
	line-height: clamp(2rem, 2rem + .5dvw , 3.375rem );
	color: #fff;
	font-weight : bold;
	text-indent: 0px;
	text-shadow: 1px 1px 3px #000;
}
}


div.main , nav , main , section {
padding: 0 10dvw;
}


div.container { /*nested main*/
display: flex;
flex-wrap : wrap;
justify-content : space-between;
background-color: whitesmoke;
padding : .5dvw 10dvw;
}

div.container .column-front {
flex: 25%;
padding: 0 1dvw
}




div.flex-container { /*Nested container*/
display: flex;
flex-wrap : wrap;
justify-content : space-between;
gap: 2dvw;
background-color: whitesmoke;
padding : .5dvw 10dvw;
} 

div.flex-container .column { 
flex : 1;
background: whitesmoke;
padding: 0
}




img.l-img {
max-width:100%;
float:left;
margin:1rem;
box-shadow: 1px 1px 4px #000;
}


img.r-img {
max-width:100%;
float:right;
margin: 1rem;
box-shadow: 1px 1px 4px #000;
}
img.centerimg {
max-width: 100%;
display : block;
float: none;
margin : 1rem auto;
box-shadow: 1px 1px 4px #000;
}



h1 , h2 , h3 {
	text-align:center;
	color: dodgerblue;
	}

h1 {
font-size: clamp(1.5rem , 1.5rem + .5dvw , 2rem);
line-height :  clamp(2rem , 2rem + .5dvw , 3rem);
}



h2 {
font-size: clamp(1.25rem , 1.25rem + .25dvw , 1.5rem);
line-height : clamp(1.5rem , 1.5rem + .25dvw , 1.8rem);
margin : 1rem 0;
}

h3 {
font-size: clamp(1.125rem , 1.125rem + .25dvw , 1.375rem);
line-height : clamp(1.35rem , 1.35rem + .25dvw , 1.65rem);
margin : 1rem 0;
}

p {
font-size : clamp( 1.125rem , 1.125rem + .25dvw , 1.5rem); 
  line-height : clamp(1.575rem , 1.575rem + .25dvw , 2.1rem);
text-indent : 1.25rem;
margin : 1rem 0
}

a {
color: dodgerblue;
text-decoration: none;
}

a:hover {
color: red;
}

p.spacer {
font-size : 2rem;
clear:both
}

p.clear {
line-height: 2px;
clear: both
}
p.code {
text-indent: 0;
}

.codehilite {
color: red;
font-weight: normal}


pre , ul { 
font-size: clamp(1rem , 1rem + .25dvw , 1.25rem);
}

pre  { /*Wrap Overflow*/
  white-space: pre-wrap;
  }

ul.nolist {
list-style : none;
margin : 0 3rem
}

hr { color: dodgerblue}


footer { /*Begin nested parent footer*/
display : flex;
flex-wrap : wrap;
justify-content : space-between;
padding: 0 10dvw
;

gap : 1dvw;
background:linear-gradient(to top , dodgerblue , whitesmoke );
color: #000;
text-shadow : none;

 div.ftr-left  { /* Child container */
  flex: 1;
  background-color: transparent;
  text-align: left;
  margin: 0;
  padding: 0;
               }


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

 div.ftr-right { /* Child container */
  flex: 1;
  text-align : right;
  background-color: transparent;
  margin: 0;
  padding: 0;
               }

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

 div.ftr-middle p {
font-size: clamp( 1.125rem , 1.125rem + .125dvw , 1.25rem); /* text size */
line-height: clamp( 1.35rem  , 1.35rem + .125dvw , 1.5rem  );
text-align: center;
color: #000 !important;
text-indent: 0;
margin : .5rem 0 ;
background: transparent
                  }

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

div.ftr-middle p  a {
color: #0066cc
}

div.ftr-middle p  a:hover {
color: #ff0000
}
}



@media  (max-width: 1000px) {
div.container .column-front {
flex: 50%;
}

div.flex-container .column {
flex: 100%
}

header {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

img.l-img , img.r-img {
display: block;
max-width: 70%;
float: none; 
margin : 1.25rem auto

}

}

@media screen and (max-width: 600px) {
  div.container .column-front , div.flex-container .column {
flex: 100%
}
}