title: Styling quotation marks
body: <p>I have run into and issue when styling quotes. So what I'm trying to do is pull the quotation marks down a bit relative to the text so that it lines up well. I played around with relative and absolute positioning but could not figure it out. This program will become a random quote generator and the position of the end quote has to be such that it lines up the same way relative to the text if it there is a quote that takes up several lines.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: rgb(44, 62, 80);
  }
  .quoteMachine {
    margin: 100px auto 0 auto;
    padding: 40px 60px;
    max-width: 600px;
    min-height: 225px;
    border-radius: 5px;
    background-color: white;
  }
  .theQuote {
    text-align: center;
    font-size: 30px;
    color: rgb(44, 62, 80);
  }
  .quotetationMarks {
    font-size: 60px;
    font-weight: 600;
  }
  .quoteAuthor {
    text-align: right;
    font-size: 20px;
    color: rgb(44, 62, 80);
  }
  .twitterButton {}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="quoteMachine"&gt;
    &lt;div class="theQuote"&gt;
      &lt;blockquote&gt;&lt;span class="quotetationMarks"&gt;&amp;ldquo;&lt;/span &gt; They call me Mister Tiibs &lt;span class="quotetationMarks"&gt;&amp;rdquo;&lt;span&gt;&lt;/blockquote&gt;
        &lt;/div&gt;
        &lt;div class="quoteAuthor"&gt;
          - hello
        &lt;/div&gt;
        &lt;button class="twitterButton"&gt;&lt;/button&gt;
        &lt;button class="newQuoteButton"&gt;&lt;/button&gt;
        
        
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>