/* This sets the background color for our comic page*/
html body {
  background-color: #2b2b2b;
}

/* These IDs are for the invisible divs that will hold our comic together */
#page {
  height: 100%;
  width: 800px;
  margin-right: auto;
  margin-left: auto;
}

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

/*These are the text styles for the headline and byline */

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

h2 {
  font-size: 16px;
}

/* These IDs are for the panels that will make up our comic. */
#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";
  font-style: italic;
  font-weight: 900;
  color: white;
}

#panel1 {
  width: 780px;
}

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

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

/* These classes are for the different text styles we will be using in the comic */

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

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

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

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

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

#image1 {
  position: absolute;
  width: 100%;
  top: -50px;
}

#image2 {
  position: absolute;
  height: 100%;
}

#image3 {
  position: absolute;
  width: 100%;
}

#image4 {
  position: absolute;
  width: 120%;
  top: -90px;
}

#image5{
  position: absolute;
  height: 100%;
  left: -30px;
}

.inback {
  z-index: 1;
}

.inmiddle {
  z-index: 2;
}

.infront {
  z-index: 3;
}