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

html {
scroll-behavior: smooth
}

body{
max-width: 100dvw; /*For compact design use max-width : ###px or rem */
min-width :320px;
min-height : 100dvh ;
margin:0 auto; /* centers compact design */
font-family: Arial , system-ui , Helvetica , sans-serif;
font-size: clamp(1.125rem , 1.125rem + .325dvw , 1.5rem);
line-height: clamp(1.5rem , 1.5rem + .25dvw , 1.8rem); /* 1.2 to 1.5 X size of text */
font-style:normal;
font-weight: normal;
color:#444;
background-color : whitesmoke;
box-sizing : border-box;
}

/* Default Light Mode Styles */
body.light-mode {
            background-color: whitesmoke;
            color: #444;
        }
body.dark-mode { /* Dark Mode Color Change*/
            background-color: #303030;
            p , pre, ul , label {color: #eee}
            
       div.main	h1 , div.main h2 , div.main p a {color: gold}    
       div.main p a:hover {color: red}
header {
background:linear-gradient(to bottom , dodgerblue, #303030);
}

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

ul.vnavbar1 {
background: #303030;}

ul.vnavbar1 a {
color: gold;
background-color: #303030;
border: solid 1px gold
}

ul.vnavbar1 li:hover a{
	background-color:#778899;
border: solid 1px gold;}

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


header ,  footer {
   display :flex; /* Alert browser to render flexbox */
   flex-wrap : wrap; /* Allow items to wrap when necessary */
   padding: clamp(2rem , 2rem + .5dvw  , 3rem)  clamp(1.125rem,  1.125rem + 9dvw  , 10dvw);
   border: none

}



header { /*Begin Nested parent header*/
        background:linear-gradient(to bottom , dodgerblue , whitesmoke );
        justify-content : flex-start;
        align-items : flex-start; /* When nesting don't forget the closing semi-colon */
			margin-bottom : 0;
        p { /*nested paragraph*/
        font-size: clamp(1.5rem , 1.5rem + 1dvw , 2.5rem); /* Adjusts from 24px to 40px*/
        text-indent : 0;
        color:#fff;
        text-shadow : 1px 1px 2px #000;
           }
        } /* End nested header */

div.main { /*Begin nested parent main*/
padding: 0 clamp(1.125rem, 1.125rem  + 9dvw , 10dvw);


h1 , h2  {
	font-size: clamp(1.5rem , 1.5rem + .5dvw , 2.25rem);
	line-height: clamp(1.75rem , 1.75rem + .5dvw , 2.5rem); /*1.2 to 1.5 X size of text */
	color: dodgerblue;
	font-weight: 300;
	text-align : center;
	margin : 1rem 0
         }
p {
	text-indent: 1rem;
	margin : 1dvw 0; /*whitespace is your friend*/
  }

p.clear {
	font-size: 1rem;
	display: block;
	clear: both;
}
 .column p a {
	color : dodgerblue;
	text-decoration : none
}
.column p a:hover {
	color: #ff0000
}
} /* End nested main */

footer { /*Begin nested parent footer*/
	justify-content : center;
	
	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.75rem , 1.75rem + 1dvw , 3rem); /* finger size */
text-decoration : none
                }

 div.ftr-middle p ,
div.ftr-middle p a {
font-size: clamp( 1rem , 1rem + .25dvw , 1.125rem); /* text size */
text-indent: 0;
text-decoration : none;
padding: 0 ;
background: transparent
                  }

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

} /*End nested footer*/


/*Define Images*/
img.r-img {
max-width: 100%;
margin: 1rem;
box-shadow:2px 2px 4px #000;
float:right}



@media (max-width: 800px) {

div.column { /* Force columns to wrap */
flex : 100%}

header {
flex-direction : column; /* Change flex-direction to column */
justify-content : center; /* center content */
align-items: center /*center items */
}

img.r-img {
float:none;
display: block;
margin: 0 auto
}

}






















/