@import url(css.css);
body {
  background-color: #111;
  color: #f0f0f0;
  font-family: Inconsolata, monospace;
}

.wrapper {
  margin: 40px auto 50px;
  width: 750px;
}

h1 {
  font-size: 24px;
  font-weight: normal;
  text-align: center;
  color: #bdbdbd;
}

p {
  font-size: 14px;
  text-align: center;
  color: #8a8a8a;
}

ul {
  margin: 45px auto 0;
  padding: 0;
}
ul::after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

li {
  position: relative;
  float: left;
  width: 250px;
  list-style: none;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  border-radius: 2px;
}
li::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
li:nth-child(1)::after {
  background-color: rgba(91, 83, 170, .25);
}
li:nth-child(2)::after {
  background-color: rgba(227, 48, 114, .05);
}
li:nth-child(3)::after {
  background-color: rgba(255, 0, 0, .15);
}
li:nth-child(4)::after {
  background-color: rgba(0, 0, 0, 0);
}
li:nth-child(5)::after {
  background-color: rgba(85, 118, 233, .25);
}
li:nth-child(6)::after {
  background-color: rgba(70, 177, 62, .05);
}
li:nth-child(7)::after {
  background-color: rgba(16, 154, 157, .15);
}
li:nth-child(8)::after {
  background-color: rgba(0, 0, 0, 0);
}
li:nth-child(9)::after {
  background-color: rgba(184, 78, 44, 0);
}

img {
  width: 100%;
  vertical-align: top;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
}