@charset "UTF-8";
/* CSS Document */

body {
	background-color:rgba(52,113,48,1.00);
	margin: 0; 
	padding: 0; 
	text-align: center; 

	background-repeat: no-repeat;
	background-position:right bottom;
	background-size: contain;
	background-attachment: fixed;
	
}


#page-nav {
	width: 100%;
	background-color: rgba(0,0,0,1.00);
}

#page-nav label, #hamburger {
	display: none; /* This hides the label and the checkbox that actually triggers the menu. The checkbox will remain hidden no matter what the size of the display is. The label will reappear when this thing hits mobile size. */
}

#page-nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#page-nav ul li {
	display: inline-block; /* This lines up our buttons horizontally */
	padding: 10px;
	box-sizing: border-box; /* This makes sure our padding is factored in to the button size */
}

#page-nav ul li a {
	color: rgba(255,255,255,1.00);
	text-decoration: none;
}

/* For Phones */

@media screen and (max-width:768px) {
	
	#page-nav label /* This causes our label, containg the hamburger symbol to reappear, once the page crunched down to phone size. */ {
		display: inline-block;
		color: rgba(255,255,255,1.00);
		background-color: rgba(125,0,0,1.00);
		font-style: normal;
		font-size: 1.2em;
		padding: 10px;
		cursor: pointer;
	}
	
	#page-nav ul li {
		display: block;
		border-top: 1px solid rgba(168,168,168,1.00);
	}
	
	#page-nav ul {
		display: none;
	}
	
	#page-nav input:checked ~ ul /* Here's the secret sauce at work. When you click on the label for the hidden checkbox, it checks it. That hidden hecked checkbox causes the drop down menu to display. This allows a dropdown menu to work by being touched by a finger instead of being rolled over with a mouse. */ {
		display: block;}
}

	section {
	/* height: 100px; */
	background-color: rgba(52,113,48,1.00);
	padding: 25px 30px; /* The first number applies to both the top and bottom padding, while the second number applies to both the left and right padding */
	text-align:inherit; /* Makes our text nice organized blocks */
}


h1{
	color:rgba(255,255,255,1.00);
	text-shadow: 2px 2px 4px rgba(0,76,25,1.00);
	font-size: 2.50em;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	text-align: center;
	letter-spacing: 0.2em; 
	
}




p {
	margin: 0 0 15px 0; /* The first two zeroes are the top and right margin amounts, the 15px is the bottom margin amount, and the last zero is the left margin amount. All of this removes the default margin applied by browsers */
	padding: 0; /* This eliminates the default padding appled by browsers */
	font-size: 1.50em;
	
}

article {
	background-color: rgba(255,224,0,1.00);
	padding: 5px; /* We added enough padding so these would be visibile even with no height. */
	margin: 20px auto 0; /* This margin is how we centered the arcticle tags. The numbers mean that the article tags have a top margin of "20px", a right and left margin of "auto" (the magical hack that centers our article tags), and a bottom margin of "0" */
	width: 80%;
}

article div /* Ooooooooh! Our first compound selector. This selector modifies only div tags within article tags. It will ignore all other div tags */ {
	width: 200px;
	height: 200px;
	background-color:rgba(255,255,255,1.00);
	margin: 10px;
	float: left; /* This takes all of our div tags that are in articles and rotates them counterclockwise so that the top div is on the left, the middle div is in the middle, and the bottom div is on the right */
}