/* rely on the source order for mobile-first approach */

@font-face {
	font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; font-display: swap; src: local('Source Sans Pro'), url(SourceSansPro-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Source Sans Pro Bold'; font-style: normal; font-weight: 700; font-display: swap; src: local('Source Sans Pro Bold'), url(SourceSansPro-Bold.ttf) format('truetype');
}

body {
	color: #3b4252;
	font-family: 'Source Sans Pro', sans-serif;

	background-color: #5e81ac;
	padding-top: 30px;
}

.wrapper {
	display: flex;
	flex-flow: row wrap;

	margin-left: auto;
	margin-right: auto;

	/* background: #fff url("ab.png") no-repeat center center; */
}

/* all items should be 100% width */
.header, .main, .nav, .aside, .footer {
	flex: 1 100%;
	background-color: #e5e9f0;
	margin: 5px;
	padding: 0 30px;
	overflow: auto;

	/* box-shadow: 2px 2px 4px #e5e9f0; */
	box-shadow: 2px 2px 4px #3b4252;
	border-radius: 5px;
}

.header {
	font-family: 'Source Sans Pro Bold', sans-serif;
}

/* medium screens */
@media only screen and (min-width: 550px) {
	.wrapper {
		width: 91%;
	}
	
	/* the main element should take twice as much width as the two sidebars */
	.main { flex: 2 0px; }

	/* both sidebars should share a row */
	.aside { flex: 1 auto; }
}

/* large screens */
@media only screen and (min-width: 950px) {
	.wrapper {
		width: 900px;
	}

	/* the main element should take twice as much width as the two sidebars */
	.main { flex: 2 0px; }

	/* change the order of the second sidebar and main */
	.aside-1 { order: 1; }
	.main    { order: 2; }
	.aside-2 { order: 3; }
	.footer  { order: 4; }
}

/* global font size definitions */
h1 { font-size: 21px; }
h2 { font-size: 18px; }
p { font-size: 15px; }

a {
    color: #5e81ac;
}

a:link, a:visited {
	text-decoration: none;
}

a:hover, a:active {
	text-decoration: underline;
}

.header h1 {
	display: flex;
	align-items: center;
	text-align: center;
}

.header h1 a {
	text-decoration: none;
	color: #3b4252;
}

ul li {
	list-style-type: none;
	text-indent: -2em;
}