.comments
  h3 Comments 
  p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec dignissim nulla. In gravida, ante et pellentesque suscipit, justo mauris placerat magna, auctor ultricies arcu ipsum sed risus. Maecenas fermentum mi sit amet sem mollis venenatis. Nullam augue est, facilisis non lacinia ut, tristique in dui.

@import "compass/css3";

// --------------------------------------------------
// This first section is just a mixin for arrows
// --------------------------------------------------

// $direction: top, left, right, bottom, top-left, top-right, bottom-left, bottom-right
// $color: hex, rgb or rbga
// $size: px or em
// @example
// .element{
//     @include arrow(top, #000, 50px);   
// }
@mixin arrow($direction, $color, $size){
    display: inline-block;
    height: 0;
    width: 0;
    
    @if $direction == 'top' {
      border-left: $size solid transparent;
      border-right: $size solid transparent;
      border-bottom: $size solid $color;
    } @else if $direction == 'right' {
      border-top: $size solid transparent;
      border-bottom: $size solid transparent;
      border-left: $size solid $color;
    } @else if $direction == 'bottom' {
      border-top: $size solid $color;
      border-right: $size solid transparent;
      border-left: $size solid transparent;
    } @else if $direction == 'left' {
      border-top: $size solid transparent;
      border-right: $size solid $color;
      border-bottom: $size solid transparent;
    } @else if $direction == 'top-left' {
      border-top: $size solid $color; 
      border-right: $size solid transparent;  
    } @else if $direction == 'top-right' {
      border-top: $size solid $color; 
      border-left: $size solid transparent;
    } @else if $direction == 'bottom-left' {
      border-bottom: $size solid $color; 
      border-right: $size solid transparent;  
    } @else if $direction == 'bottom-right' {
      border-bottom: $size solid $color; 
      border-left: $size solid transparent;
    }
}


// Import Open Sans font ----------------------------

@import url(https://fonts.googleapis.com/css?family=Open+Sans);


// Set background color
body {
  background-color: #fafafa;
}



// --------------------------------------------------
// The real scss starts below this comment
// --------------------------------------------------

.comments {
  background-color: #363636;
  font-family: 'Open Sans', sans-serif;
  margin: 30px;
  position: relative;
  width: 400px;
  @include border-radius(4px);
  @include box-shadow(rgba(#000, 0.3) 0 0 15px);
  h3 {
    border-bottom: 1px solid #262626;
    color: #4899c4; // this color is $light-blue
    font-weight: normal;
    font-size: 22px;
    padding: 12px 0 8px 0;
    text-align: center;
  }
  p{
    border-top: 1px solid #424242;
    color: #fff;
    font-size: 14px;
    line-height: 1.75em;
    padding: 10px 20px 16px 20px;
  }
  &:before {
    @include arrow(top, #363636, 10px);
    content: "";
    position: absolute;
      top: -10px;
      right: 20px;
    z-index: 1;
  }
}