article { margin: 0 auto;
  & p a, figcaption a, table a, ul a { color: var(--dark-green-color) !important; }
  & div.main {
    width: 100vw; height: 100vh; max-width: 100%; overflow: hidden;
    display: flex; justify-content: center; align-items: center;
    background-size: cover; background-repeat: no-repeat;
    background-position: center center; background-attachment: fixed;
    position: relative;
    & div.top { width: 100%; position: absolute; top: 0; z-index: 1; }
    & div.layout {
      color: white; width: 100%; height: 100%; max-width: 1270px;
      /*font-size: calc(20px + 0.5vw);*/ text-align: center; text-shadow: 1px 1px black;
      display: flex; justify-content: center; align-items: center;
      flex-direction: column; z-index: 1;
      & div.head {
        display: flex; justify-content: center; align-items: center; flex-grow: 1;
        & div.category {
          background-color: rgba(0, 0, 0, 0.35); padding: 0.5em 1.0em;
          margin: 1.0em auto; display: inline-block;
          & a {
            color: var(--light-green-color); font: 300 0.9em sans-serif;
            letter-spacing: 0.2em; text-shadow: none; text-transform: uppercase;
          }
        }
      }
      & div.body { flex-grow: 0;
        & h1 {
          color: #fff; font: 600 3.0em/130% "Lora", serif;
          text-shadow: 1px 1px 1px #000; margin: 0 auto;
        }
        & div.user { font-style: italic; font-size: 1em; margin: 0.5em auto; }
      }
      & div.foot { display: flex; justify-content: center; align-items: center; flex-grow: 1;
        & div {
          & div.date {
            &:first-letter { text-transform: uppercase; }
            font-size: 1.0em; font-weight: 300; margin: 1.0em auto;
          }
          & div.share {
            & a { zoom: 80%; filter: grayscale(1); opacity: .7; margin: 0 .2em;
              &:hover { filter: none;  opacity: 1; }
            }
          }
        }
      }
    }
    & div.bottom { width: 100%; color: white; font-size: 1.0em;
      display: flex; justify-content: space-between; align-items: flex-end;
      position: absolute; bottom: 0; z-index: 1;
      & div {
        width: fit-content; height: fit-content; text-shadow: 1px 1px black;
        &.description { text-align: left; }
        &.source { text-align: right; }
      }
    }
  }
  & h2 {
    max-width: 960px; font: 700 2em "Lora", serif; text-align: center; 
    padding: 0 5px; margin: 2em auto 1em;
  }
  & > p { max-width: 768px; padding: 0 5px; margin: 2em auto;
    &.intro {
      color: #666 !important; font: 300 1.1em/1.5 'Open Sans', sans-serif !important;
      margin-top: 2em;
   }
  }
  & figure { max-width: 100%; margin: 3em auto; display: block;
    & div.image { color: white; max-width: 100%; font: bold 0.6em sans-serif !important;
       text-shadow: black 1px 1px 1px; position: relative; margin: 0 auto;
      & img { width: 100%; display: block; }
      & div.carousel {
        & div.carousel-inner {
          & img { width: 100%; margin: 0; }
        }
        & div.carousel-indicators {
          & button { background-color: #ccc !important; }
        }
        & > button {
          & span.carousel-control-prev-icon, span.carousel-control-next-icon {
             background-color: #ccc !important;
          }
        }
      }
      & div.copyright {
        & div { width: fit-content; position: absolute; padding: 5px 3px;
          &.source { text-align: left; left: 1%; bottom: 1%; z-index: 2; }
          &.author { text-align: right; right: 1%; bottom: 1%; z-index: 3; }
        }
      }
    }
    & figcaption {
      color: #666; max-width: 768px; font: italic 0.8em serif;
      text-align: center;  margin: 10px auto 10px;
    }
  }
  & iframe { margin: 2em auto; max-width: 100% !important; display: block;
    &[data-size="small"] { width: 640px; height: 360px; }
    &[data-size="medium"] { width: 800px; height: 450px; }
    &[data-size="large"] { width: 960px; height: 540px; }
    &[data-size="full"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
    /*.video {}*/
    /*.map {}*/
    &.facebook { border: none; overflow: hidden; }
    &.twitter { width: 550px; height: 360px; }
  }
  & div.twitter-tweet { margin: 0 auto; }
  & ul { width: fit-content; max-width: 768px; margin: 1em auto 2em;
    & li { line-height: 150%; padding: 0 5px; margin: 0.6em; }
  }
  & table { width: fit-content; border-collapse: collapse; margin: 1em auto 2em;
    & tr { 
      & td, & th { border: solid 1px grey; padding: 0.4em 0.8em;
        &.left { text-align: left; }
        &.center { text-align: center; }
        &.right { text-align: right; }
        &.justify { text-align: justify; }
      }
      & th { font-weight: bold; }
    }
  }
  & blockquote { max-width: 928px; padding: 0 5px; margin: 2em auto;
    &.empty { visibility: hidden; }
    & p {
      font: italic 1.0em/1.5 'Open Sans', sans-serif !important;
      background: #eee; border-radius: 5px; padding: 15px;
      &::before { content: '\201C'; }
      &::after { content: '\201D'; }
    }
    & footer {  text-align: right;
      & cite { font-style: italic; }
    }
  }
  & address { width: fit-content; padding: 0 5px; margin: 2em auto;
    & p { font: 500 1em/1.3 'Open Sans', sans-serif !important; margin: 0.4em; }
  }
  & pre { width: fit-content; max-width: 100%; padding: 0 5px; margin: 2em auto; 
    &.code { font-size: 0.8em !important; line-height: 160%; }
  }
  & p.block, & table, & div.video, & figure div.image, & ul, & blockquote {
    &[data-size="small"] { max-width: 640px; }
    &[data-size="medium"] { max-width: 800px; }
    &[data-size="large"] { max-width: 960px; }
    &[data-size="full"] { max-width: 100%; }
  }
}