/*This sets the background color for our storyboard page*/

html body {
	background-color: #d4a373;
}

/*These IDs are for the invisible divs that will hold our storyboard together*/

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

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

/*You can adjust the amount of space at the bottom of the page by increasing or decreasing the number of pixels in the footer*/

#footer {
  position: relative;
  height: 2100px;
}

/*Title's styles*/

h1 {
  font-family: "Georgia";
  font-style: italic;
  font-weight: 900;
  font-size: 45px;
  color: #606c38;
  text-decoration: underline overline dotted;
 	text-shadow : 3px 1px 2px white;
}

/*Author name's styles*/

h2 {
  font-family: "Georgia";
  font-style: italic;
  font-weight: 900;
  font-size: 20px;
  color: white;
}

/*These classes define the default styles for the panels and labels that will make up our storyboard*/

.panel {
  position: relative;
  float: left;
  overflow: hidden;
  height: 280px;
  border:10px solid #606c38;
  background-color: grey;
}

.label {
  position: relative;
  float: left;
  overflow: hidden;
  height: 65px;
  border:10px solid #606c38;
  background-color: white;
}

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

.narration {
  font-family: "Trebuchet MS";
  font-style: italic;
  font-size: 14px;
  padding: 10px;
  color: white;
  margin: 8px;
  background-color: black;
  z-index: 2;
}

.bigtext {
  font-family: "Georgia";
  color: white;
  font-style: italic;
  font-weight: 900;
  font-size: 25px;
  line-height: 100%;
  margin: 20px;
  z-index: 2;
}

.quote {
  font-family: "Brush Script MT";
  color: white;
  font-weight: 500;
  font-size: 50px;
  margin: 20px;
  z-index: 2;
  text-shadow: 1px 1px 1px white;
}

.label .bigtext {
  color: #6c584c;
}

#panel8 .bigtext,
#panel6 .bigtext,
#panel4 .bigtext {
  color: black;
}

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

/*The 'img' selector and declaration will position all images in their panels*/

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/*These classes set the different panel sizes*/

.full {
  width: 97.5%;
}

.half {
  width: 47.5%;
}

.onethird {
  width: 30.8%;
}

.twothirds {
  width: 64.2%;
}

.twofifths {
  width: 37.5%;
}

.threefifths {
  width: 57.5%;
}

/*These IDs are for the panels that will make up our storyboard. You can change the panels' individual background colors here. You can change the background color of the whole page on line 4 of your CSS code.*/

#panel1 {
  background-color: green;
}

#panel2 {
  background-color: darkcyan;
}

#panel3 {
  background-color: orangered;
}

#panel4 {
  background-color: deepskyblue;
}

#panel5 {
  background-color: magenta;
}

#panel6 { 
  background-color: yellowgreen;
}

#panel7 {
  background-color: mediumblue;
}

#panel8 {
  background-color: gold;
}

#panel9 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 400px;
  background-color: black;
}