.documentationContent {

margin-bottom: 8em;
display: flex;
width: 100%;
justify-content: space-between;

@media screen and (max-width: 740px) {
  margin-bottom: 4em;
  display: block;
}

}

.inner-content {

flex: 1;
max-width: 720px;
@media screen and (max-width: 740px) {
  margin-right: 0;
}

& > h1:first-child {
  margin-top: 1em;
}

blockquote {
  padding: 0.5em 1em 0.5em 0.5em;
  margin: 1em 0;
  background-color: rgba(204, 122, 111, 0.05);
  border-left: 5px solid rgba(191, 87, 73, 0.1);

  h4 {
    margin-top: 0;
  }

  p {
    margin-bottom: 0;

    &:first-child {
      margin-top: 0;
    }
  }
}

img {
  max-width: 100%;
}

.highlight {
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(0,0,0,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.08),
    inset -1px 0 0 rgba(0,0,0,0.08),
    inset 4px 0 0 rgba(0,0,0,0.08);
  border-radius: 3px;

  .line-highlight {
    background-color: lighten(desaturate($rhodamine-color, 50%), 50%);
    left: 0;
    line-height: inherit;
    margin-top: 5px;
    pointer-events: none;
    position: absolute;
    right: 0;
    z-index: -1;
  }

  @media print {
    text-shadow: none;
  }
}

.highlight + .highlight {
  margin-top: -15px;
}

// Code blocks
pre.highlight {
  padding: 7px 14px;
  margin: 1em -4px;
  overflow: auto;
}

}

.read-next {

display: inline-block;
margin: 4em -1em 0;

@media screen and (max-width: 1119px) {
  margin-left: 0;
}

border-radius: 3px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
padding: 0.7em 1.5em 0.5em 1em;

&:hover, &:focus, &:active {
  background: $rhodamine-color;
  text-decoration: none;

  .read-next-continue, .read-next-title {
    color: white;
  }
}

.read-next-continue {
  @include body-font($size: 13px, $color: $rhodamine-color);
  display: block;
}

.read-next-title {
  @include body-font($size: 26px, $color: $text-color);
  display: block;
}

}

.nav-docs {

@include body-font($size: 13px);
margin: 1em 0 4em;
width: 195px;
padding-left: 20px;

@media screen and (max-width: 740px) {
  width: auto;
  padding-left: 0;
}

h3 {
  @include body-font($size: 13px);
  text-transform: uppercase;
  margin: 3em 0 1.5em;
}

ul {
  list-style: none;
  margin: 0;

  li {
    margin: 0;
    line-height: 32px;

    ul {
      margin-bottom: 18px;

      li {
        line-height: 21px;
      }
    }
  }
}

a {
  color: #666;
  display: block;

  &:hover, &:focus, &.active {
    text-decoration: none;
    color: $rhodamine-color;
  }
}

}