body {
  font-family: "helvetica neue";
  font-size: larger;
  color: #333;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#intro {
  max-width: 50em;
  margin: 2em;
}

#demo {
  display: flex;
  flex-direction: row;  
}

#form {
  max-width: 20em;
  margin-right: 1em;
}

#form ul {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  list-style-type: none;
}

#form li {
  margin-bottom: 1em;
}

.fieldset-title {
  font-size: larger;
  margin-bottom: 1em;
}

.number-field {
  border: 1px dashed #444;
  padding: 0.2em;
}

#board {
  width: 600px;
  height: 600px;
  border: 1px solid #666;
}

.view {
  fill: hsla(150, 0%, 50%, 0.25);
}

#untransformed .content {
  fill: hsla(120, 100%, 50%, 0.5);
}

#transformed .content {
  fill: hsla(30, 100%, 50%, 0.5);
}

.view-title {
  color: hsla(150, 0%, 50%, 1.0);
}

.content-title {
  color: hsla(30, 100%, 50%, 1.0);
}