/* General styles */
p, section{
    /* Sets a max-width for all paragraphs */
    max-width:550px;

    /* Uses the margin trick to center */
    margin:10px auto;
  }

 img{

 	/* Automatically resizes the images to fit the window width */
 	max-width: 100%;
 	height: auto;

 	/* Removed the border because I thought the first image looks better without one so that the borders around the mpas pop more and emphasize the maps*/
 	padding: 15px;
 
 }

 /* Link styles */
a{
	color: #478bb8;
}

a:hover{
 	background: #e6e6e6;
 }

 
/* Body styles */
 body{

 	/* Sets the font family for the body*/
	font-family: 'EBGaramond', serif;
 }

/* Header styles */
header{

	padding-top: 20px;

	/* Centers the header text */
	text-align: center;

	/* Sets the font family for the body. I changed the template font to EBGaramond.*/
	font-family: 'EBGaramond', serif;

}

header h1{

	/* Limits the width of the headline so that it's more readable. I limited the width more than the template to make all the text narrower and have more white space on the sides! */
	max-width: 700px;

	/* Uses the margin trick to center */
	margin: 10px auto;
 
	/* Left-aligns the text */
	text-align: left;

	/* Changed the font from the original to Georgia */
	font-family: 'Georgia';
}

header h2, h3{

	/* Limits the width of the headline so that it's more readable */
	max-width: 700px;

	/*Sets a smaller font size for h2s in the header section */
	font-size: 18px;

	/* Uses the margin trick to center */
	margin: 10px auto;

	/* Left-aligns the text */
	text-align: left;
}

header h2{
	/* Added italics to my name to make it fancier*/
	font-style: italic;
}

header h3 {

	/*Sets a smaller font size for h3s in the header section */
	font-size: 14px;

}

 /* Styles for the banner image and caption */
figure.banner{

 	/* This display allows the figcaption to align with the image */
 	display:inline-block;

	/* Uses the margin trick to center */
 	margin: 10px auto;
 }

 figcaption.bannerCaption{

 	/* Sets the font size for the caption text */
	font-size: 12px;
	
	/* Centers the caption text */
	text-align: right;

	/* A margin-left of 20px helps the caption appear centered with the image even though it's technically a little shorter */
	margin-left: 20px;
 }

 /* Styles for section headers */
 .content-block h2{

	/* Tweaking the top and bottom margins to make them look neater */
	margin-top: 30px;
	margin-bottom: -5px;
 }

/* Chart styles. I didn't end up using this. */
p.chartWrapper {

	/* Adds space above and below the chart */
	margin-top: 20px;
	margin-bottom: 20px;

	/* Overrides the Max Width setting for paragraphs */
	max-width: 700px;

	padding: 20px;
	border: 5px double #2166ac;
}

/* Twitter embed styles */
.twitter-tweet {

	/* Adds a little space above and below */ 
	padding-top: 20px;
	padding-bottom: 20px;

	/* Uses the margin trick to center */
    margin: 10px auto;
	
}

/* Styles for the final section */
section.last{

	/*  Adds some breathing room after the last paragraph */
	margin-bottom: 25px;
}

/* Styles for the credit line. I didn't end up using this! */
#credit {
	text-align: right;
	font-style: italic;
	font-size: 12px;
}