/* 
	        Auther: Blair Forsberg
			Date: April 9, 2018
			This Style sheet is for the Buon Cibo website.
			Title: main.css
*/

/* 
Color Palette
	Dark Red: #990000
	Dark Green: #004d00
	Sand: #cc9900 
*/

@font-face {
    font-family: BuonCibo;
    src: url("fonts/Italianno-Regular.ttf");
}

h1, nav ul li, h2, footer {
	font-family: BuonCibo;
}

body {
  width: 100%;
  font-family: Helvetica, Arial, sans-serif;
  background-image: url("images/aged_paper.jpg");
  background-repeat: repeat;
  background-size: cover;
}

#wholepage {
  background-image: url("images/aged_paper.jpg");
  background-repeat: repeat;
  background-size: cover;
}

header {
   width: 102.2%;
   margin-top: -1.5em;
   margin-left: -1em;
   background-image: url("images/wood.jpg");
}

h1 {
	font-size: 7em;
	margin-top: -1em;
	margin-right: 1.2em;
	text-align: center;
	padding-bottom: .1em;
	color: #cc9900;
}

#headerimage {
	margin-left: 25em;
	margin-top: 1em;
}

nav {
    width: 127%;
    margin-top: -5em;

}

nav ul {
	margin-left: -3em;
	width: 100%;
}

nav ul li {
  display: block;
  float: left;
  font-weight: bold;
  text-align: center;
  width: 20%;
  padding-top: 1em;
  padding-bottom: .5em;
  background-color: #990000;
 }
 
nav ul li:hover {
   background-color: #004d00;
   text-decoration: underline;
  /*  background-image: linear-gradient(#990000, white, #004d00); */
 }

nav ul li a {
   font-size: 2.5em;
   line-height:16px;
   padding: 10px;
   color: #cc9900;
   text-decoration: none;
 }
 
h2 {
	font-weight: bold;
	text-decoration: underline #004d00;
	color: #990000;
	font-size: 2.5em;
}

#contact {
	color: #990000;
	font-weight: bold;
	text-align: center;
}

.contact:hover {
	color: #004d00;
}

span.contactlogo {
	color: #004d00;
	font-weight: bold;
}

article, p, main {
	clear: left;
}

main {
	padding: 1.5em;
}
  
p {
   font-size:1.4em;
   margin-top: -1em;
 } 
 
#food, #family {
	float: left;
	width: 70%;
}
 
#food_index_pg, #family_index_pg {
	width: 20%;
    height: auto;
	margin-top: -4em;
	margin-left: 3em;
}

footer {
  width: 100%;
  text-align: center;  
  color: #990000;
  font-weight: bold;
  text-decoration: underline #004d00;
  font-size: 3em;
}