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

:root {
	--headerbg: #aaa;
	--taupe: #463f3aff;
    --grey: #8a817cff;
    --silver: #bcb8b1ff;
    --parchment: #f4f3eeff;
    --blush: #e0afa0ff;
	
}

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

body>* {padding: 0 1em;}

header {
	min-height: 50vh;
	background-color:var(--headerbg);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	}
.home header{
	background-color: var(--taupe) ;
}
.next header{
	background-color: var(--grey);
}
.gallery header{
	background-color: var(--silver);
}
.about header{
	background-color: var(--parchment);
}

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

h2 {
	font-size: 8vw;
	line-height: 1.1em;
	margin: ;
     }

nav {
	margin-bottom:0em;
}
ul.toplinks {
	list-style:none;
	padding:0;
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap: .5em;
}

.toplinks a.cr {
	pointer-events: none;
	text-decoration: none;
}
main {
	display:flex;
	flex-direction: column;
	gap: 1em;
	
}

.gallery section.primary {
	display:flex;
	flex-direction: row;
	justify-content: space-evenly;
	flex-wrap: wrap;
	gap:1em;
	padding-top: 1em;
}


.gallery figure{
	background-color:var(--blush);
	height: 10em;
	width: 25vw;
	margin:0;
	color: var(--taupe);
	margin: .2em;
}


@media(min-width: 600px) {

main { 
	 flex-direction: row;
	 gap: 1em; 
  }
   .about main{
	   flex-direction: column;
	   padding: 0 20vw;
   }
   section.primary {flex: 55;}
   section.secondary {flex: 34;}
   ul.toplinks{
	  flex-direction:row;
	  gap: 2em;
   }
}

@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;
	}
}