$RoseQuartz:  #f7cac9;
$PeachEcho:   #f7786b;
$Serenity:    #91A8d0;
$SnorkelBlue: #034f84;
$Buttercup:   #fae03c;
$LimpetShell: #98ddde;
$LilacGray:   #9896a4;
$Fiesta:      #dd4132;
$IcedCoffee:  #b18f6a;
$GreenFlash:  #79c753;


$pink-light:  $RoseQuartz;
$salmon:      $PeachEcho;
$blue-light:  $Serenity;
$blue-dark :  $SnorkelBlue;
$yellow:      $Buttercup;
$cyan-light:  $LimpetShell;
$gray:        $LilacGray;
$red:         $Fiesta;
$tan:         $IcedCoffee;
$green:       $GreenFlash;

$dark-text-default: #000 !default;
$light-text-default: #fff !default;

// For loop inumerator
$num: 0;

// https://codepen.io/Niklan/pen/ZpAdNx
// Compares contrast of a given color to the light/dark arguments and returns whichever is most "contrasty"
@function text-contrast($color, $dark: $dark-text-default, $light: $light-text-default) {
  @if $color == null {
    @return null;
  }
  @else {
    $yiq: (red($color) * 299 + green($color) * 587 + blue($color) * 114) / 1000;
    @return if($yiq >= 128, $dark, $light);
  }
}

// function worked with Compass ...
// https://codepen.io/MadeByMike/pen/sDpxg/
// Adapted from: https://gist.github.com/voxpelli/6304812
// @function luma($color){
//   $rgba: red($color), green($color), blue($color);
//   $rgba2: ();
//   @for $i from 1 through 3 {
//     $rgb: nth($rgba, $i);
//     $rgb: $rgb / 255;
//     $rgb: if($rgb < .03928, $rgb / 12.92, pow(($rgb + .055) / 1.055, 2.4));
//     $rgba2: append($rgba2, $rgb);
//   }
//   @return (.2126 * nth($rgba2, 1) + .7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3))*100;
// }
// @function contrast_ratio($color1, $color2) {
//   $luma1: luma($color1) + 5;
//   $luma2: luma($color2) + 5;
//   $ratio: $luma1 / $luma2;
//   @if $luma1 < $luma2 {
//     $ratio: 1 / $ratio;
//   }
//   @return $ratio;
// }
// 
// @function text-contrast($color, $bgcolor: $color) {
//   $threshold: 4.5; // 4.5 = WCAG AA,7= WCAG AAA
//   $list: 20 30 40 50 60 70 80 90 100;
//   @each $percent in $list {
//     $lighter: lighten($bgcolor, $percent);
//     $darker: darken($bgcolor, $percent);
//     $darker-ratio: contrast_ratio($color, $darker);
//     $lighter-ratio: contrast_ratio($color, $lighter);
//     @if($lighter-ratio > $darker-ratio){
//       @if ($lighter-ratio > $threshold){
//         @return $lighter;
//       }
//     }
//     @if($darker-ratio > $lighter-ratio){
//       @if ($darker-ratio > $threshold){
//         @return $darker;
//       }
//     }
//   }
//   @return if(lightness($color) < 51, #FFF, #000)
// }

