Responsive speech bubble

A responsive speech bubble created with pure CSS...

HTML

<div class="testimonial">
    <div class="bubble">
        <h1>Responsive speech bubble</h1>
        <p>This is an alternative speech bubble that is <strong>responsive</strong> and can be used for blockquotes, testimonials, etc. I did NOT use the &lt;<strong>blockquote</strong>&gt; selector because I use Twitter Bootstrap frequently and did not want the TB blockquote styles inherited.</p>
        <p>Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
    </div>
    <div class="bubble-sig">
        John Smith<span>San Diego</span>
    </div>
</div>

CSS

body {
     font-size: 17px;
     font-family: Georgia, serif;
}
h1 {
    font-size: 2em;
    line-height: 1.4706em;
    margin-bottom: 0.7353em;
}
p {
    font-size: 1em;
    line-height: 1.4706em;
    margin: 0 0 1.4706em 0;
    font-style: italic;
}
strong { font-weight: bold }

.testimonial {
    position: relative;
    margin: 4em auto 3em;
    width:auto;
}
.testimonial:before {
    font-size: 15em; /* To change the quotation mark size, adjust font-size only and the other measurements will resize accordingly */
    position: absolute;
    padding-top: -0.5em;
    top: -0em;
    left: -0.24em;
    color: #f5f5f5;
    content: "\201C";
    z-index: 1;
}
.bubble {
    position:relative;
    padding: 2em;
    width: auto;
    border-radius: 120px;
    border: 4px solid #eee;
}
.bubble p {
    position: relative;
    z-index: 2;
}
.bubble p:last-child {
    margin-bottom: 0;
}

.bubble:before,
.bubble:after {
    display:block;
    position:absolute;
    right:4em;
    bottom:-18px;
    width: 0;
    height: 0;
    content: "\0020";
    border: solid 20px transparent;
    border-bottom: 0;
    border-top-color:#fff;
    overflow:hidden;
    z-index:2;
}
.bubble:before {
    bottom:-24px;
    border-top-color: #eee;
    z-index:1;
}
.bubble-sig {
    position: relative;
    margin-top: 30px;
    right: 3em;
    font: bold 1em/1.4 Arial, sans-serif;
    text-align: right;
    line-height: 1.2;
}
.bubble-sig span {
    display: block;
    font-weight: normal;
    font-size: 0.9em;
}