body{
	margin:0;
	padding:0;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.5em;
}




#site_wrap{
	background-color:black;
	height:100vh;
	display:grid;
	grid-template-columns: 
			1fr 
			repeat(4,minmax(0,272px))
		    1fr 
		;
		grid-gap:0;
		grid-template-rows: 
		     104px
			 215px
			 min-content
			 min-content
			 min-content
			 1fr
	;
	grid-template-areas: 
		". header header header header ."
		  "featured_header featured_header featured_header featured_header featured_header featured_header"
		  ". featured_main featured_main featured_main featured_main ."
		  ". featured_profile featured_profile featured_profile featured_profile ."
		  ". content content content content ."  
		  "footer footer footer footer footer footer";	
		  min-height:100vh;	  	
}

.header{
	  background-color:white;
	  grid-area:header;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
}

.header .logo{
	width:150px;
	height:auto;	
}
.header .nav{
	list-style: none;
	padding:0;
	display: flex;
}
.header .nav a{
	text-decoration:none;
	border:2px solid #335625;
	border-radius:50em;
	color:#335625;
	padding:15px 30px;
	margin:0 8px;
	text-transform: uppercase;
	font-weight: bold;
	display: inline-block;
}
.header .nav a:hover, 
.header .nav .active{
	background-color:#335625;
		color:white;		
}
.featured_header{
	background-image:url(Coding.png);
	  grid-area:featured_header;
	  background-size:cover;
}

.featured_main{
	  	  grid-area:featured_main;
		 padding:2em 1em;
}
.featured_main h1{
	color:#335625;
}
.featured_main p{
	color: white;
}
.btn{
	
	text-decoration:none;
	background-color:#204D0E;
    border:2px solid #204D0E;
	border-radius:50em;
	color:white;
	padding:15px 30px;
	margin:0 8px;
	text-transform: uppercase;
	font-weight: bold;	
	float:left;
}
.featured_profile{
	  grid-area:featured_profile;
	  text-align: left
	  padding:2em 1em;
}
.featured img{
	margin:0 5px 2em 5px;
}
.content{
	
	color:white;
	  grid-area:content;
}
.content img{
	margin:0 5px 2em 5px;
}
.footer{
	  background-color:#333;
	  color:gray;
	  text-align: center;
	  padding-top:2em;
	  grid-area:footer;
}
@media screen and (max-width:480px){
	#site_wrap{
		grid-template-rows:
		min-content
		215px
		min-content
		min-content
		1fr
		
			grid-template-areas:
			  "header"
			  "featured_header"
			  "featured_main"
			  "featured_profile"
			  "content"
			  "footer";
		  }
		 
		 .featured_profile{
			 display: none;
		 }
		
		  .header .nav a {
			padding: 10px 15px;
			margin: 0 5px;
			display:flex;
			flex-direction: row;
		}
		.header .nav a{
			margin:5em;
			}
		.content{
			flex-direction: column;
		}


	}
			.about-page{
				background-image: url("11.png");
				background-size:cover;
				background-repeat:no-repreat;
				background-position:center;
				background-attachment: fixed;
				height:100vh;
				width:100%;
				display:flex;
				flex-direction:column;
				color:white;
			}

			.about-page .featured_header{
				background-image:url("11.png");
				backgrounnd-size:cover;
				background-position: center;
			}

			.about-info{
				color:white;
				font-family: Lucida Calligraphy;
				line-height:2.0em;
				text-shadow:1px 1px 4px rgba(0,0,0,0.6);
				background-color: #black;
			}
				.pdf-container{ 
				 display:flex; 
				 justify-content: center;
  				align-items: stretch;
  				gap:20px;
  				width: 100vw;       
				height: 100vh;      
  				background: rgba(0, 0, 0, 0.4); 
 				 backdrop-filter: blur(2px);     
  				margin: 0;
  				padding: 20px;
 				 box-sizing: border-box;
					}

				.pdf-viewer{
				flex: 1;                 /* each takes half the space */
  				border: none;
 				border-radius: 10px;
 				height: 100%;
 				box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
				}

					.about-page .footer { 
					grid-area: footer; 
					background-color: #333; 
					color: gray; 
					text-align: center; 
					padding: 2em 0; 
					margin-top:auto; 
					}


					.contact-page { 
					background-color:#907006; 
					background-size:cover; 
					background-repeat:no-repeat; 
					background-position:center; 
					min-height:100vh; 
					width:100%;
				}

				.contact-info{
						color:white;
				}


					#site_wrap { 
				display: flex; 
				flex-direction: column; 
				min-height: 100vh; }

				.footer { 
				margin-top: auto;
				 background-color: #333; 
				 color: gray; 
				 text-align: center; 
				 padding: 2em 0; }

.purpose-page * {
    color: white !important;
}

.blog-info {
    color: white !important;
}

.contact-page * {
    color: white !important;
}