body {
	font-family: stystem-ui, sans-serif;
	font-size: 100%;
	line-height: 1.3em;
	margin: 0;
}

header {
	background-color: #eee;
	min-height: 50vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

header>* {
	line-height: 1.3em;
	margin: 0;
	
	
}

h2 {
	font-size: 10vw;

}


main {
	margin: 1em;
	display: flex;
	flex-flow: column; /*flex-direction, plus flex-wrap*/
	gap: 2em;
}

.primary {
	flex: 55;
}

.secondary {
	flex: 34;
}

/* wide screen layout */
@media screen and (min-width: 600px) {	
	main {
		flex-flow: row;
	}
}

@media screen and (min-width: 960px) {
	body {
		width: 960px;
		margin: 0 auto;
		box-shadow: 0 0 .5em #0003;
	}
}