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

html body {
	background: url("https://projects.codecraftworks.com/web/Ip8Nmi4nXXfTAUzwWDC8/assets/Story.jpg");
}

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

/*Title's styles*/
h1 {
  font-family: "Georgia";
  font-style: italic;
  font-weight: 500;
  font-size: 65px;
  color: black;
}

/*Author name's styles*/

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

/*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: "Courier New";
    color: white;
    font-style: italic;
    font-weight: 900;
    font-size: 25px;
    line-height: 100%;
    margin: 20px;
    text-shadow:2px 2px black;
  	z-index: 2;
}

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

.center{
	position: absolute;
  text-align: center;
}

.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;
  
}
  
/*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 {
  position:relative;
  float: left;
  overflow: hidden;
  height: 570px;
  width: 97.5%;
}

.half {
  position:relative;
  float: left;
  overflow: hidden;
  height: 280px;
  width: 47.5%;
  float: left;
}

.onethird {
  position:relative;
  float: left;
  overflow: hidden;
  height: 280px;
  width: 30.8%;
}

.twofifths {
  position:relative;
  float: left;
  overflow: hidden;
  height: 280px;
  width: 37.5%;
}

.threefifths {
  position:relative;
  float: left;
  overflow: hidden;
  height: 280px;
  width: 57.5%;
}

.label {
  position:relative;
  float: left;
  overflow: hidden;
  height: 50px;
  width: 97.5%;
}

.label2 {
  position:relative;
  float: left;
  overflow: hidden;
  height: 75px;
  width: 97.5%;
}

.blur{
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

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

#panel1 {
  border:10px solid black;
  background-color: green;
}

#panel2 {
  border:10px solid black;
  background-color: darkcyan;
}

#panel3 {
  border:10px solid black;
  background-color: orangered;
}

#panel4 {
  border:10px solid black;
  background-color: deepskyblue;
}

#panel5 {
  border:10px solid black;
  background-color: magenta;
}

#panel6 { 
  border:10px solid black;
  background-color: yellowgreen;
}

#panel7 {
  border:10px solid black;
  background-color: mediumblue;
}

#panel8 {
  border:10px solid black;
  background-color: gold;
}

#panel9 {
  border:10px solid black;
  background-color: seagreen;
}

#panel10 {
  border:10px solid black;
  background-color: indigo;
}

#panel11 {
  border:10px solid black;
  background-color: orange;
}

#panel12 {
  border:10px solid black;
  background-color: green;
}

#panel13 { 
  border:10px solid black;
  background-color: yellowgreen;
}

#panel14 { 
  border:10px solid black;
  background-color: yellowgreen;
}

#label1{
	border:10px solid black;
  background-color: cornflowerblue;
}