/* ADD RULES BELOW TO STYLE LAYOUT */

/* layout for comic book cover image gallery */
.comic-book-img-gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  
  
  /* comic book cover image style */
  
  .comic-book-imgs {
    width: 150px;
  }
  
  /* comic book citation style */
  
  #citations {
    font-family: italic;
    font-size: 10px;
    text-align: center;
  }
  
  /* storytelling flowchart image style */
  
  #flowchart {
    width: 300px;
    float: right;
    margin: 10px;
  }
  
  /* layout style for protagonist image and information*/
  
  .protag-n-info {
    justify-content: space-around;
    display: flex;
    flex-wrap: nowrap;
  }
  
  /* protagonist image style */
  
  #protag-img {
    width: 600px;
    float: left;
    margin: 25px;
  }
  
  /* layout style for supporting cast images */
  
  .supporting-cast {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  
  /* supporting cast image style */
  
  .supporting-cast-imgs {
    width: 500px;
  }
  
  /* layout for planning comic pages images and information */
  
  .planning-cp-img-info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around; 
  }
  
  /* layout for image and information within planning container */
  
  .panels {
    flex-grow: 1px;
    flex-wrap: wrap;
    display: flex;
    flex-direction: column;
  }
  
  .perspective {
    flex-grow: 1px;
    flex-wrap: wrap;
    display: flex;
    flex-direction: column;
  }
  
  .info > p {
    text-align: center;
  }
  
  /* comic panels image style */
  
  .panels-img {
    width: 600px;
  }
  
  /* perspective image style */
  
  .perspective-img {
    width: 600px;
  }
  
  /* layout style for publishing option images */
  
  .layout-publishing-option-imgs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-bottom: 300px;
  }
  
  .publishing-option-imgs {
    width: 500px;
  }
  
  /* layout style for image citation */
  
  #citations2 {
    font-family: italic;
    font-size: 10px;
    text-align: center;
    margin-bottom: 100px;
  }
  
#link-home {
  text-align: center;
  font-size: large;
}

#Link-home-text {
  text-align: center;
  font-size: large;
}

  /* style for paragraph in image citation container */
  
  
  
  /* DO NOT EDIT CODE BELOW */
  
  /* body style */
  body {
    background: #F5F5F5;
    color:#333333;
    font-family: Verdana;
  }
  
  /* title and subtitle styles */
  h1 {
    text-align: center;
    color: #E63946;
    text-shadow: #333333 2px 2px;
    font-size: 45px;
  }
  
  h2 {
    text-align: center;
    color: #1D3557;
    text-shadow: #333333 1px 1px;
    font-size: 30px;
  }
  
  h3 {
    text-align: center;
    color: #457B9D;
    text-shadow: #333333 1px 1px;
    font-size: 22px;
    text-decoration: underline;
  }
  
  /* general image style  */
  img {
    width: 300px;
    border-style: solid;
    border-color: #F4A261;
    box-shadow: 2px 2px;
  }/* ADD RULES BELOW TO STYLE LAYOUT */
  
  /* layout for comic book cover image gallery */
  
  
  
  /* comic book cover image style */
  
  
  
  /* comic book citation style */
  
  
  
  /* storytelling flowchart image style */
  
  
  
  /* layout style for protagonist image and information*/
  
  
  
  /* protagonist image style */
  
  
  
  /* layout style for supporting cast images */
  
  
  /* supporting cast image style */
  
  
  
  /* layout for planning comic pages images and information */
  
  
  /* layout for image and information within planning container */
  
  
  
  /* comic panels image style */
  
  
  
  /* perspective image style */
  
  
  
  /* layout style for publishing option images */
  
  
  
  
  /* layout style for image citation */
  
  
  
  /* style for paragraph in image citation container */
  
  
  
  /* DO NOT EDIT CODE BELOW */
  
  /* body style */
  body {
    background: #F5F5F5;
    color:#333333;
    font-family: Verdana;
  }
  
  /* title and subtitle styles */
  h1 {
    text-align: center;
    color: #E63946;
    text-shadow: #333333 2px 2px;
    font-size: 45px;
  }
  
  h2 {
    text-align: center;
    color: #1D3557;
    text-shadow: #333333 1px 1px;
    font-size: 30px;
  }
  
  h3 {
    text-align: center;
    color: #457B9D;
    text-shadow: #333333 1px 1px;
    font-size: 22px;
    text-decoration: underline;
  }
  
  /* general image style  */
  img {
    width: 300px;
    border-style: solid;
    border-color: #F4A261;
    box-shadow: 2px 2px;
  }