:root{
  /*  Configure your own bg  */
  --saturation: 80%;
  --lightness: 80%;
  --duration: 10s;
}

#stlt{
  position: fixed;
  bottom: 20px;
  left: 40px;
  font-size: 4em;
}

/*  The animation is created by taking advantage of the hsl color spectrum where the hue is a circle. One step is 36 degree so it's just a 10 step animation and the rest of the colors are out generated */
@-webkit-keyframes color {
  0%{
    background-color: hsl(0, var(--saturation), var(--lightness));
  }
  10%{
    background-color: hsl(36, var(--saturation), var(--lightness));
  }
  20%{
    background-color: hsl(72, var(--saturation), var(--lightness));
  }
  30%{
    background-color: hsl(108, var(--saturation), var(--lightness));
  }
  40%{
    background-color: hsl(144, var(--saturation), var(--lightness));
  }
  50%{
    background-color: hsl(180, var(--saturation), var(--lightness));
  }
  60%{
    background-color: hsl(216, var(--saturation), var(--lightness));
  }
  70%{
    background-color: hsl(252, var(--saturation), var(--lightness));
  }
  80%{
    background: hsl(288, var(--saturation), var(--lightness));
  }
  90%{
    background: hsl(324, var(--saturation), var(--lightness));
  }

  100%{
    background-color: hsl(360, var(--saturation), var(--lightness));
  }
}
@keyframes color {
  0%{
    background-color: hsl(0, var(--saturation), var(--lightness));
  }
  10%{
    background-color: hsl(36, var(--saturation), var(--lightness));
  }
  20%{
    background-color: hsl(72, var(--saturation), var(--lightness));
  }
  30%{
    background-color: hsl(108, var(--saturation), var(--lightness));
  }
  40%{
    background-color: hsl(144, var(--saturation), var(--lightness));
  }
  50%{
    background-color: hsl(180, var(--saturation), var(--lightness));
  }
  60%{
    background-color: hsl(216, var(--saturation), var(--lightness));
  }
  70%{
    background-color: hsl(252, var(--saturation), var(--lightness));
  }
  80%{
    background: hsl(288, var(--saturation), var(--lightness));
  }
  90%{
    background: hsl(324, var(--saturation), var(--lightness));
  }

  100%{
    background-color: hsl(360, var(--saturation), var(--lightness));
  }
}