.article {
  background: $article-bg;
  border-radius: $radius 0 0 $radius;
  padding: 2rem 4rem 3rem;
}

.article--content {
  max-width: 850px;
  font-size: 1.1rem;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: $article-heading;

    a {
      color: inherit !important;
      font-weight: inherit !important;
      text-decoration: none;

      code:after {
        border: none;
      }
    }
  }

  h2,
  h3,
  h4,
  h5,
  h6 {
    &+.highlight pre {
      margin-top: .5rem
    }

    &+pre {
      margin-top: .5rem
    }

    &+.code-tabs-wrapper {
      margin-top: 0;
    }

    &.monospace {
      font-family: $code;
    }

    &.green {
      color: $gr-rainforest;
    }

    &.orange {
      color: $r-dreamsicle;
    }

    &.checkpoint::before {
      content: '\e93b';
      font-family: 'icomoon-v4';
      font-size: 2.25rem;
      color: $br-new-magenta;
      display: inline;
      margin: 0 .5rem 0 0;
      vertical-align: top;
    }

    &[metadata]::after {
      content: attr(metadata);
      margin-left: .65rem;
      padding: .1em .5em;
      color: $article-heading;
      background: rgba($article-heading, .12);
      font-size: .75em;
      font-style: normal;
      font-weight: $medium;
      border-radius: 1em;
      display: inline-block;
      vertical-align: middle;
    }

    &[date]::after,
    &[note]::after {
      margin-left: .65rem;
      opacity: .4;
      font-size: .75em;
      font-weight: $medium;
      font-style: inherit;
    }
    &[date]::after {content: attr(date);}
    &[note]::after {
      content: attr(note);
      font-size: .85em;
    }
  }

  h1 {
    font-weight: bold;
    font-size: 2.75rem;
    margin: .4em 0 .2em;
  }

  h2 {
    font-size: 2.1rem;
    margin: -.25rem 0 .5rem;
    padding-top: 1.75rem;
    font-weight: $medium;
    color: $article-heading-alt;
  }

  h3 {
    font-size: 1.75rem;
    font-weight: $medium;
    margin: -1rem 0 .5rem;
    padding-top: 1.75rem;
  }

  h4 {
    font-size: 1.35rem;
    font-style: italic;
    font-weight: $medium;
    margin: -1.25rem 0 .5rem;
    padding-top: 1.75rem;
    color: $article-heading-alt;
  }

  h5 {
    font-size: 1.1rem;
    margin: -1.25rem 0 .25rem;
    padding-top: 1.75rem;
  }

  h6 {
    font-size: 1.1rem;
    font-style: italic;
    margin: -1.25rem 0 .25rem;
    padding-top: 1.75rem;
  }

  p,
  li {
    color: $article-text;
    line-height: 1.8rem;
  }

  p {
    margin: 0 0 1.5em;
  }

  a {
    color: $article-link;
    font-weight: $medium;
    text-decoration: none;

    &:hover {
      color: $article-link-hover;
    }

    &.help-link {
      display: inline-block;
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
      background: $article-bg;
    }
  }

  strong {
    color: $article-bold;
  }

  img {
    max-width: 100%;
    margin-bottom: 2rem;
    border-radius: ($radius * 1.5);
    box-shadow: 1px 3px 10px $article-shadow;
  }

  ul+p>img {
    margin-top: 1.5rem;
  }

  hr {
    border-width: 1px 0 0;
    border-color: $article-hr;
    border-style: solid;
    margin: 1.85rem 0 1.75rem;
  }


  @import "article/blocks",
  "article/buttons",
  "article/captions",
  "article/children",
  "article/code",
  "article/columns",
  "article/diagrams",
  "article/expand",
  "article/feedback",
  "article/flex",
  "article/flux",
  "article/html-diagrams",
  "article/influxdbu",
  "article/influxql",
  "article/keybinding",
  "article/list-filters",
  "article/lists",
  "article/opacity",
  "article/pagination-btns",
  "article/related",
  "article/release-toc",
  "article/scrollbars",
  "article/svgs",
  "article/tabbed-content",
  "article/tables",
  "article/tags",
  "article/telegraf-plugins",
  "article/title",
  "article/truncate",
  "article/video";


  //////////////////////////////// Miscellaneous ///////////////////////////////

  .required,
  .req {
    color: #FF8564;
    font-weight: $medium;
    font-style: italic;
    margin: 0 .15rem 0 .1rem;

    &.asterisk {
      margin: 0 -.1rem 0 -.5rem;
    }

    &.key {
      font-size: .9rem;
      font-weight: $medium;
    }

    &.normal {font-style: normal;}
    
    &.blue {color: $b-dodger;}
    &.green {color: $gr-viridian;}
    &.magenta {color: $p-comet;}
    &.pink {color: $br-new-magenta;}
  }

  h2,
  h3,
  h4,
  h5,
  h6 {
    &+.keep-url {
      margin-top: -1.5rem;
      z-index: -100;
    }
  }

  a.q-link {
    font-size: .8rem;
    vertical-align: super;
    line-height: 0;
    color: $g20-white;
    opacity: .5;
    transition: opacity .2s;

    &:hover {
      opacity: 1;
    }
  }

  p.read-more {
    text-align: right;
    font-style: italic;
  }

  .highlight,
  pre,
  code,
  .flex-wrapper {
    &+p.read-more {
      margin: -.75rem 0 .5rem;
    }
  }

  .nowrap {
    white-space: nowrap
  }

  .all-caps {
    text-transform: uppercase;
    font-size: 1.05rem;
    letter-spacing: .1em;
    font-weight: $medium !important;
  }

  span,
  strong,
  em {
    &.orange {
      color: #FF8564;
    }

    &.blue {
      color: $b-dodger;
    }

    &.green {
      color: $gr-viridian;
    }

    &.magenta {
      color: $p-comet;
    }

    &.pink {
      color: $br-new-magenta;
    }
  }

  /////////////////////////// Getting Started Buttons //////////////////////////

  .get-started-btns {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    margin-bottom: 2rem;

    a.btn {
      max-width: 300px;
      width: 100%;
      text-align: center;
      padding: 1rem;

    }
  }
}

////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
////////////////////////////////////////////////////////////////////////////////

@include media(small) {
  .article {
    padding: 1.5rem 1.5rem 3rem;

    h2 {
      font-size: 1.9rem;
    }

    h3 {
      font-size: 1.55rem;
    }

    h4 {
      font-size: 1.3rem;
    }

  }
}