// This is a list of all of our base 
// colors. we loop through this in
// order to get a rainbow of different
// palettes. Every color in this map
// corresponds to a row of cubes.
$colors: (
  #67c7d3
  #e6b25e
  #be69c1
  #77c860
  #cd668b
  #6c6ec6
);

// This is a "palette" of functions that lets us get
// a variant of a given base color.
@function pale($color) {
  // Used for the background.
  @return lighten( desaturate( $color, 10 ), 30 );
}
@function light($color) {
  // Used for the cube's top.
  @return lighten( saturate( $color, 25 ), 20 );
}
@function dark($color) {
  // Used for the cube's side.
  @return darken( desaturate( $color, 20 ), 12 );
}

.container {
  // This nasty little loop loops through all of our base colors
  // and plugs them into our palette of functions
  // to create a beautiful rainbow of floaty cubes.
  @for $i from 1 to length($colors) + 1 {
    
    // This variable is only used in this loop!
    // And it gets overridden with every
    // iteration of the loop!
    $c: nth($colors, $i);

    &:nth-child(#{$i}) {
      background: pale($c);

      .box {
        background: $c;

        &:before {
          background: light($c);
        }

        &:after {
          background: dark($c);
        }
      }
    }
  }

  min-height: 8em;

  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}

.box {
  font-size: 2vmin;

  width: 4em;
  height: 4em;

  position: relative;

  margin-top: 2em;
  margin-right: 2em;

  $anim-time: 1s;
  animation: float $anim-time ease-in-out infinite alternate;

  @for $i from 1 through length($colors) + 1 {
    $total: length($colors);
    
    // This nasty little block of code offsets
    // the animation for every nth item.
    // If you delete it, all the cubes move
    // in unison, which is way less fun to look at.
    &:nth-of-type(#{$total}n + #{$i}) {
      animation-delay: #{$anim-time / $total * $i * 2};
    }
  }

  &:before {
    // Draws the top of a cube.
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 50%;

    transform: translate(25%, -100%) skew(-45deg);
  }

  &:after {
    // Draws the side of a cube.
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;

    width: 50%;
    height: 100%;
    left: 100%;

    transform: translate(0, -25%) skew(0, -45deg);
  }
}

body {
  background: #eee;
  padding: 0;
  margin: 0;
}

@keyframes float {
  // Down...
  from {
    transform: translate(0, 0em);
  }
  
  // ...and up
  to {
    transform: translate(0, -0.75em);
  }
}