:root{

--eggshell: #faf3ddff;
--green: #c8d5b9ff;
--teal1: #8fc0a9ff;
--teal2: #68b0abff;
--blue: #696d7dff;
}

body {
	background-color: var(--eggshell);
	color: var(--teal2);
	Font-family: system-ui, sans-serif;
	Font-size: 100%;
	Line-height: 1.35rem;
}

header {
	display: flex;
	flex-direction: column;
	min-height: 10vh;
	justify-content: flex-start;
	background-color: var(--green);
	
}

ul.nav {
	list-style:none;
	padding:0;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

a.toplink {
	color: var(--blue);
	background-color:var(--teal1);
	padding: .2em .8em .8em;
	display: block;
	text-decoration: none;
	border-radius: 100px;
	text-align:center;
}
a.toplink.cr {
	pointer-events: none;
	text-decoration: none;
}
li.toplink {
	min-width: 20%;
	margin: 1e,;
}

.image-row{
	display:flex;
	flex-direction: row;
	justify-content:center;
	align-items: center;
	background-color:var(--teal1);
	color: white;
}
.image-grid{
	display: flex;
	flex-wrap:wrap;
	gap:10px;
	justify-content: center;
}
.image-grid figure {
  flex: 1 1 30%;          
  max-width: 300px;          
  text-align: center;        
}
h2 {
	padding-top: 1em;
	font-size:8vw;
	text-align: center;
	outline: ;
}

@media (max-width: 600px) {
  .image-row {
    flex-direction: column;  
    align-items: flex-start;
  }