@bg: 'https://subtlepatterns.com/patterns/escheresque_ste.png';
@face-cont-size: 90px;
@face-size : 90px;
@quote-color: #444;
@face-offset-x: 5px;
@face-offset-y: 10px;
@max-quote-width: 280px;

body{
  margin: 0px;
  padding: 0px;
}
.bg{
  background: url(@bg) center center repeat;
  .cont{
    width: 500px;
    margin: 0px auto;
    padding: 50px;
    text-align: center;
    .quote-cont{
      display: block;
    }
    .quote{
      color: white;
      background: @quote-color;
      border-radius: 10px;
      padding: 10px;
      font-size: 17px;
      font-family: arial;
      margin: 10px;
      display: inline-block;
      text-shadow: 1px 1px 0px #222;
      max-width: @max-quote-width;
      box-shadow: 0px 1px #999 inset,
                  0px 10px #555 inset,
                  0px 0px 30px #000;
    }
    
    .arrow{
        display: block;
        width: 0px;
        height: 0px;
        border-top: 10px solid @quote-color;
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;
        position: relative;
        margin: -10px auto 10px auto;
    }
    
    .face{
      border-radius: 600px;
      overflow: hidden;
      border: 5px solid white;
      display: inline-block;
      width: @face-cont-size;
      height: @face-cont-size;
      
      img{
        width: @face-size;
        heoght: @face-size;
        margin-top: @face-offset-y*-1;
        margin-left: @face-offset-x*-1;
      }
    }
    
    .celeb{
      color: white;
      font: 13px arial;
      text-shadow: 1px 1px 0px #111;
    }
    
    .pixelware{
      display: block;
      width: 122px;
      background: white;
      height: 32px;
      background: url('http://pixelwa.re/wp-content/uploads/2013/02/Pixelware-white-sel.png') center center no-repeat; 
      border-radius: 3px;
      float: right;
      opacity: 0.5;
      transition: all 1s;
      &:hover{
        opacity: 0.9;
      }
    }
  }
}