/* Page Background Color */

body {
  background-color: indigo;
}

/* Title Font and Color */

#titleblock > h1 {
  font-family: "Courier New";
  font-style: italic;
  font-weight: 900;
  font-size: 45px;
  color: Lawngreen;
}

/* Author Name's Font and Color */

#titleblock > p {
  font-family: "Courier New";
  font-style: italic;
  font-weight: 900;
  font-size: 20px;
  color: white;
}

/* Panel Text Font and Color */

.narration {
  font-family: "Trebuchet MS";
  font-style: italic;
  font-size: 14px;
  color: white;
  background-color: black;
}

.bigtext {
  font-family: "Courier New";
  font-style: italic;
  font-size: 24px;
  color: White;
  text-shadow: 2px 2px black;
}

.biggold {
  font-family: "Courier New";
  font-style: italic;
  font-size: 24px;
  color: Gold;
  text-shadow: 2px 2px black;
}

/* Panel Background Colors */

#introduction {
  background-color: green;
}

#value1 {
  background-color: cyan;
}

#value2 {
  background-color: orangered;
}

#value3 {
  background-color: deepskyblue;
}

#value4 {
  background-color: magenta;
}

#value5 { 
  background-color: yellowgreen;
}

#purpose1 {
  background-color: mediumblue;
}

#purpose2 {
  background-color: gold;
}

#assets {
  background-color: seagreen;
}

#barriers {
  background-color: indigo;
}

#mantra1 {
  background-color: orange;
}

#mantra2 {
  background-color: cornflowerblue;
}

#mantra3 {
  background-color: lightseagreen;
}

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

.onefifth {
  width: 17.5%;
}

.fourfifths {
  width: 77.5%
}

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

body {
  height: 100%;
  width: 800px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 2150px;
}

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

/* 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 black;
  background-color: grey;
}

.label {
  position: relative;
  float: left;
  overflow: hidden;
  height: 65px;
  border:10px solid black;
  background-color: mediumaquamarine;
}

/* These classes are for the different text elements we will be using in the storyboard */
.narration {
  padding: 10px;
  margin: 8px;
  z-index: 2;
}

.bigtext {
  font-weight: 900;
  line-height: 100%;
  margin: 20px;
  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;
}

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