/*==============Google font============*/

/* This is an example of how to use google fonts. You don't need to do anything with this code, it is just here as a 
reference. Notice that you include this @import line, and then you use the font-family like normal everywhere else in 
the document. */

@import url(https://fonts.googleapis.com/css?family=Libre+Baskerville);



body{

	font-family: 'Libre Baskerville', serif;

	/* Set the default font size for the body text below this comment. Reference the screenshot to know what size to 
	make this text. Use "em" for font size. */

	font-size: .8em;
	width: 1000px;
	margin: auto;
	margin-bottom: 20px;


}






/*==============Web safe fonts============*/

/* Check out this site for more web safe font families http://www.w3schools.com/cssref/css_websafe_fonts.asp */

/* You can make a single CSS rule apply to multiple elements by using a comma between each selector. The following 
rule will apply to all the headings on the page (h1-h6). */

h1, h2, h3, h4, h5, h6{
	font-family: "Arial Black", Gadget, sans-serif;
}






/*==============Header============*/

/* This rule is using a decedent selector (Take a look at page 238 in the book to learn more about decedent selectors). Use the screenshot */



header h1{

	/*Write a declaration (property: value;) below this comment that will change the capitalization of the h1's font 
	without rewriting the code in the HTML. */
	
	text-transform: capitalize;

	/* Write a declaration (property: value;) below this comment to set the font size of this h1 ("A Beekeeping 
	Resource") using a percent. The exact percent is not provided for you in the screenshot. Try to match the size 
	visually. */

	font-size: 165%;

	/* Write a declaration (property: value;) below this comment to set the font color using a hex code. You will need 
	to use Photoshop to eyedrop this color from the screenshot. */

	color: #aa974b;

	/* Write a declaration (property: value;) below this comment to set the letter spacing of this h1 ("A Beekeeping 
	Resource") using EMs. The exact spacing is not provided for you in the screenshot. Try to match the spacing 
	visually. */

	letter-spacing: .4em;


}






/*==============Main Navigation============*/

/* The following two rules effect only the <ul>s and <li>'s in the <nav>. The selector "nav ul" would be read, "Find 
all nav tags, then find any children that are <ul>s, and select them." These are more specific so that other list on 
the page won't be styled the same */

header nav ul {

	/* Write a declaration (property: value;) below this comment to change the background color of this <ul> using a 
	hex color. You will need to use Photoshop to eyedrop this color from the screenshot. */
	
	background-color: #f8d90c;
	width: 20px;
	height: 200px;
	padding-top: 45px;
	border: 2px solid #aa974b;

}

header nav li{

	/* Write a declaration (property: value;) below this comment to change the background color of the <li>s using an 
	rgba color. You will need to use Photoshop to eyedrop this color from the screenshot. This might not be exactly the 
	same color since there is an opacity. */
	
	background-color: #aa974b;
	width: 220px;
	padding: 6px;
	padding-left: 5px;
	margin-bottom: 7px;
	margin-left: -8px;
	list-style-type: none;
	box-shadow: 3px 3px 3px black;
}






/*==============LINK STYLE============*/

/* You will need to style your links using the colors defined in the screenshot. Use hex codes for all of these link 
colors. You will need to make sure that the other links on this page don't also get styled the same. This will work 
very similar to how the main navigation selectors work above. You need to be specific. */

header nav a {
	text-decoration: none;
}

nav a:link {
	color: #fafcca;
}

nav a:visited {
	color: #fafcca;
}

nav a:hover {
	color: #f0d100;
}

nav a:active {
	color: #f6fcf8;
}




/*==============MAIN STYLE============*/

/*use the screenshot to make the appropriate changes to these elements*/

h2{
	font-size: 14px;
	font-style: italic;
}

section h2{
	font-size: 20px;
	font-style: normal;
	color: #aa974b;
	background-color: white;
	border: 1px solid #aa974b;
	padding: 10px;
	border-radius: 30px 30px 0px 30px;
	margin-top: 0px;
	margin-bottom: 3px;
}

section h2+p {
	margin-top: 0px;
}

#bees h2 {
	width: 47px;
}

#blossoms h2 {
	width: 95px;
}

footer{
	text-align: center;
}

main {
	background-color:  #f8d90c;
	border: 2px solid #aa974b;
	padding: 30px;
}

section {
	background-color:  #fafcca;
	border: 1px solid #aa974b;
	padding: 20px 30px 30px 30px; /*directions say 30px, but image shows smaller at top, so I adjusted just the top*/
	margin: 40px 0px;
}

#blossoms {
	height: 500px;
	overflow: scroll;
	margin-bottom: 20px;
}




/*==============FOOTER STYLE============*/

footer {
	background-color: #aa974b;
	padding: 5px;
	border-radius: 0px 0px 20px 20px;
}

footer nav ul {
	padding-bottom: 2px;
}

footer nav li {
	display: inline;
	padding-right: 15px;
}

footer p {
	color: #fafcca;
}