@font-face {
	font-family: 'Arial', sans-serif;
	font-weight: normal;
	font-style: normal;
}

/* Make images responsive */
img {
  max-width: 100%;
  height: auto;
}

/* Prevent blog post code blocks (often from indented Markdown) from overflowing on mobile */
.blog pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Blog divider should be responsive and not float */
.post-divider {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 10px auto;
}

/* Simple clear for safety */
.clearfix {
  clear: both;
}

html, body, p, div, ul, li, h1, h2, h3, h4 {
	margin: 0;
	padding: 0;
}

body {
  	background-color: #000;
  	font-family: 'Arial', sans-serif;
  	font-weight: 300;
  	font-size: 16px;
 	text-align: center;
 	color:#333;
}

h1, h2, h3 {
	font-weight: 400;
	padding:0.4em 0 0.4em;
}
h1 {
	font-size:2.2em;
}
h2 {
	font-size:1.5em;
}
h3 {
	font-size:1em;
}
p, ul {
	margin: 0 0 1em;
	line-height: 140%;
}
ul {
	padding: 0 1em;
}

.header h1 {
	font-size:3em;
	font-family: 'Arial', sans-serif;
	line-height: 0.8;
	display: block;
	text-align:center;
	margin: 0;
	padding: 0;
  	color: #fff;
  	text-shadow: #000 1px 1px 6px;
}
.header  a:link, .header a:visited {
	color: #fff;
	text-decoration: none;
}
.header .title a {
  padding: 0.1em 0.2em 0.2em;
  border-radius: 0.2em;
}
.header .title a:hover, .header .title a:focus{
  background-color: rgba(0,0,0,0.3);
}

.header p {
	line-height: 1.1em;
	font-size: 1em;
	color: #fff;
	text-shadow: #000 1px 1px 6px;
	width: 60%;
	margin: 0.6em auto 2em;
	text-align: center;
}

.content a:link,
.content a:visited {
	color: #e46b6d;
	text-decoration: none;
	padding-bottom:0.05em;
	border-bottom: solid 1px #e46b6d;
}
.content a:hover,
.content a:focus {
	color: #6a94ae;
	border-bottom: solid 1px #baccd8;
}

.container {
	text-align: left;
	margin:0 auto;
}

.content {
	/* body */
	background-color: #95EAD0;
	padding:1em 1em 2em;
	/* thin border between body and header */
	border-top: solid 4px #F9FC66;
}

.header {
	background-color: #598222;
	padding-top:3em;
}
body.home .header{
	/* image, main page */
 	background: url(/images/fruit-vegetable-pile-full-colours-vitamines-34735357.jpg) center repeat;
 	background-size: 50%;
}
body.garden-dates .header {
   background: url(/images/fruit-vegetable-pile-full-colours-vitamines-34735357.jpg) no-repeat center center;
   background-size: 180%;
}
body.garden-rules .header {
   background: url(/images/fruit-vegetable-pile-full-colours-vitamines-34735357.jpg) no-repeat left center;
   background-size: 140%;
}
body.how-to-apply .header{
 	background: url(/images/vegetable-garden-19067714.jpg) center repeat;
 	background-size: 50%;
}
body.contact .header {
 	background: url(/images/fruit-vegetable-pile-full-colours-vitamines-34735357.jpg) no-repeat right center;
 	background-size: 215%;
}
body.info .header {
 	background: url(/images/fruit-vegetable-pile-full-colours-vitamines-34735357.jpg) no-repeat center;
 	background-size: 120%;
}
body.blog .header {
   background: url(/images/vegetable-garden-bed-23196857.jpg) no-repeat left top;
   background-size: 120%;
}
body.files .header{
	/* image, main page */
 	background: url(/images/fruit-vegetable-pile-full-colours-vitamines-34735357.jpg) center repeat;
 	background-size: 50%;
}

.footer {
	/* bottom bar */
	padding: 1em;
	color: #666;
	background-color: #4CE2B5;
}

.leader {
	/* top bar */
	background-color: #4CE2B5;
	font-size: 0.8em;
	color:#e46b6d;
}

.leader ul {
		list-style: none;
		text-align: center;
		margin:0;
		padding:1em 0;
}

.leader li {
		display: block;
		margin: 0;
		line-height: 2em
}

.leader a:link,.leader a:visited {
		color: #fff;
		text-decoration: none;
}
.leader a:hover,.leader a:focus {
		/* not buttons */
		color: #e46b6d;
		text-decoration: none;
}

.nav {
	display: block;
	list-style: none;
	text-align: center;
	padding: 0;
	margin:0;
	font-size: 0.9em;
}
.nav li {
	display: inline-block;
	margin: 0 0.25em;
	margin: 0 0.1em;
}

.nav a:link, .nav a:visited {
	line-height: 2.5em;
	/* not button background */
	color: #fff;
	text-decoration: none;
	font-style: bold;
	background-color: #222;
	/* buttons, slightly transparent */
	background-color: rgba(0,0,0,0.4);
	padding: 0.4em 0.6em;
	border-radius: 5px;
	text-shadow: #000 0 -1px 2px;
}

