@import url("https://fonts.googleapis.com/css?family=Iceland");

html, body, figure, figcaption, ul, li {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  text-align: inherit;
}

h1 {
  margin-top: 0px;
  margin-bottom: 10px;
}

div {
  color: white;
  font-size: 30px;
  position: absolute;
  top: 100px;
  left: 150px;
  z-index: 100;
}

span {
  overflow: visible;
  z-index: 200;
}

ul {
  width: 2000;
  height: 2000px;
  background: transparent;
  margin-left: -500px;
  margin-top: -500px;
}

li {
  float: left;
  width: 40px;
  height: 40px;
  margin: 0px auto;
  background: transparent;
  position: relative;
  outline: 1px solid grey;
}

li.line {
  background: black;
}

li.obstacle {
  background: black;
}

li.dasher {
  background: white;
}

li.wall {
  background: black;
  outline: none;
}

.counter {
  color: white;
  position: absolute;
  top: 9px;
  font-size: 20px;
  overflow: visible;
}

.linedash {
  font-family: "Iceland";
  height: 1000px;
  width: 1000px;
  background: black;
  animation: fading 10s infinite;
  -webkit-animation: fading 10s infinite;
  overflow: hidden
}

@keyframes fading {
  0%   { background: dodgerblue; }
  20%  { background: darkmagenta; }
  40%  { background: deeppink; }
  60%  { background: crimson; }
  80%  { background: mediumvioletred; }
  100% { background: dodgerblue; }
}

@-webkit-keyframes fading {
  0%   { background: dodgerblue; }
  20%  { background: darkmagenta; }
  40%  { background: deeppink; }
  60%  { background: crimson; }
  80%  { background: mediumvioletred; }
  100% { background: dodgerblue; }
}

@keyframes opacityfading {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  40%  { opacity: 0; }
  60%  { opacity: 1; }
  80%  { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes opacityfading {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  40%  { opacity: 0; }
  60%  { opacity: 1; }
  80%  { opacity: 0; }
  100% { opacity: 1; }
}

ul.rotate {
  -moz-animation: 15s rotateRight infinite linear;
  -webkit-animation: 15s rotateRight infinite linear;
}

@-moz-keyframes rotateRight {
  0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); }
}

@-webkit-keyframes rotateRight {
  0% { -webkit-transform: rotate(0deg); }
  10% { -webkit-transform: rotate(-30deg); }
  20% { -webkit-transform: rotate(30deg); }
  30% { -webkit-transform: rotate(-30deg); }
  40% { -webkit-transform: rotate(-120deg); }
  50% { -webkit-transform: rotate(-30deg); }
  60% { -webkit-transform: rotate(50deg); }
  70% { -webkit-transform: rotate(120deg); }
  80% { -webkit-transform: rotate(200deg); }
  90% { -webkit-transform: rotate(280deg); }
  100% { -webkit-transform: rotate(360deg); }
}

ul.pause {
  -webkit-animation-play-state:paused;
  animation-play-state:paused;
}