<!-- nothing -->

$bgcolor: #FFE9A3;
$transparent: rgba(255, 255, 255, 0);

$color-1: #E83A25;
$color-1-t: transparentize($color-1, 1);
$color-2: #98CC96;
$color-2-t: transparentize($color-2, 1);

$size: 4em;
$big-size: $size*2;
$min: $size*.3;
$max: $size*.7;

HTML {
  height: 100%;
  }
BODY {
  background: 
    linear-gradient(135deg,
      $color-1 $min,
      $color-1-t $min
      ) 0 #{$size},
    linear-gradient(-135deg,
      $color-1 $min,
      $color-1-t $min
      ) 0 #{$size},
    
    radial-gradient(circle at #{$big-size - $min*.7} $size*1.85,
      $color-1 $min*.85,
      $color-1-t $min*.87
      ) 0 -#{$size},
    radial-gradient(circle at #{$min*.7} $size*1.85,
      $color-1 $min*.85,
      $color-1-t $min*.87
      ) 0 -#{$size},


    linear-gradient(135deg,
      $color-2 $min,
      $color-2-t $min
      ) $size 0,
    linear-gradient(-135deg,
      $color-2 $min,
      $color-2-t $min
      ) $size 0,
    
    radial-gradient(circle at #{$big-size - $min*.7} $size*1.85,
      $color-2 $min*.85,
      $color-2-t $min*.87
      ) $size 0,
    radial-gradient(circle at #{$min*.7} $size*1.85,
      $color-2 $min*.85,
      $color-2-t $min*.87
      ) $size 0
    ;
  background-size:  $big-size $big-size;
  background-color: $bgcolor;
  background-repeat: repeat;
  font: 16px/2 'Trebuchet MS', Verdana, sans-serif;
  }