/* not buttons */
.nav a:hover, .nav a:focus {
	color: #fff;
	background: #000;
}

.nav-major {
	margin:1em 0 0;
}
.nav-minor {
	padding: 0 0 1em;
}

body.home li.home a,
body.garden-dates li.garden-dates a,
body.how-to-apply li.how-to-apply a,
body.garden-rules li.garden-rules a,
body.info li.info a,
body.blog li.blog a,
body.files li.files a,
body.contact li.contact a {
	background: #e46b6d;
	color: #fff;
}

body.info li.info {
  clear: both;
}

form {
	padding:1em 0;
}

form p {
	margin:0;
	padding:0;
}

input, textarea {
	margin-bottom:1em;
	width:100%;
	font-size: 1.2em;
	padding:0.2em;
}

textarea {
	height:80px;
}

#submit {
	margin:0 auto 1em;
	font-size: 1.2em;
	padding:1em;
	color: #fff;
	background-color: #333;
	border-radius: 5px;
	border-style:none;
	width: 50%;
}

#submit:hover, #submit:focus {
	color: #fff;
	/* red color */
    background-color: #e46b6d;
}

@media all and (min-width: 420px) {
	body.contact .header {
    	background-size: 150%;
    	background-position-x: inherit;
	}
}

/* if the viewport gets bigger than 500px */
@media all and (min-width: 500px) {
	.leader li {
		display: inline-block;
		padding:0 0.4em;
		line-height: 2.8em;
		border-bottom-style: none;
		margin: 0;
	}
	body.home .header {
		background-size: 100%;
		background-position: 0 30%;
	}
	body.garden-dates .header {
    	background-size: 130%;
	}
	body.how-to-apply .header {
    	background-size: 130%;
	}
	body.garden-rules .header {
	 	background-size: 120%;
	 	background-position: 0 10%;
	}
	body.contact .header {
    	background-size: 145%;
    	background-position-x: right;
	}
	body.info .header {
		background-size: 120%;
	}
  	body.blog .header {
    	background-size: 100%;
    }
  	body.files .header {
    	background-size: 100%;
    }

	.header h1 {
		font-size: 4em;
	}
	.header p {
		font-size: 1.2em;
		line-height: 1.1em;
	}
	.nav a:link, .nav a:visited {
		font-size:1.2em;
	}
}


/* if the viewport gets bigger than 700px */
@media all and (min-width: 700px) {
	.container {
  max-width: 650px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

	h1 {
		font-size:2.6em;
	}

	body.home .header{
		background-position: 0 35%;
	}
	body.garden-dates .header {
	 	background: url(/images/fruit-vegetable-pile-full-colours-vitamines-34735357.jpg) center repeat;
    	background-size: 110%;
	}
	body.how-to-applys .header {
		background: url(/images/fruit-vegetable-pile-full-colours-vitamines-34735357.jpg) center repeat;
	   background-size: 110%;
   }
   body.garden-rules .header {
	 	background: url(/images/organic-vegetable-garden-bed-18733837.jpg) center repeat;
    	background-size: 100%;
	}
	body.contact .header {
	 	background-size: 110%;
	}
	body.info .header {
	 	background: url(/images/mixture-fresh-vegetable-fruit-mix-harvesting-home-garden-33403161.jpg) no-repeat center;
	 	background-size: 120%;
	}
	body.blog .header {
    	background: url(/images/vegetable-garden-bed-23196857.jpg) no-repeat left 15%;
    	background-size: 100%;
	}
	body.files .header {
    	background: url(/images/fresh-fruit-vegetable-background-45753955.jpg) no-repeat left 15%;
    	background-size: 180%;
	}

	.header h1 {
		font-size: 5em;
	}
	.header p {
		font-size: 1.4em;
		line-height: 1.2em;
	}
	.nav {
    	display: inline-block;
	}
}

ul.posts {
	list-style: none;
	margin: 2em 0 1em ;
	padding-left:0;
}
ul.posts time {
	color: #999;
    margin: 0em;
    font-size: 0.8em;
    display: block
}
ul.posts li {
    margin-bottom: 2em;
}

.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	height: auto;
	margin: 1.5em 0;
}
.embed-container iframe, .embed-container object, .embed-container embed { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
}

.bannerbox {
max-width: 550px;
width: 100%;
box-sizing: border-box;

display: block;
color: inherit;
text-decoration: none;
cursor: pointer;
    
    padding: 15px;
    margin: 15px auto;
    /* font color: */
    /* color: white; */
    background-color: #4CE2B5;
    border-radius: 5px;
    text-align: center;
}
/* Optional: subtle interaction feedback */
.bannerbox:hover {
    filter: brightness(0.97);
}

.bannerbox:focus-visible {
    outline: 2px solid #000;
    outline-offset: 3px;
}