/* 	If you choose to create a mixed (vertical/horizontal) layout for your final project,
	you will need the two "CSS grid" selectors below. In your HTML document, wrap whatever
	content you want to follow the grid in a <div> with the class "wrapper." Then in the
	selectors below, specify what settings you want for "grid-template-columns," "gap,"
	and "max-width." You can also apply other properties to both the "wrapper" and
	"@media" selectors that are needed for your design.  */

.site-banner {
	background-color: white;
	text-align: center;
	padding: 10px 0px 8px 0px;
	max-width: 100%;
}

.logo {
	width: 75%;
}

.main {
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px;
}

.article h1{
	font-family: 'Times New Roman', Times, serif;
	color: plum;
	text-align: center;
	font-size: 50px;
}

.article h2{
	font-family: 'Times New Roman', Times, serif;
	text-align: center;
	font-size: 20px;
}

.article h4 {
	font-family: 'Times New Roman', Times, serif;
	text-align: center;
	font-size: 15px;
}

.storybody p {
	font-family: 'Times New Roman', Times, serif;
	font-size: 17px;
	line-height: 25px;
}

.pie {
	width: 60%;
	margin: auto auto;
	float: left;
}

.chart {
	max-width: 700px;
	margin: 40px auto;
}

@media (max-width: 400px) {  /*  <= 700px is a good default "breakpoint," but you can adjust as needed.  */
	.wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}
	.pie {
		max-width: 60%;
		margin: 40px auto;
		padding: 0px 10px;

	}
}

/*  Input the rest of your CSS below.  */