* {
  box-sizing: border-box;
}

body {
  margin: 0px auto;
}

.width {
  width: 1200px;
  margin: 0 auto;
  overflow: auto;
}

nav {
  background-color: #65B7B3;
  padding: 25px 0px;
}

nav li {
  list-style: none;
  display: inline-grid;
  width: 250px;
  height: 70px;
  text-align: center;
}

nav li a {
  padding: 10px;
  margin: 5px auto;
  display: inline-block;
  font-family: "clarendon-wide",serif;
  font-weight: 700;
  color: black;
  font-size: 14px;
  text-decoration: none;
}

nav li a:hover {
  color: #85E8E3;
}

nav li a:visited {
  color: black;
}

header {
  background-color: #76D6D3;
  height: 500px;
}

img {
  float: left;
  margin-right: 25px;
  margin-bottom: 0px;
  display: block;
}

img.header-photo {
  border-right: 25px solid #85E8E3;
}

img.paleozoic-photo {
  border-right: 25px solid #66DBFF;
}

img.mesozoic-photo {
  border-right: 25px solid #FFC878;
}

img.cenozoic-photo {
  border-right: 25px solid #BAD350;
}

div.era {
  height: 400px;
}

div.period {
  height: 300px;
}

div.extinction-event {
  height: 250px;
}

div.intro-text {
  padding: 40px 0px 40px 466px;
}

div.era-text {
  padding: 90px 168px 90px 466px;
}

div.text {
  padding: 40px 100px 50px 466px;
}

div.extinction-text {
  padding: 30px 100px 30px 100px;
}

div#Paleozoic {
  background-color: #4DC8F7;
}

div#Cambrian {
  background-color: #4BC3E8;
}

div#Ordovician {
  background-color: #46B8DB;
}

div#Ordovician-Silurian {
  background-color: #274759;
  background-image: url("../images/paleo_background_test.jpg");
}

div#Silurian {
  background-color: #42ABCC;
}

div#Devonian {
  background-color: #3EA2C1;
}

div#Devonian-Extinction {
  background-color: #274759;
  background-image: url("../images/paleo_background_test.jpg");
}

div#Carboniferous {
  background-color:   #3995B2;
}

div#Rainforest-Collapse {
  background-color: #274759;
  background-image: url("../images/paleo_background_test.jpg");
}

div#Permian {
  background-color: #368DA8;
}

div#Permian-Extinction {
  background-color: #274759;
  background-image: url("../images/paleo_background_test.jpg");
}

div#Mesozoic {
  background-color: #EFBB65;
}

div#Triassic {
  background-color: #DDAA5F;
}

div#Triassic-Jurassic {
  background-color: #826237;
  background-image: url("../images/mesozoic_background.jpg");
}

div#Jurassic {
  background-color: #D3A25B;
}

div#Cretaceous {
  background-color: #C49755;
}

div#Cretaceous-Paleogene {
  background-color: #826237;
  background-image: url("../images/mesozoic_background.jpg");
}

div#Cenozoic {
  background-color: #9FBC46;
}

div#Paleogene {
  background-color: #96AA41;
}

div#Paleocene-Eocene {
  background-color: #4D5423;
  background-image: url("../images/cenozoic_background.jpg");
}

div#Neogene {
  background-color: #8DA03D;
}

div#Quaternary {
  background-color: #809137;
}

h1 {
  color: black;
  font-family: "clarendon-wide",serif;
  font-weight: 700;
  font-size: 66px;
  line-height: 0.8;
  margin-bottom: 0;
}

h2 {
  color: black;
  font-family: "clarendon-wide",serif;
  font-weight: 700;
  font-size: 55px;
  line-height: 0;
}

.h2sub {
  color: black;
  font-family: "clarendon-wide",serif;
  font-weight: 700;
  font-size: 33px;
}

h3 {
  color: black;
  font-family: "clarendon-wide",serif;
  font-weight: 700;
  font-size: 45px;
  line-height: 0;
}

.h3sub {
  color: black;
  font-family: "clarendon-wide",serif;
  font-weight: 700;
  font-size: 30px;
}

h4 {
  color: white;
  font-family: "clarendon-wide",serif;
  font-weight: 700;
  font-size: 35px;
  line-height: 0;
  text-align: center;
}

.h4sub {
  color: white;
  font-family: "clarendon-wide",serif;
  font-weight: 700;
  font-size: 25px;
  text-align: center;
}

p {
  font-family: "droid-sans",sans-serif;
  font-size: 16px;
  line-height: 1.3;
}

p.intro {
  font-family: "droid-sans",sans-serif;
  font-size: 19px;
  line-height: 1.3;
}

p.extinction {
  color: white;
  font-family: "droid-sans", sans-serif;
  font-size: 14px;
  margin-right: 150px;
  margin-left: 150px;
  line-height: 1.3;
  text-align: center;
}

footer {
  background-color: #646D2B;
  text-align: center;
  text-decoration: none;
  height: 150px;
  padding-top: 20px;
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
}

footer li {
  list-style: none;
  display: inline-block;
  width: 365px;
}

footer a {
  color: white;
  font-family: "droid-sans", sans-serif;
  font-size: 14px;
    text-decoration: none;
}

footer a:hover {
  color: #BAD350;
}

footer a:visited {
  color: white;
}

/*hierarchy:
headings: clarendon text pro bold
h1: 66px 66 leading
h1 sub: 36px
h2: 55px
h2 sub: 33px
h3: 45px 54px leading
h3 sub: 30px
h4: 35px 42px leading (1.2)
h4 sub: 25 px 30 px leading (1.2)

paragraphs: droid sans
p class=“intro”: 19px  19.2 leading (1.3 line height)
p: 16px 16.8 leading (1.3 line height)
p special: 14 pt

box sizes:
h1: 500px
h2: 400px
h3: 300px
h4: 250px

hex codes:
nav -
#65B7B3
phanerozoic -
#76D6D3
#85E8E3 (bar)
paleozoic -
#4DC8F7
#66DBFF (bar)
#4BC3E8
#46B8DB
#274759 (extinction)
#42ABCC
#3EA2C1
#3995B2
#368DA8

mesozoic -
#EFBB65
#FFC878 (bar)
#DDAA5F
#826237 (extinction)
#D3A25B
#C49755

cenozoic -
#9FBC46
#BAD350 (bar)
#96AA41
#4D5423 (extinction)
#8DA03D
#809137
#646D2B (footer)

*/