body {
	background-color: lightgrey;
}
header {
	background-color: white;
	margin: -3em 2em -1em;
	height: 16em;
	border-radius: 1em;
	box-shadow: 0em 0.25em 0.5em 0em rgba(0, 0, 0, 0.2), 0em 0.30em 1.2em 0em rgba(0, 0, 0, 0.19);	
}
#header-title {
	margin-left: 4em;	
	padding-top: 1.6em;
	font-size: 3.2em;
}
#purple-header-title {
	color: purple;
}
#header-subtitle {
	margin-top: -1em;
	margin-left: 10em;	
}
body section {
	display: flex;
}
aside {
	width: 25%;
	padding: 1em;
	margin-left: 1em;
}
aside, .vertical-flex, #articles-container {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}
.vertical-flex, .vertical-flex-right {
	margin-top: 1em;
	margin-right: 1em;
	padding-left: 1em;
	padding-right: 2em;
	border-radius: 1em;
	box-shadow: 0em 0.25em 0.5em 0em rgba(0, 0, 0, 0.2), 0em 0.30em 1.2em 0em rgba(0, 0, 0, 0.19);	
	background-color: white;
}
.vertical-flex-right {
	padding-left: 18em;	
}
#articles-container {
	width: 75%;
	padding: 1em;
}
h3 {
	font-weight: bold;
	padding: 0.66em 0.33em;
	background: repeating-linear-gradient(
		135deg,
		transparent,
		transparent 10px,
		#ccc 10px,
		#ccc 20px
	);
}
h4 {
	margin-top: -1em;
	color: purple;
}
aside section p, .aside-unbold {
	margin-top: -1em;
	padding-bottom: 1em;
	border-bottom: 2px dotted grey;
}
.aside-unbold {
	font-weight: normal;
}
/* JavaScript Challenge CSS */
#jschallenge-container {
	margin-top: 1em;
	margin-right: 1em;
	padding-right: 2em;
	padding-left: 1em;
	padding-bottom: 1em;
	border-radius: 1em;
	box-shadow: 0em 0.25em 0.5em 0em rgba(0, 0, 0, 0.2), 0em 0.30em 1.2em 0em rgba(0, 0, 0, 0.19);	
	background-color: white;
}
div h1 {
	padding: 1em;
}
#calculator {
	background-color: lightgrey;
	border: 1px solid black;
	padding: 1em;
	width: 50%;
}
#calc-screen {
	background-color: white;
	border: 1px solid black;
	width: 90%;
	padding: 1em;
}
#calc-button-container {
	display: flex;
	flex-wrap: wrap;
	padding: 1em 2em;
}
div button {
	background-color: white;
	width: 20%;
	border: 1px solid black;
	margin: 0.5em;
	padding: 1em;
}