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

:root {
	--headerbg: #aaa;
	--dark: #03045e;
	--bg1: #0077b6;
	--bg2: #00b4d8;
	--bg3: #90e0ef;
	--bg4: #caf0f8;
	--bg5: #1f7a8c;
	--bg6: #bfdbf7;
}

body {
	font-family: Georgia, serif;
	font-size: 100%;
	line-height: 1.35rem;
	margin: 0;
	color: var(--dark);
	background-color: #e2eafc;
}

header {
	min-height: 35vh;
	background-color: var(--headerbg);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
}

.home header{
	background-color: var(--bg1);
}
.habitat header{
	background-color: var(--bg2);
}
.diet header{
	background-color: var(--bg3);
}
.funfacts header{
	background-color: var(--bg4);
}
.behavior header{
	background-color: var(--bg5);
}
.cited header{
	background-color: var(--bg6);
}

h1 {
	font-size: 1.5rem;
}

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

nav {
	padding-bottom: 1em;
}

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

figure {
	margin: 1em 0;
}

img.feature-image {
	width: 100%;
}

.video-wrapper {
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
}
.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media (min-width: 600px){
  
  main {
	flex-direction: row;
	gap: 1em;
  }
  
  ul.toplinks {
	  flex-direction: row;
	  gap: 2em;
  }
  
  figure {
	  margin: 3em;
  }
}