/*COLORS
	Light Green #A1A72E
	Sky Beige #EEDDA7
	Darker Green #2C633C
	*/
	
	body{
		background-color:#FAF5E9;
/*		color:#06402B;*/

/*		color:#2C633C;*/
/*		background-color:#EEDDA7;*/
		color: black;
		font-family:lato;
		font-size:22px;
	}

	nav{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		height: 50px;
		background-color:#FAF5E9;
		color:#06402B;
/*		color:#2C633C;*/
		align-items: center;
		justify-content: center;
		position: fixed;
		z-index:10;
		top:0px;
	}

	nav a{
		padding: 10px;
		text-decoration:none;
/*		color:#06402B;*/
		color:#2C633C;
	}

	nav a:hover{
/*		color:#06402B;*/
		color:#2C633C;
		background-color:#FFCC00;
		border-radius:20px;
		text-shadow: -2px -2px 5px #FFCC00;
	}

	#title{
		display:flex;
		justify-content:center;
		z-index:10;
	}

	#title img{
		width:30%; 
		margin-bottom:20px;
	}

	#title p{
		padding:10px;
	}

	.featuredbox{
		width: 100%;
		height: 100%;
		background-color:#FAF5E9;
		color:#06402B;
/*		color:black;*/
		padding:20px;
		line-height:200%;
		border-radius:10px;
		box-shadow: -5px -5px 5px #06402B;
/*		box-shadow: -5px -5px 5px #FFCC00;*/
		border-style:outset;
		height:600px;
		overflow-y:hidden;
		border-color: #06402B;
	}

	.featuredbox img{
		width:100%;
		border-style:outset;
/*		border-color: #06402B;*/
		border-color:#FFCC00;
	}

	.featuredbox:hover{
		cursor:pointer;
	}


	#body{
		max-width:1184px;
		justify-self:center;
		
		position:relative;
		top:50px;
	}

	#leftcolumn{
		float:left;
		width:60%;
	}

	#leftcolumn p{
/*		padding:20px;*/
		line-height:200%;
		text-indent:2em;
		text-align:justify;
	}

	

	#rightColumn{
		float:right;
		width:35%;
		display:flex;
		flex-direction:columm;
		flex-wrap:wrap;
		
	}

	.topicBox{
		background-color:#FAF5E9;
		width:100%;
		border-radius:10px;
/*		aspect-ratio:1/1;*/
		margin-bottom:2%;
		box-shadow: -5px -5px 5px #06402B;
		border-style:outset;
		padding: 10px;
		border-color: #06402B;
		text-decoration: none;
	}

	.topicBox img{
		width:70%;
		position:relative;
		left:50%;
		transform:translateX(-50%);
		margin-top:5%;
		border-style:outset;
		border-color:#FFCC00;
	}

	.topicBox h3{
		width:90%;
		color:#06402B;
/*		color: black;*/
		text-align:center;
		margin:auto;

	}

	.topicBox:hover{
		cursor:pointer;
	}

	.postLink{
		background-color:#FAF5E9;
		width:100%;
		border-radius:10px;
		
		margin-bottom:2%;
		box-shadow: -5px -5px 5px #06402B;
		border-style:outset;
	}

	footer{
		width: 100%;
		max-width:1184px;
		justify-self:center;
		position:relative;
		top:50px;
/*		height: 10vh;*/
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 5vh;
		flex-wrap: wrap;
		justify-content: center;
		background-color: #2C633C;
	}

	footer img{
		height: 10vh;
		margin-right: 10px;
	}

	footer h1{
/*		width: 50%;*/
	}

	footer p{
		font-size: 75%;
	}

	footer div{
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-bottom: 20px;
		justify-content: center;
		width: 100%;
	}

	footer div a{
		border-style: solid;
		border-color: black;
		text-decoration: none;
		color: black;
		padding: 10px;
		border-radius: 10px;
	}


/*BLOG POST Items*/
	
	#imgcontainer{
		position:relative;
	}

	#imgcontainer h1{
		position:absolute;
		top:0px;
		left:20px;
		text-shadow: -2px -2px 5px #FFCC00;

	}

	#imgcontainer img{
		width: 100%;
		border-style:outset;
		border-width:3px;
		border-color: #06402B;
/*		border-color:#FFCC00;*/
	}

	#bodybox{
		width:100%;
	}

	#bodybox p{
		line-height:200%;
		text-indent:2em;
		text-align:justify;
	}

	#bodybox img{
		border-style: outset;
		border-color: black;
		border-color: #06402B;
	}

	.adbox{
		background-color:#FAF5E9;
		width:20%;
		border-radius:10px;
		aspect-ratio:1/1;
		margin-bottom:2%;
		box-shadow: -5px -5px 5px #06402B;
		border-style:outset;
		margin:20px;
		float:right;
	}


/*Sub-Topic Page*/
	.postContainer{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-evenly;
	}

	/*.postContainer a{
		width: 30%;
		border-style: none;
		text-decoration: none;
		padding: 10px;
	}*/

	.postContainer a{
		width: 30%;
		box-shadow: -5px -5px 5px #06402B;
		border-color: #06402B;
		text-decoration: none;
		border-style:outset;
		padding: 10px;
		border-radius:10px;
	}

	.postContainer a img{
		width:70%;
		position:relative;
		left:50%;
		transform:translateX(-50%);
		margin-top:5%;
		border-style:outset;
		border-color:#FFCC00;
	}

	.postContainer a h3{
		width:90%;
		color:#06402B;
		text-align:center;
		margin:auto;
	}

/*Depreciated*/
	.postContainer div{
		width: 30%;
		box-shadow: -5px -5px 5px #06402B;
		border-color: #06402B;

		border-style:outset;
		padding: 10px;
		border-radius:10px;
	}

	.postContainer div:hover{
		cursor: pointer;
	}
	

	.postContainer div img{
		width:70%;
		position:relative;
		left:50%;
		transform:translateX(-50%);
		margin-top:5%;
		border-style:outset;
		border-color:#FFCC00;
	}

	.postContainer div h3{
		width:90%;
		color:#06402B;
		text-align:center;
		margin:auto;
	}



/*Mobile Screens*/

@media only screen and (max-width: 1000px){
		#title img{
			margin-top: 40px;
			margin-bottom: 0px;
			width: 75%;
		}

		nav {
			position: relative;
		}

		#leftcolumn{
			width: 90%;
			float: none;
			padding-bottom: 10px;
		}

		#rightColumn{
			width: 90%;
			float: none;
			justify-self: center;
		}

		#title{
			display:flex;
			justify-content:center;
			z-index:10;
			flex-wrap: wrap;
		}

		.postContainer a{
			width: 70%;
			box-shadow: -5px -5px 5px #06402B;
			border-color: #06402B;
			margin-bottom: 10px;
			border-style:outset;
			padding: 10px;
			border-radius:10px;
		}

		.postContainer div{
			width: 70%;
			box-shadow: -5px -5px 5px #06402B;
			border-color: #06402B;

			border-style:outset;
			padding: 10px;
			border-radius:10px;
		}

		#bodybox img{
			width: 100%;
			float: none;
		}

}

/*Testing and Experimentation*/