:root {
		--pepsdrops: green;
		--pepsdrops2: red;
		--pepsdrops3: blue;
		--paragraph2: #0A0A2A;
}
    * {
		box-sizing: border-box;
	}
    html {
        background: url(/images/Farm.jpg) no-repeat center center fixed;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
    }
    .wrapper { /* Outer Grid */
		display: grid;
		grid-template-areas: /* the names below indicate corespondingly with the area names above to indicate the space on the page that they take up */
			'header header header header header header'
			'main main main main main main'
			'footer footer footer footer footer footer';
    }
    .header {
		grid-area: header;
		padding: 1em 3em 1em 3em;
		text-align: center;
    }
    .main {
		grid-area: main;
    }
    .footer {
		grid-area: footer;
		background: rgba(195,221,195,0.9);/*#C3DDC3*/
        padding: .7em;
        text-align: center;
        font-style: oblique;
		color: black;
        border-radius: 0px 0px 10px 10px; /* top left, top right, bottom right, bottom left */
    }
    .btn {
		background-color: #F4FA58; /* (Sectional city color #F4FA58) (Sectional Magenta #8A084B) (Sectional class G blue #C3DDC3) */
		color: #8A084B; /* text color magenta NOTE: This is darker than the button Magenta due to the way it looks in the buttons though it is not noticable, I tried the button magenta, but the text looked bad */
		padding: .8em 1em .8em 1em;
		text-align: center;
		text-decoration: none; /* prevents underline */
		display: inline-block;
		font-size: 16px;
		border-radius: 1em;
	}
	.pages {
		display: none;
	}
	.peoploids {
		display: none;
		color: var(--pepsdrops);
	}
	.peoploids2 {
		display: none;
		color: var(--pepsdrops2);
	}
	.peoploids3 {
		display: none;
		color: var(--pepsdrops3);
	}
	.paragraphcolor2 {
		color: var(--paragraph2);
	}
	.btn-hover:hover	{
		background-color: #ced12a; /* Charcoal yellow */
	}
	.form-group { /* This puts the blue background and the spacing around the items inside */
		background: rgba(195,221,195,0.9);/*#C3DDC3*/
        padding: 1em;
        border-radius: 10px 10px 0px 0px;
		text-align: left;
	}
	@media (max-width: 31em)  { /* This query sets the padding narrower on phones in vertical position */
	.form-group {
        padding: .5em;
	}
	}
	ul.none { /* This is to format the appearance of the poems and rhymes */
		list-style-type: none;
        padding: 0em;
	}
	.form-container {
		width: auto;
		margin: 0 auto; /* This line and the next are necessary to center one div inside another */
		position: relative;
	}
	.lemonvalley {
        padding: 0em 1em 1em 1em; /* This sets the surrounding space around the text */
		width: auto; /* By setting this width to auto, the mobile first approach works */
		margin: 0 auto; /* This line and the next are necessary to center one div inside another */
		position: relative;
	}
	.form-reducer { /* This class is to keep the form input area neat and aligned in the center */
		width: 15em;
		margin: 0 auto; /* This line and the next are necessary to center one div inside another */
		position: relative;
	}
	
	/* // Heading Group // */
	
	h1 {
        color: green;
        text-align: center;
        font-family: trebuchet MS, sans-serif;
        font-size: 36px;
        margin-top: -5px;
        font-style: italic;
    }
    h2 {
        text-align: center;
        font-family: trebuchet MS, sans-serif;
        font-size: 20pt;
        color: green;
        margin-top: -5px;
    }
    h3 {
        font-family: trebuchet MS, sans-serif;
        font-size: 1.25em;
        color: blue;
        margin-top: -5px;
        margin-bottom: 2px;
    }
    h4 {
        font-family: trebuchet MS, sans-serif;
        font-size: 1.5em;
        color: blue;
        text-shadow: 1px 1px red;
        margin-top: -0px;
        margin-bottom: 15px;
    }
    h5 {
        text-align: center;
        font-family: trebuchet MS, sans-serif;
        font-size: 13pt;
        color: black;
        text-shadow: 1px 1px red;
        margin-top: 5px;
        margin-bottom: 5px;
    }
	h6 {
        text-align: center;
        font-family: trebuchet MS, sans-serif;
        font-size: 14pt;
        color: green;
        margin-top: -5px;
    }
    .finemain {
        font-family: trebuchet MS, sans-serif;
        font-size: 6pt;
    }
    .spanmain { /* Used in includes/heading for sizing the text */
        text-align: center;
		font-family: trebuchet MS, sans-serif;
        font-size: 40pt;
        color: white;
        text-shadow: 3px 3px black;
    }
    .spansub { /* Used in includes/heading for sizing the text */
        text-align: center;
		font-family: trebuchet MS, sans-serif;
        font-size: 24pt;
        color: white;
        text-shadow: 3px 3px black;
    }
	br 	{
        display: block; /* makes it have a width */
        content: ""; /* clears default height */
        margin-top: 10px; /* change this to whatever height you want it */
	}
    .center {
        text-align: center;
    }
    .lwrap {/*These two items is what floats images to the left and right with text wrap*/
        float: left;
        margin-right: 5px;
    }
	input[type=text] {
		width: 15em;
		font-size: 12pt;
		padding: 12px 12px;
		margin: 8px 0;
	}
	input[type=date] {
		width: 15em;
		font-size: 12pt;
		padding: 12px 12px;
		margin: 8px 0;
	}
	input[type=password] {
		width: 15em;
		font-size: 12pt;
		padding: 12px 12px;
		margin: 8px 0;
	}
	input[type=number] {
		width: 15em;
		font-size: 12pt;
		padding: 12px 12px;
		margin: 8px 0;
	}
	input[type=email] {
		width: 15em;
		font-size: 12pt;
		padding: 12px 12px;
		margin: 8px 0;
	}
	select {
		width: 15em;
		font-size: 12pt;
		padding: 12px 12px;
		margin: 8px 0;
	}
	input[type=submit] {
		width: 7em;
		padding: 12px 12px;
		margin: 8px 0;
		font-size: 12pt;
		color: #F4FA58;
        border-radius: 1em;
		background-color: #994062; /* magenta */
	}
	input[type=submit]:hover	{
		background-color: #a17c8a; /* Charcoal magenta */
	}
    div ul .dropdown-menu li a :hover {
		background-color: yellow;
	}
    ul.standard {
        font-family: trebuchet MS, sans-serif;
        font-size: 12pt;
    }
    ul.standard li {/*This puts a 5px space at the bottom of all list items*/
        margin-bottom: 5px;
    }
    ol.standard {
        font-family: trebuchet MS, sans-serif;
        font-size: 12pt;
    }
    ol.standard li {/*This puts a 5px space at the bottom of all list items*/
        margin-bottom: 5px;
    }
    /*.normal {
        width: auto;
        border: 2px solid black;
        background-color: White;
        box-shadow: 6px 6px 6px #999;
        padding: 1em;
        padding-bottom: .1em;
        margin-bottom: .5em;
    }*/
    .red {
        font-family: trebuchet MS, sans-serif;
        font-size: 12pt;
        color: red;
    }
    .fine {
        font-family: trebuchet MS, sans-serif;
        font-size: 8pt;
    }