html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main-wrapper {
	margin: 10px 10%;
	padding: 10px;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	align-items: center;
}

header {
	height: 20%;
	margin: 10px 10%;
	padding: 10px;
	text-align: center;
}

	header p.h1 {
		font-variant-caps:all-petite-caps;
		font-size: 40px;
	}

	header p.h3 {
		font-variant-caps: small-caps;
		font-size: 20px;
	}

.content {
	height: 100%;
	flex: 1;
	align-content: center;
}

footer {
	height	: 80px;
	margin	: 10px 10%; /* ruimte buiten element (buitenkant) */
	padding	: 10px; /* ruimte van content tot element (binnenkant) */
	text-align	: center;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

		header {
			height: 10%;
			margin: 1% 10%;
			padding: 2px;
		}

			header p.h1 {
				font-size: 20px;
			}

		img {
			width: 100%;
			height: auto;
		}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
/*@media only screen and (min-width: 600px) {}*/

/* Medium devices (landscape tablets, 768px and up) */
/*@media only screen and (min-width: 768px) {}
*/
/* Large devices (laptops/desktops, 992px and up) */
/*@media only screen and (min-width: 992px) {
}
*/
/* Extra large devices (large laptops and desktops, 1200px and up) */
/*@media only screen and (min-width: 1200px) {
}
*/