@import "compass/css3";
@import url("https://fonts.googleapis.com/css?family=Merriweather+Sans:300italic");

$spacing: 20px
$radius: 4px
$color: #BDCDE8


$dir: "http://www.michaelmammoliti.com/_projects/blockquotes/"

=prefix($property, $value)
  -webkit-#{$property}: #{$value}
  -ms-#{$property}: #{$value}
  -moz-#{$property}: #{$value}
  -o-#{$property}: #{$value}
  #{$property}: #{$value}

=radius($rad: $radius)
  +prefix(border-radius, #{$rad})

=bg($position: "center center", $size: cover)
  background-position: #{$position}
  background-size: #{$size}
  background-repeat: no-repeat

=bg-image($dir, $size: cover, $position: "center center")
  +bg(#{$position}, #{$size})
  background-image: url(#{$dir})

=absolute-center
  position: absolute
  top: 50%
  left: 50%
  +prefix(transform, "translate(-50%, -50%)")

*
  padding: 0
  margin: 0
  border: 0
  border-radius: 0
  font-size: 13px
  box-sizing: border-box
  color: #888
  font-family: 'Merriweather Sans', sans-serif

html
  background-color: #eee

body
  color: #eee

.padding
  padding: $spacing

blockquote
  width: 50%
  max-width: 500px
  +absolute-center

  .blockquote-content
    width: 50%
    display: block
    overflow: hidden
    border-top: 10px solid $color
    background-color: #fff
    position: relative

    &:before
      width: 250px
      height: 250px
      display: block
      background-color: $color
      content: " "
      position: absolute
      bottom: 0
      right: 0
      z-index: 1
      opacity: .3
      +prefix(transform, "translate(30%, 30%)")
      +bg-image("#{$dir}_media/icons/blockquotes.png", "auto 50%")
      +radius(50%)

    p
      position: relative
      font-style: oblique
      z-index: 2


@media screen and (max-width: 300px)
  body
    zoom: .8

@media screen and (max-height: 300px)
  body
    zoom: .8

/* Some vars */
$background-color: hsl(50, 5, 97);
$black: hsl(200, 40, 10);
$white: $background-color;
$base-font-size: 2.4em;
$base-line-height: 1.5em;

.brooks {
  position: relative;
  font-family: 'Sanchez', serif;
  font-size: $base-font-size;
  line-height: $base-line-height;
  font-style: italic;
  &:before {
      content: '\201C';
      position: absolute;
      top: 0.25em;
      left: -0.15em;
      color: darken($white, 7%);
      font-size: 6em;
      z-index: -1;
   }
}

.ludwig {
  position: relative;
  padding-left: 1em;
  border-left: 0.2em solid lighten($black, 40%);
  font-family: 'Roboto', serif;
  font-size: $base-font-size;
  line-height: $base-line-height;
  font-weight: 100;
  &:before, &:after {
      content: '\201C';
      font-family: 'Sanchez';
      color: lighten($black, 40%);
   }
   &:after {
      content: '\201D';
   }
}

.groucho {
  position: relative;
  font-family: 'Sanchez', serif;
  font-size: $base-font-size;
  line-height: $base-line-height;
  
  footer {
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.6em;
    font-weight: 700;
    color: darken($white, 15%);
    float: right;
    
    &:before {
      content: '\2015';  
    }
  }
  &:after {
      content: '\201D';
      position: absolute;
      top: 0.28em;
      right: 0;
      font-size: 6em;
      font-style: italic;
      color: darken($white, 7%);
      z-index: -1;
   }
}


/* Some generic stuff. Don't worry about it */

@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700),
        url(https://fonts.googleapis.com/css?family=Sanchez:400italic,400),
        url(https://fonts.googleapis.com/css?family=Roboto:100);

html {
  background: hsl(50, 5, 97);
  font-size: 16px;
}

body {
  color: hsl(200, 40, 40);
  font-size: 62.5%;
}

.container {
  width: 80em;
  margin: 2em auto;
}

blockquote {
  margin-bottom: 3em;
}