@import "../styles/base-variables";

.markdown {
  padding: 1em;
  width: 100%;
  text-align: left;
  max-width: 1000px;

  a {
    font-weight: 700;
    color: $primary-color;

    &:hover {
      color: darken($primary-color, 10);
    }
  }

  li {
    line-height: 1.5em;
    padding-bottom: 0.8em;
  }

  blockquote {
    margin: 0 0 0 0.6em;
    font-size: 1.2em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.5em;
    font-style: italic;
    border-left: 0.2em solid rgba(0, 10, 50, 0.3);
    color: rgba(0, 10, 50, 0.6);
    padding-left: 0.6em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;

    p {
      margin: 0;
    }
  }

  p {
    //display: block;
    //flex-direction: row;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    line-height: 1.5em;

    :global .gatsby-resp-image-wrapper {
      padding: 1em;
      //width: 150px;
      width: 100%;
      //height: 150px;
      display: inline-block !important;
    }
  }

  code {
    background: #ffcbc5;
    padding: 0.1em 0.3em;
    border-radius: 0.3em;
    font-weight: 700;
  }

  :global .language-javascript {
    font-size: 0.85em;
    letter-spacing: 0.03em;

    code {
      background: none;
    }
  }
}