<div class="quote--container">
    <p class="quote">
        There is no exquisite beauty&hellip;
        without some <span class="quote--highlight">strangeness</span> in the proportion.
    </p>
    <p class="quote--author">&ndash; Francis Bacon</p>
</div>

@import url(https://fonts.googleapis.com/css?family=EB+Garamond|Droid+Serif|Playfair+Display|Open+Sans+Condensed:300);

*, *:after, *:before {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

html, body {
    font-family: 'EB Garamond';
    font-size: 32px;
    line-height: 1.4rem;
    height: 100%;
    padding: .5rem;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: auto;
     -webkit-font-smoothing: antialiased;
             font-smoothing: antialiased;
    font-kerning: normal;
    color: #1A222F;
    background: #F4FFF3;
}

p {
    line-height: 1.4em;
}

.quote {
    position: relative;
    letter-spacing: .03em;
    margin-bottom: .5rem;
    
    &:before {
        content: "“";
        position: absolute;
        left: -.7em;
    }
    
    &:after {
        content: "”";
        margin-right: -1rem;
    }
}

.quote--container {
    margin: 4.5rem auto 0;
    width: 17em;
    border-bottom: 2px dotted #C6D1BF;
    padding-bottom: .5rem;
}

.quote--highlight {
    color: #D24335;
}

.quote--author {
    font-family: 'Open Sans Condensed';
    font-size: .8rem;
    text-align: right;
    font-weight: 300;
}