*{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 :600px;
min-height : 100dvh ;
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.hnavbar1 {
	background: #303030;
	box-shadow: none}
	
	ul.hnavbar1 li a {
	border: solid 1px gold
	}

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

ul.hnavbar1 li:hover ul li a:hover{
	color:#fff;
	background:#303030;}
	} /*End Dark Mode settings*/


header ,   footer {
   display :flex; /* Alert browser to render flexbox */
   flex-wrap : wrap; /* Allow items to wrap when necessary */
   padding: clamp(3rem , 3rem + .5dvw , 4rem ) 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 */
        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 , nav { /*Begin nested main */
padding: 0 clamp(1.125rem, 1.125rem + 9dvw , 10dvw);


h1 , h2  {
color: dodgerblue;
font-weight: 300;
text-align : center;
margin : 1rem 0;
padding: 0 0
         }

h1 {
font-size: clamp(1.5rem , 1.5rem + .5dvw , 2.25rem);
line-height: clamp(1.8rem , 1.8rem + .5dvw , 2.7rem); /*1.2 to 1.5 X size of text */
}

h2 {
font-size: clamp(1.25rem , 1.25rem + .25dvw , 1.5rem);
line-height: clamp(1.5rem , 1.5rem + .25dvw , 1.8rem); /*1.2 to 1.5 X size of text */
}

p {
max-width: 65ch;
text-indent: 1rem;
margin : 1dvw auto; /*whitespace is your friend*/
  }

p.spacer {
font-size: 1rem;
display: block;
clear: both;
}
p a {
color : dodgerblue;
text-decoration : underline
}

p a:hover { color: red}

} /* 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.5rem , 1.5rem + 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 */
line-height: clamp(1.2rem , 1.2rem + .25dvw , 1.5rem);
text-indent: 0;
text-decoration : none;
padding: 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;
                 }
p a:hover {
color: #ff0000
}

} /*End nested footer*/


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



@media (max-width: 750px) {


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
}

}