html body{
 background-color: #2d2d2d;
  
}

#page {
 height: 100%;
  width: 800px;
  margin-right: auto;
  margin-left: auto;
  
}

#titleblock{
 height: 160px;
  width:800px;
  padding-left: 10px;
}

h1, h2
{
 font-family: "Comic Sans MS";
  font-style: italic;
  font-weight: 900;
  color: white;
}

h2{
 font-size: 16px; 
}
#panel1, #panel2, #panel3, #panel4, #panel5{
  position: relative;
  height: 280px;
  border: 10px solid #2b2b2b;
  float: left;
  background-color: white;
  overflow: hidden;
  font-family: "Comic Sans MS";
  color: white;
  font-style: italic;
  font-weight: 900;
}

#panel2, #panel5
{
  width: 280px;
}

#panel1{
  width: 780px;
}

#panel3, #panel4{
  width: 480px; 
}

.narration{
 
  font-size: 15px;
  padding: 15px;
  margin: 10px;
  background-color: #2b2b2b;
}

.bigtext {
  font-size: 30px;
  line-height: 100%;
  margin: 20px;
  text-shadow: 2px 2px #2b2b2b;
}

/* These classes can position text and images within the panel.*/

.left {
    position:absolute;
    left: 0;
}

.right {
    position:absolute;
    right: 0;
}

.top {
    position:absolute;
    top: 0;
}

.bottom {
    position:absolute;
    bottom: 0;
}
  
/*These ids can be used fit specific images into our panels based on the dimensions of the image*/

#image1 {
    position: absolute;
}

/*These classes are for stacking or ordering elements on top of eachother.*/

.inback {
    z-index: 2;
}

.inmiddle {
    z-index: 2;
}

.infront{
    z-index: 3;
}

#image1{
  position:absolute;
  width:800px;
  bottom: -30px;
  height: 350px;
}
#image2{
  position:absolute;
  width:300px;
  bottom: -30px;
  height: 350px;
}
#image3{
  position:absolute;
  width:450px;
  bottom: -30px;
  height: 350px;
}
#image5{
  position:absolute;
  width:300px;
  bottom: -30px;
  height: 350px;
}
footer
{
  margin:310px; 
  padding: 200px;
}