html,
body {
  height: 100%;
}
@keyframes bg-fadein {
  0% {
    background-color: #9955c4;
  }
  30% {
    background-color: #3AE;
  }
  100% {
    background-color: #000;
  }
}
body {
  color: #FFF;
  background-color: #000;
  background-image: url(/images/W.svg);
  background-repeat: no-repeat;
  background-position: bottom 20px right 20px;
  background-size: auto 60%;
  margin: 0;
  animation-name: bg-fadein;
  animation-duration: 10s;
}
@keyframes lavalamp-intro {
  0% {
    transform: translate(-100px, 1000px);
  }
  100% {
    transform: translate(0);
  }
}
@keyframes lavalamp-wobble {
  0% {
    transform: translate(0);
  }
  25% {
    transform: translate(20px);
  }
  75% {
    transform: translate(-20px);
  }
  100% {
    transform: translate(0);
  }
}
@keyframes disco-wobble {
  0% {
    transform: translate(0);
  }
  25% {
    transform: translate(100px);
  }
  75% {
    transform: translate(-100px);
  }
  100% {
    transform: translate(0);
  }
}
.lefty {
  float: left;
  width: 70px;
  height: 100%;
  background-color: #777;
}
.lefty circle {
  animation: 2s ease-out lavalamp-intro, 7s lavalamp-wobble 2s infinite;
}
.disco {
  width: 100%;
  height: 100%;
  background-color: #777;
  animation: disco-bg;
}
.disco circle {
  animation: 2s ease-out lavalamp-intro, 7s lavalamp-wobble 2s infinite;
}
.disco text {
  text-anchor: middle;
  font-size: 300px;
  font-family: monospace;
  fill: rgba(0, 0, 0, 0.1);
  text-shadow: 2px 4px 3px #F09, -2px -4px 3px #3AE;
}
.wrapper {
  padding: 100px 20px 20px 70px;
  margin-left: 70px;
}
.wrapper h1 {
  font-size: 50px;
  font-family: serif;
  margin-top: 0;
  text-shadow: 1px 2px 1px #F09, -1px -2px 1px #3AE;
}
.wrapper p {
  font-family: sans;
}
.wrapper abbr {
  border-bottom: 1px dotted #777;
}