html* {box-sixing: border-box;}

:root {
	--headerbg: #aaa;
	--dark: #9d8189;
	--bg1 #f4acb7;
	--bg2 #ffcad4;
	--bg3 #f4acb7;
	--bg4 #ffe5d9;
}

body{
	font-family: "Avenir Next", system-ui, sans-serif;
	font-size: 100%;
	line-height: 1.4rem;
	margin: 0;
	color: var(--bg3);
}

body>* {padding: 0 1em;}

header {
	min-height:40vh;
	background-color:var(--headerbg);
	display: flex;
	justify-content: space-between;
}
.home header {
	background-color: var(dark);
}
.next header {
	background-color: var(--bg3);
}
.gallery header {
	background-color: var(--bg4);
}
.about header {
	background-color: var(--bg1)
}



h1 { font-size: 1.5rem;
	margin:0;
}


h2 {
	font-size: 8vw;
	
}



main {
	display: flex;
	flex-direction:column;
}


nav {
	padding-bottom: 1em;
}


@media (min-width: 600px){

main {
	gap: 1em;
	flex-direction: row;
}

section.primary {flex:3;}
section.secondary {flex: 1;}




ul.toplinks {
	justify-content: center;
	gap: 2em;
	list-style: none;
	display: flex;
	flex-direction: column;
}

.toplinks a.cr {pointer-events: none;
				text-decoration: none;
}

.gallery section.primary {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	flex-wrap: wrap;
}


.gallery figure {background-color: var(--bg2);
				 height: 10em;
				 width: 10em;
				 margin: 0;
				 color: var(--dark);
}
@media (min-width: 900px) {
	body {
		display: flex;
		flex-direction: row;
		align-items: stretch;
	}
	header {
		align-self: stretch;
	}
	
	main {
		flex-direction: column;
	}
	
	footer {
		position: absolute;
		bottom: 1em;
	}
}