* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

#container {
  width: 100%;
  height: 500px;
  background: #fff;
  margin: 0 auto;
  text-align: center;
}

#code {
  display: block;
  width: auto;
  font: bold 3vw monospace;
  padding: 50px 0 4vw 10vw;
  margin: 0;
  color: #1E1935;
  background: rgba(221, 221, 221, 0.35);
}
#code::-moz-selection {
  background: #EF2D56;
  color: #fff;
}
#code::selection {
  background: #EF2D56;
  color: #fff;
}

path {
  stroke-width: 8;
  stroke: #1E1935;
  stroke-linecap: round;
  fill: none;
}

path.fill {
  fill: #1E1935;
}

circle {
  stroke-width: 2;
  stroke: #EF2D56;
  fill: #fff;
}

circle:hover {
  fill: #EF2D56;
  cursor: move;
}

line {
  stroke-width: 1;
  stroke: #999;
  stroke-linecap: round;
  stroke-dasharray: 5, 3;
}

.credit {
  position: absolute;
  top: 5px;
  right: 15px;
  font: 11px Helvetica, Arial, sans-serif;
  color: #999;
}

a {
  color: inherit;
}