body {
  margin: 0;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

div.header {
  background: url("../images/story/story-header-image.png") center center;
  background-size: cover;

  width:  100vw;
  height: 33.3vh;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

div.header-divider {
  width:  100vw;
  background-color: hsl(192, 2.3%, 61.8%);
}

div.header div.pre-title {
  height: 4em;
}

div.header div.title {
  background: url("../images/story/story-title.png") center center no-repeat;
  background-size: contain;
}

div.header div.post-title {
  height: 4vh;

  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

div.post-title > div {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0.809em;
  margin-right: 0.809em;

  color:hsla(188, 6.5%, 52%, 0.618);
  font-size: 1.8vh;
}

div.post-title > div:last-child {
  margin-right: 1.618em;
}

div.post-title > div > a {
  text-decoration: underline;
}

a, a:visited {
  text-decoration: none;
  color: inherit;
}

div.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

div.main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

div.story-divider-container {
  width:          100%;
  margin-top:     2em;
  margin-bottom:  5em;

  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
}

div.story-text p.story-text-title {
  font-weight:  bold;
}

div.story-text {
  line-height: 1.382em;
}

div.story-text > img {
  width: calc(100% - 1.236em);
  margin: 3em 0.382em 0.382em 0.382em;
  border-radius: 0.236em;
}

div.bottom-copyright {
  padding-top: 8em;
  margin-bottom: 0.382em;
  font-size: 0.618em;
  
  justify-content: space-between;
  text-align: center;
}