style.sass

*
  margin: 0
  padding: 0
  border: 0
  outline: 0

$height-ratio: 1.7

$piece-width: 100px
$piece-height: $piece-width * $height-ratio

$container-width: $piece-width * 4

@mixin flip
  +rotate(180)

@mixin rotate($deg)
  -moz-transform: rotate(#{$deg}deg)
  -webkit-transform: rotate(#{$deg}deg)
  -o-transform: rotate(#{$deg}deg)
  -ms-transform: rotate(#{$deg}deg)
  -khtml-transform: rotate(#{$deg}deg)
  transform: rotate(#{$deg}deg)

@mixin opacity($amt)
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$amt})"
  filter: alpha(opacity=#{$amt})
  -moz-opacity: #{$amt}
  -khtml-opacity: #{$amt}
  opacity: #{$amt}

a,
a:visited
  color: black
  text-decoration: none

#container
  width: $container-width
  margin: 10% auto
  position: relative

  > div
    position: absolute

  .triangles
    +rotate(30.5)
    top: -80px
    left: 115px

    > div
      height: 0
      width: 0
      border-right: $piece-width solid transparent
      border-left: $piece-width solid transparent
      border-bottom: $piece-height solid black
      position: absolute

    .orange
      left: 0
      border-bottom-color: #ffab00

    .red
      +flip
      left: $piece-width
      border-bottom-color: #f90000

    .purple
      left: $piece-width * 2
      border-bottom-color: #711e4b
      z-index: 5000

    .blue
      border-bottom-color: #0091c9
      top: $piece-height

      &.first
        +flip
        left: $piece-width * 2
      &.second
        left: $piece-width
        
    .green
      +flip
      border-bottom-color: #10a960
      top: $piece-height

    .circle
      width: 120px
      height: 120px
      margin: ($piece-height / 8) ($piece-width / 2)
      background: transparent
      border: 50px solid white
      border-radius: 999px
      left: 42px
      top: 39px

  .title
    border: 0
    width: $container-width
    text-align: center
    font-weight: bold
    font-family: helvetica
    font-size: 80px
    top: ($piece-height * 2) + 50px

#fork-me-on-github
  +opacity(.3)

  img
    position: absolute
    top: 0
    left: 0
    border: 0

  &:hover
    +opacity(1)