h1 {
  font-size:1em;
  text-transform:uppercase;
  text-align:center;
  color:#666;
}

section.main {
  background-color:#eee;
}

.box {
  box-sizing:border-box;
  width:50px; height:50px;
  display:inline-block;
  
  margin:-2px 0;
  margin-right:-4px;
  
  background-color:#fff;
  transition:0.5s all ease-in-out;
  
  filter:hue-rotate(0deg);
  animation:hueRotate 0s linear infinite;
}

/* Box Shadow - simply add a class to the parent container. */
section.main.shadow .box {
  box-shadow: inset 1px 4px 6px rgba(0, 0, 0, 0.4);
}


.button {
  background-color:rgba(255, 47, 105, 0.82);
  color:#fff;
  border:none;
  padding:2px 8px;
  display:inline-block;
  border-radius:5px;
  
  z-index:1;
}

#random {
  position:fixed;
  left:20px;
  top:8px;
}

#shadow {
  position:fixed;
  top:8px;
  right:10px;
}

/* Footer style */
footer.attr {
  font-family:"Consolas", monospace;
  color:#444;
  
  padding:20px;
  text-align:center;
}

footer.attr a {
  color:rgba(255, 47, 105, 0.82);
}


/*
@keyframes hueRotate{
  from {
    filter:hue-rotate(0deg);
  }
  
  to {
    filter:hue-rotate(180deg);
  }
}
*/