.wrap
  .triangle-background
  .triangle-background-weak
  .triangle-background-strong
  .github
  .footer-two
  .footer

@import "compass/css3";

html {
  
  height: 100%;
}

body {
  
  padding: 0;
  margin: 0;
  
  height: 100%;
}

@mixin triangle( $size, $color ) {
  
    width: 0;
    height: 0;
    border-style: solid;
    border-width: $size $size 0 0;
    border-color: $color transparent transparent transparent;
  transition: border-width 0.5s;
}

@mixin triangle-inverse( $size, $color ) {
  
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 0 $size;
    border-color: transparent transparent $color transparent;
  transition: border-width 0.5s;
}

.triangle-background {
  
    @include triangle( 700px, #F9F9F9 );
}

.triangle-background-weak {
  
    position: absolute;
  
    top: 0;
    left: 0;
  
    @include triangle( 500px, #E8E8E8 );
}

.triangle-background-strong {
  
    position: absolute;
  
    top: 0;
    left: 0;
  
    @include triangle( 400px, #D45E99 );
}

.wrap {
  
  height: 100%;
  
  position: relative;
  
  &:hover {
    
    .triangle-background {
      
      border-width: 700px 0 0 0;
    }
    
    .triangle-background-weak {
      
      border-width: 0 500px 0 0;
    }
    
    .triangle-background-strong {
      
      border-width: 400px 0 0 0;
    }
    
    .github {
      
      border-width: 0 100px 0 0;
    }
    
    .footer {
      
      border-width: 0 0 200px 200px;
    }
  }
}

.github {
    position: absolute;
  
    top: 0;
    left: 0;
  
    @include triangle( 100px, black );
}


.footer {
    position: absolute;
  
    right: 0;
    bottom: 0;
  
    @include triangle-inverse( 200px, #333 );
}


.footer-two {
    position: absolute;
  
    right: 0;
    top: 0;
  
    @include triangle-inverse( 400px, black );
}