body {
 					background-color: #eaeffa;
 					font-family: "Verdana", "Helvetica", Arial, serif, sans-serif;
 					font-size: 18px;
 					padding: 20px;
 				}
 				
 				/* Header/Title - NOTE: use "." for class and "#" for id */
                .kamheader1 { 
                	color: white; 
                	/* font-size: xxxx-large; */
                	font-size: 50px;
                	font-weight: bold; 
               		font-family: "Verdana-Bold", "Helvetica-Bold", "Verdana", Arial, serif, sans-serif; 
               		padding: 50px;
               		/* background-color: blue; */
               		background-image: url("banner3.png");
                 	/* height of text */
                 	height: 98px;
                 	/* you can use line-height = to height to center vertically; or use padding 20px 0 */
                 	line-height: 98px;
                 	margin-top: auto;
                 	margin-bottom: auto;
                 	text-indent: 20px;
                 	
                }
                .myTitle {
            		/* dark blue */
                	background-color: #000099;
                	width: 800px;
                	padding: 5px;
                }
                
                /* Mission/Current Apps */
                 h2 {
                	color: #5c85d6;
                	padding: 20px 0 0 0;
                }
                
                /* any div tag nested inside a div with a class of currentAppsList */
                div.currentAppsList div {
                	padding-bottom: 20px;
                }
                
 				/* TygerMatrix founded... */
                h3 {
                	position: relative;
                	padding: 50px 50px 50px 50px;
                    color: #193366;
                    border: 3px solid #5c85d6;
                    margin-top: 10px;
                    margin-right: auto;
                    margin-bottom: 10px;
                    margin-left: auto;
                    /*width: 75%;*/
                    vertical-align: text-top;
                    }
                    
                /* ChatGPT Explanation:
				h3 contains the text and positions it above the background image.
				The ::before pseudo-element acts as the background layer with an image and 
				opacity set to 0.5, without affecting the h3 text.
				The z-index settings ensure that the text stays above the background. */  
                h3::before {
                    content: "";
    				position: absolute;
    				top: 0;
    				left: 0;
    				right: 0;
    				bottom: 0;
   					background-image: url("banner3.png"); /* Replace with your image URL */
    				background-size: cover; /* Adjust as needed */
    				background-position: center;
    				opacity: 0.1; /* Set background opacity */
   					z-index: -1; /* Places background behind the text */
                }
                
                /* for any "icons" used on the page */
                .icons {
                	width: 100px;
                 	height: 100px;
                 	float: left;
                 	border: 5px solid white;
                 	/* for rounding corners */
  					border-radius: 10px;
                }
                
                /* Title associated with the icon - ie. Hazel's Recipes */
                .iconTitle {
                	/* height of text */
                 	height: 100px;
                 	/* you can use line-height = to height to center vertically; or use padding 20px 0 */
                 	line-height: 100px;
                	color: blue;
                	padding-left: 10px;
                }
                
                /* Textual description for the icon - ie. Hazel's Recipes is an app... */
                .iconDesc {
                	padding: 10px;
                	background-color: #c1d0f0;
                	margin-top: 20px;
                	/* margin-right: 50%; */
                	margin-bottom: 10px;
                	margin-left: auto;
                }
                
                /* italicize list */
                .ital {
                	font-weight: normal;
                	font-style: italic;
                	margin: 20px;
                }
                
                /* any li tag nested inside a ul with a class of ital */
                ul.ital li {
                	padding: 10px;
                }
                
                /* use # for id - in this case, refers to id="copyright" in html doc */
                #copyright { 
                	color: #5c85d6; 
                	font-size: medium; 
                	font-family: "Verdana", "Verdana-Bold", Arial, serif, sans-serif;
                	/* border: 5px solid green; */
                    padding: 10px;
                    padding-top: 50px;
                 }          
                 
                 /* change the color for links */
                 a:visited { color: purple}
                 a:hover { color: green}
                 
                 
                 /******************* for navigation bar stuff ******************/
                 /* Navigation bar stuff from KamLesson11DropDownMenusPage307 */
                 
                 #navigationBar {
                    position: relative;
                    margin-top: 0px;
                    padding: 0px;
                    height: 30px;
                    width: 100%;
                }
                
                /* whole bar across */
                #navigationBar ul {
                    margin: 30px 0px 0px 0px;
                    padding: 0px;
                    position: absolute;
                    height: 100%;
                    width: 100%;
                    list-style-type: none;
                    background-color: none; 
                    overflow: visible;
                }
                /* about bar */
                #navigationBar ul > li {
                    display: block;
                    float: right;
                    height: auto;
                    /* menu header's items width */
                    width: 120px;
                }
                
                /* about bar */
                #navigationBar li > a {
                    display: block;
                    padding: 0 5px 0 5px;
                    height: 100%;
                    width: 109px;
                    /* border-right: 1px white solid; */
                    line-height: 30px;
                    font-family: "Verdana-Bold", "Helvetica-Bold", "Verdana", Arial, serif, sans-serif; 
                    font-size: 15px;
                    text-align: center;
                    text-decoration: none;
                    /* dark blue */
                    background-color: #000099; /* #eeeeee; */
                    color: white; /* #5d5636; */
                }
                /* container for inside about bar */
                #navigationBar ul ul {
                    margin-top: 2px;
                    display: none;
                    position: static;
                    height: auto;
                    width: 100%;
                    border: 1px solid blue; /* #666666; */
                    background-color: white; /* #dddddd; */
                }
                /* container for inside about bar */
                #navigationBar ul ul li {
                    position: relative;
                    float: none;
                    display: block;
                    height: 28px;
                    width: 100%;
                    border: none;
                    background-color: white;
                }
                
                /* inside about box */
                #navigationBar ul ul li > a {
                    height: 100%;
                    width: 118px;
                    padding: 0 0 0 4%;
                    line-height: 28px;
                    /* light gray */
                    background-color: #c2c2d6;
                    border: none;
                    color: black;
                    font-size: 12px;
                    font-style: normal;
                }
                
                #navigationBar li:hover > a {
                    color: blue;
                    background-color: white; /* #eeeabe; */
                }
                
                #navigationBar li:hover > ul {
                    display: block;
                }
                /****************************************************************/
                
                /******************* for about and contact us ******************/
                /* semi transparent background for about and contact us... */
                .transBackground {
                	position: relative;
                	padding: 20px 50px 50px 50px;
                    color: #193366;
                    border: 3px solid #5c85d6;
                    margin-top: 10px;
                    margin-right: auto;
                    margin-bottom: 10px;
                    margin-left: auto;
                    /*width: 75%;*/
                    vertical-align: text-top;
                    height: 950px;
                    }
                    
                /* ChatGPT Explanation:
				h3 contains the text and positions it above the background image.
				The ::before pseudo-element acts as the background layer with an image and 
				opacity set to 0.5, without affecting the h3 text.
				The z-index settings ensure that the text stays above the background. */  
                .transBackground::before {
                    content: "";
    				position: absolute;
    				top: 0;
    				left: 0;
    				right: 0;
    				bottom: 0;
   					background-image: url("banner3.png"); /* Replace with your image URL */
    				background-size: cover; /* Adjust as needed */
    				background-position: center;
    				opacity: 0.1; /* Set background opacity */
   					z-index: -1; /* Places background behind the text */
                }
                /* title bar for about and contact us */
                .myTitle2 {
                	background-color: #000099;
                	width: 800px;
                	padding: 5px;
                	font-size: 35px;
                	font-family: "Verdana-Bold", "Helvetica-Bold", "Verdana", Arial, serif, sans-serif;  serif, sans-serif;
                }
                /********************************************************************/