* {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
}
/*Makes the content fill the screen */
html, body {
	margin: 0;
	padding: 0;
}

header {
	background-color: #333;
	color: white;
	font-size: 5em;
	text-align: center;
}

footer{
	background-color: #333;
	color: white;
	font-size: 2em;
	text-align: center;
}
/* targets each div / sets shadows */
span > div {
	padding: 20px 25px;
	box-shadow: 5px 5px 9px rgba(0,0,0,.5);
}
/* sets flex box to column for mobile */
.container {
    display: flex;
    color: white;
    flex-direction: column;
    align-items: center;
    background: #333;
}
/* sets all flexboxes to be same length */
.container span {
    flex: 1;
}
/* Order # can be changed to switch order of boxes z-index is used to layer boxes. */
.column-left {
    order: 1;
    background: #F08080;
    z-index: 200;
}

.column-center {
    order: 2;
    background: #20B2AA;
    z-index: 150;
}

.column-right {
    order: 3;
    background: #DA70D6;
    z-index: 100;
}

/* the following media's are to make this look nicer on bigger screens. */
@media screen and (min-width: 600px) {

	.container {
		flex-direction: row;
	}
}

@media screen and (min-width: 1000px) {

	.container {
		font-size: 1.4em;
	}