html, body {
  background:#000;
  min-height:100%;
  height:100%;
  width:100%;
  position:relative;
  text-align:center;
  -webkit-transform-style:preserve-3d;
}
body {
  background:#000 url(images/event_horizon.png) no-repeat 50% 34%;
}
body.paused li {
  -webkit-transition-delay:1s;
}
#collider {
  background:rgba(255,255,255,1);
  position:relative;
  height:1px;
  width:1px;
  top:50%;
  left:50%;
  pointer-events:none;
  -webkit-perspective:1000;
}
#collider ul {
  position:absolute;
  height:1px;
  width:1px;
  margin:0;
  list-style:none;
  -webkit-perspective:900;
}
#collider ul li {
  height:1px;
  width:1px;
  position:absolute;
  top:0;
  left:0;
  -webkit-transform-style: preserve-3d;
  -webkit-transition:-webkit-transform 0.3s linear;
}
#collider ul li div {
  box-shadow:0 0 40px rgba(255,255,255,1);
  background-color:rgba(255,255,255,0.5);
  border-radius:50%;
  height:0;
  width:0;
  position:absolute;
  top:-50%;
  left:-50%;
  -webkit-transform-style:preserve-3d;
  -webkit-transition:background-color 0.3s linear, box-shadow 0.3s linear, height 0.3s linear, width 0.3s linear, top 0.3s linear, left 0.3s linear;
}
#collider ul li.particle div {
  box-shadow:0 0 40px rgba(84,23,144,1);
  background-color:rgba(84,23,144,0.5);
  height:100%;
  width:100%;
  top:-50%;
  left:-50%;
}
#collider.paused ul li.proton.left {
  -webkit-transform:translate3d(-1000px, 0, 0);
}
#collider.paused  ul li.proton.right {
  -webkit-transform:translate3d(1000px, 0, 0);
}
#collider ul li.proton {
  -webkit-transform:translate3d(0, 0, 0);
  height:60px;
  width:60px;
}
#collider ul li.proton div {
  height:100%;
  width:100%;
  box-shadow:0 0 60px rgba(255,87,0,1);
  background-color:rgba(255,255,255,0.9);
  top:-50%;
  left:-50%;
}
#collider ul li.proton.left div {
  box-shadow:0 0 60px rgba(0,87,255,1);
}
#collider ul li.p3 div {
  box-shadow:0 0 10px rgba(46,105,19,1);
  background-color:rgba(46,105,19,0.75);
}