:root {
  --dot-radius:  30px;
  --path-radius: 150px;
  --vp-width:    700px;
  --vp-height:   700px;

  --static-dot-color: hsl(204, 100%, 65%);
  --moving-dot-color: hsl(178, 94%, 65%);
}


/* --------------------------------------------------
   Elements
   -------------------------------------------------- */

html,
body,
main {
  height: 100vh;
  width: 100vw;
  margin: 0;
}

body {
  background-color: hsl(204, 100%, 9%);
  font-family: sans-serif;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

p {
  color: var(--static-dot-color);

  font-size: 0.7rem;
  letter-spacing: 0.1rem;
}

a {
  color: var(--moving-dot-color);
  text-decoration: none;
}

/* --------------------------------------------------
   Classes
   -------------------------------------------------- */

.dot {
  fill: var(--static-dot-color);
}

.dot--light {
  fill: var(--moving-dot-color);
  filter: url('#glow');
}

.dot--glowing {
  fill: var(--moving-dot-color);
  filter: url('#outer-glow');
}

.scanner {
  will-change: transform;
  animation: 3s scan 0s infinite linear both;
}

.circles {
  filter: url("#goo");
}

.centered {
  /* FF lets us use percentages, but Chrome doesn't like that. That
   * means we have to hard-code the dimensions of the viewport.
   */
  transform:
    translate(
      calc((var(--vp-width) * 0.5) - var(--dot-radius)),
      calc((var(--vp-height) * 0.5) - var(--dot-radius))
    );
}

.credits {
  margin-bottom: calc(1.5rem * 2);
  font-size: 20
}


/* --------------------------------------------------
   Animations
   -------------------------------------------------- */

 /* Defines the circular path our dots will take. We use 2 `rotate`
  * functions to contrain the plane containing our dots. Without
  * this, the dots will go out of orbit. See this brilliant post for
  * a much better explanation: 
  * http://www.useragentman.com/blog/2013/03/03/animating-circular-paths-using-css3-transitions/
  */
@keyframes scan {
  from {
    transform: rotate(0deg) translateY(calc(var(--path-radius) * -1)) rotate(0deg);
  }

  to {
    transform: rotate(360deg) translateY(calc(var(--path-radius) * -1)) rotate(-360deg);
  }
}