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("apple2cBanner4.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;
                }
                
                 /* save in case you want a background box around header title */
                #kambox1 {
                	background-color: clear;
                	font-size: 40px;
                	font-weight: bold; 
               		font-family: "Verdana-Bold", "Helvetica-Bold", "Verdana", Arial, serif, sans-serif; 
                }
               
 				/* Description of app */
                h3 {
                	position: relative;
                	padding: 25px 50px 25px 50px;
                    color: #193366;
                    border: 3px solid #5c85d6;
                    margin-top: 50px;
                    margin-right: auto;
                    margin-bottom: 10px;
                    margin-left: auto;
                    /*width: 75%;*/
                    vertical-align: text-top;
                }
                /* background image in back of description of app */
                /* 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("apple2cBanner4.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 links to privacy policy, tos, and back to home page */
                .noBorder {
            	    border: none;
                    padding: 10px;
                    margin-right: auto;
                    margin-left: 25px;
                    /*width: 75%;*/
                    vertical-align: text-top;
                    font-weight: normal; 
                    font-size: 15px;
                    }
                    
            	/* any h4 tag nested inside a div with a class of noBorder */
                div.noBorder h4 {
                	padding: 10px;
                }
                
                /* for any "icons" used on the page */
                .icons {
                	width: 100px;
                 	height: 100px;
                 	float: left;
                 	border: 5px solid white;
                 	/* for rounding corners */
  					border-radius: 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}
                 
                 
                 /* if you want a grid of pictures */
                 .grid-container {
            		display: grid; /* Enable grid layout */
           			grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
            		grid-gap: 10px; /* Space between grid items */
        		}
        		.grid-item img {
            		width: 100%; /* Make images responsive */
           		 	height: auto;
       			 }
       			 
       			 /* if you want a horizontally scrolling container of pictures */
       			 .scroll-container {
            		display: flex; /* Arrange items in a row */
            		overflow-x: auto; /* Enable horizontal scrolling */
            		gap: 10px; /* Space between images */
            		padding: 10px; /* Padding inside the scroll container */
            		white-space: nowrap; /* Prevent wrapping */
            		border: 2px solid #ccc; /* Optional: border for visibility */
        		}
        		.scroll-container img {
           		 	width: 250px; /* Set a consistent width for images */
            		height: auto; /* Maintain aspect ratio */
            		border-radius: 8px; /* Optional: rounded corners */
            		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: shadow for aesthetics */
        		}
        		#scrollHeader {
        			color: #5c85d6;
        			margin: 20px 0 5px 15px;
        			font-style: italic;
        		}
        		
        		#backbutton {
        			position: relative;
        	 		float: right;
        	 		bottom: 10px;
        	 		right: 10px;
        		}