* {
  // outline: 1px dotted salmon;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  box-sizing: border-box;
}
html {
  background: $gray;
  animation-name: bg-color;
  animation-duration: 90s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
body {
  font: 100%/1.5 AvenirNextCondensed-Regular, Calibri, Corbel, "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Tahoma, Verdana, sans-serif;
  margin: 0 auto;
  padding: 1em;
  padding-bottom: 3em;
  max-width: 35em;
  color: #111;
}
h1,
header p {
  letter-spacing: -1px;
  word-spacing: 1px;
  line-height: 1;
  font-size: 2.2em;
  padding: 0 16px;
  animation-name: color;
  animation-duration: 90s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
h1 {
  color: $red;
  text-transform: capitalize;

}
header {
  padding-bottom: 3em;
}
header p {
  color: $red;
  font-size: 1.75em;
  text-align: right;
  // transform: translateY(-1.03em);
  transform: translateY(-100%);
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  font-family: Consolas, Menlo, Monaco, monospace;
  background: $gray;
}

col:nth-of-type(1) {
  background: rgba(0,0,0,.125);
  width: 62.5%;
}
col:nth-of-type(2) {
  width: 20%;
}
col:nth-of-type(3) {
  width: 17.5%;
}
thead {
  display: table-header-group;
}
header,
thead th {
 font-family: AvenirNextCondensed-DemiBold, Calibri, Corbel, "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Tahoma, Verdana, sans-serif;
  font-weight: 700;
}
.wf-active header,
.wf-active thead th {
  font-family: Cuprum, AvenirNextCondensed-DemiBold, Calibri, Corbel, "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Tahoma, Verdana, sans-serif;
}

thead th {
  text-align: right;
  font-size: 1.125em;
  text-transform: uppercase;
}

thead th:nth-of-type(1) {
  text-align: left;
}

th[scope="col"] {
  border-bottom: 3px solid $gray;
}
th[scope="row"] {
  text-align: left;
}
th, td {
  padding: .5em 1em;
}
td:nth-of-type(1) {
  text-align: right;
}
td:nth-of-type(2) {
  text-align: right;
}
tr:nth-of-type(1) {
  background: $pink-light;
  color: text-contrast($pink-light);
}
tr:nth-of-type(2) {
  background: $salmon;
  color: text-contrast($salmon);
}
tr:nth-of-type(3) {
  background: $blue-light;
  color: text-contrast($blue-light);
}
tr:nth-of-type(4) {
  background: $blue-dark;
  color: text-contrast($blue-dark);
}
tr:nth-of-type(5) {
  background: $yellow;
  color: text-contrast($yellow);
}
tr:nth-of-type(6) {
  background: $cyan-light;
  color: text-contrast($cyan-light);
}
tr:nth-of-type(7) {
  background: $gray;
  color: text-contrast($gray);
}
tr:nth-of-type(8) {
  background: $red;
  color: text-contrast($red);
}
tr:nth-of-type(9) {
  background: $tan;
  color: text-contrast($tan);
}
tr:nth-of-type(10) {
  background: $green;
  color: text-contrast($green);
}
tr:nth-of-type(11) {
  background: $blue-dark;
  color: text-contrast($blue-dark);
}
tr:nth-of-type(12) {
  background: $green;
  color: text-contrast($green);
}
tr:nth-of-type(13) {
  background: $tan;
  color: text-contrast($tan);
}
tr:nth-of-type(14) {
  background: $yellow;
  color: text-contrast($yellow);
}
 tr:nth-of-type(15) {
  background: $cyan-light;
  color: text-contrast($cyan-light);
}
 tr:nth-of-type(16) {
  background: $red;
  color: text-contrast($red);
}

ul {
  list-style: none;
}
a {
  color: $blue-dark;
  display: inline-block;
  padding: .25em 0;
  text-decoration: none;
}
a:hover {
  color: $cyan-light;
}
footer,
footer ul {
  overflow: auto;
}
footer {
  margin: 0 auto;
  border-top: 3px solid shade($gray,15%);
  padding: 2em 1em 1em;
  background: $gray;
}

thead th,
thead tr:first-of-type,
tfoot tr:first-of-type {
  background: adjust-color($gray, $lightness: -40%);
}

thead th,
thead tr:first-of-type a,
tfoot tr:first-of-type a {
  color: text-contrast(adjust-color($gray, $lightness: -40%));
}

footer li {
  font-size: .875em;
  text-align: center;
}
footer a {
  float: left;
  width: 100%;
}
@keyframes bg-color {
  0% {
    background: #fff;
  }
  6% {
    background: #fff;
  }
  6.6% {
    background: $pink-light;
  }
  12.6% {
    background: $pink-light;
  }
  13.2% {
    background: $salmon;
  }
  19.2% {
    background: $salmon;
  }
  19.8% {
    background: $blue-light;
  }
  25.8% {
    background: $blue-light;
  }
  26.4% {
    background: $blue-dark;
  }
  32.4% {
    background: $blue-dark;
  }
  33% {
    background: $yellow;
  }
  39% {
    background: $yellow;
  }
  39.6% {
    background: $cyan-light;
  }
  45.6% {
    background: $cyan-light;
  }
  46.2% {
    background: $gray;
  }
  52.2% {
    background: $gray;
  }
  52.8% {
    background: $red;
  }
  58.8% {
    background: $red;
  }
  59.4% {
    background: $tan;
  }
  65.4% {
    background: $tan;
  }
  66% {
    background: $green;
  }
  72% {
    background: $green;
  }
  72.6% {
    background: $yellow;
  }
  78.6% {
    background: $yellow;
  }
  79.2% {
    background: $cyan-light;
  }
  85.2% {
    background: $cyan-light;
  }
  85.8% {
    background: $red;
  }
  91.8% {
    background: $red;
  }
  92.4% {
    background: $pink-light;
  }
}

@keyframes color {
  0% {
    color: $green;
  }
  6% {
    color: $green;
  }
  6.6% {
    color: $tan;
  }
  12.6% {
    color: $tan;
  }
  13.2% {
    color: adjust-color($red, $lightness: -10%);
  }
  19.2% {
    color: adjust-color($red, $lightness: -10%);
  }
  19.8% {
    color: $blue-dark;
  }
  25.8% {
    color: $blue-dark;
  }
  26.4% {
    color: $cyan-light;
  }
  32.4% {
    color: $cyan-light;
  }
  33% {
    color: $green;
  }
  39% {
    color: $green;
  }
  39.6% {
    color: $blue-dark;
  }
  45.6% {
    color: $blue-dark;
  }
  46.2% {
    color: white;
  }
  52.2% {
    color: white;
  }
  52.8% {
    color: adjust-color($pink-light, $lightness: 5%);
  }
  58.8% {
    color: adjust-color($pink-light, $lightness: 5%);
  }
  59.4% {
    color: $cyan-light;
  }
  65.4% {
    color: $cyan-light;
  }
  66% {
    color: $yellow;
  }
  72% {
    color: $yellow;
  }
  72.6% {
    color: $red;
  }
  78.6% {
    color: $red;
  }
  79.2% {
    color: $gray;
  }
  85.2% {
    color: $gray;
  }
  85.8% {
    color: $cyan-light;
  }
  91.8% {
    color: $cyan-light;
  }
  92.4% {
    color: $red;
  }
}