/**
 * CSS for Hue Hunt
 * Logo
 * Alexandre Andrieux @2015 (September)
 */

/** Logo **/
#huehunt {
  margin: 10px auto;
}
#logo {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  border-radius: 25px;
  border: solid 5px #000;
  overflow: hidden;
  position: relative; /* For kids */
}
#logo .square {
  position: absolute;
  width: 50px;
  height: 50px;
}
#logo .square:nth-of-type(1) {
  top: 0px;
  left: 0px;
  background: hsl(230, 100%, 60%);
}
#logo .square:nth-of-type(2) {
  top: 50px;
  left: 0px;
  background: hsl(200, 80%, 50%);
}
#logo .square:nth-of-type(3) {
  top: 0px;
  left: 50px;
  background: hsl(200, 80%, 50%);
}
#logo .square:nth-of-type(4) {
  top: 50px;
  left: 50px;
  background: hsl(230, 100%, 60%);
}
#huehunt h1 {
  font-size: 4em;
}
#huehunt h1 span {
  text-shadow: 0px 0px 50px;
}
#huehunt h1 span:nth-of-type(1) {
  color: hsl(0, 60%, 50%);
}
#huehunt h1 span:nth-of-type(2) {
  color: hsl(60, 60%, 50%);
}
#huehunt h1 span:nth-of-type(3) {
  color: hsl(120, 60%, 50%);
}
#huehunt h1 span:nth-of-type(4) {
  color: hsl(180, 60%, 50%);
}
#huehunt h1 span:nth-of-type(5) {
  color: hsl(240, 60%, 50%);
}
#huehunt h1 span:nth-of-type(6) {
  color: hsl(300, 60%, 50%);
}
#huehunt h1 span:nth-of-type(7) {
  color: hsl(360, 60%, 50%);
}