/* 	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.  */

.wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;  
	gap: 20px;  
}

@media (max-width: 700px) { 
	.wrapper {
		grid-template-columns: 1fr;
	}
}

.article {
	margin: 0px auto;
	max-width: 1000px;
	padding: 40px;
}

.article h1 {
	font-family: 'Times New Roman', Times, serif;
	font-size: 65px;
	color: darkblue;
	text-align: center;
}
.article h2 {
	font-family: 'Times New Roman', Times, serif;
	font-size: 35px;
	text-align: center;
}

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

.storybody {
	font-family: 'Times New Roman', Times, serif;
	font-size: 20px;
}

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