%div.wrap
  - (1..50).each do |i|
    %div.row
      - (1..10).each do |i|
        %div

%div.title
  The Flame Alphabet

@import "compass/css3";

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

$red: #cc2133;
$darkblue: #1e3a50;
$orange: #d35a45;
$yellow: #f6d633;
$teal: #b8d6a2;

$padding: 30px;

body {
  overflow: hidden;
}

.wrap {
  margin: -500px 0 0 0;
}

.title {
  position: absolute;
  background: white;
  z-index: 1;
  top: 0;
  font-family: 'EB Garamond', serif;
  padding: 30px 50px; 
  font-size: 32px;
  width: 300px;
  text-align: center;
  left: 50%;
  margin-left: -200px;
  top: 100px;
}

.row {
  height: 60px;
  white-space: nowrap;
  > div {
    width: 0;
    height: 0;
    border: 150px solid transparent;
    border-bottom: 300px solid $red;
    position: relative;
    display: inline-block;
    margin-left: -70px;
    @include filter(drop-shadow(-12px 10px 10px rgba(black, 0.4)));
  }
  
  &:nth-child(5n) {
    > div {
      border-bottom-color: $red;
    }
  }
  
  &:nth-child(5n+1) {
    > div {
      border-bottom-color: $orange;
    }
  }
  
  &:nth-child(5n+2) {
    > div {
      border-bottom-color: $yellow;
    }
  }
  
  &:nth-child(5n+3) {
    > div {
      border-bottom-color: $teal;
    }
  }
   
  &:nth-child(5n+4) {
    > div {
      border-bottom-color: $darkblue;
    }
  }
  
  &:after {
    content: "";
    display: block;
    clear: both;
  }
  
}