/* Page Background Color */

body {
  background-color: #FEE3A2;
}

/* Title Font and Color */

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

/* Author Name's Font and Color */

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

/* Panel Text Font and Color */

.narration {
  font-family: "Courier New";
  font-style: italic;
  font-size: 24px;
  color: white;
  text-shadow: 2px 2px #058240;
}
.bigtextGreen {
  font-family: "Courier New";
  font-style: italic;
  font-size: 24px;
  color: #058240;
  text-shadow: 2px 2px #87C159;
}
.bigtext {
  font-family: "Courier New";
  font-style: italic;
  font-size: 24px;
  color: white;
  text-shadow: 2px 2px #F3C301;
}

/* Panel Background Colors */

#introduction {
  background-color: green;
}
#value1 {
  background-color: #ADCACB; /* sky blue */
}

#value2 {
  background-color: #ADCACB; /* Salmon */
}

#value3 {
  background-color: #98ff98; /* Mint Green */
}

#value4 {
  background-color: #ffd700; /* Gold */
}

#value5 { 
  background-color: #000080; /* Navy Blue */
}

#purpose1 {
  background-color: #FEE3A2; /* Dark Brown */
}

#purpose2 {
  background-color: #FEE3A2; /* Ivory */
}

#assets {
  background-color: #d3d3d3; /* Light Gray */
}

#barriers {
  background-color: #36454f; /* Charcoal Gray */
}

#mantra1 {
  background-color: #5b0e2d; /* Panel Board Color */
}

#mantra2 {
  background-color: #ffa781; /* Background Color */
}

#mantra3 {
  background-color: #ffd700; /* Gold */
}

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

#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: 380px;
  border:10px solid #058240;
  background-color: grey;
}

.label {
  position: relative;
  float: left;
  overflow: hidden;
  height: 65px;
  border:10px solid #87C159;
  background-color: tan;
}

/* These classes are for the different text elements we will be using in the storyboard */
.narration {
  padding: 10px;
  margin: 8px;
  z-index: 2;
}
.bigtextGreen{  font-weight: 900;
  line-height: 100%;
  margin: 20px;
  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;
}

.textColorGreen {
	font-family: "Courier New";
  font-style: italic;
  font-size: 24px;
  color: #87C159;
  text-shadow: 1px 1px #058240;
}

.textColorYellow {
	font-family: "Courier New";
  font-style: italic;
  font-size: 24px;
  color: #FEE3A2;
  text-shadow: 1px 1px #F3C301
}