.main {
	padding: 2em 4em;
}

/* for flex display, the display property of the parent element is set to flex and then
certain rules are available for the parent and child elements to control their display.
*/

.container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

/*child elements can be set to "flex-grow" to fill the remaining space in the container 
also available: flex-shrink and flex-basis.  You can also use flex: to set all the properties at once*/
.item {
	font-size: 120%;
	text-align: center;
	background-color: rgba(64, 224, 208, 0.8);
	margin: 12px;
	padding: 2em 1em;
	flex: 1 450px; /* set flex values at the same time for flex grow and flex-basis*/
}

.extra-class {
	flex-grow: 7;
}

h1 {
	text-align: center;
}
/**
*  Flex reference:
*
*  https://css-tricks.com/snippets/css/a-guide-to-flexbox/
*
*  https://developer.mozilla.org/en-US/docs/Web/CSS/flex
**/