styles.css

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  background: #121212;
}

.app, .editor {
  height: 93%;
  -moz-user-select: none;
  user-select: none;
  color: white;
}


path {
  stroke: purple;
  fill: none;
}

.state {
  position: fixed;
  opacity: 0.4;
  top: 1.5em;
  white-space: pre;
  font-size: 0.8em;
}

.record {
  border: none;
  width: 45px;
  height: 45px;

  margin: 2px;

  padding: 2px;
  color: #EEE;

  background: #C84141;

  border-radius: 45px;
}

.play {
  width: 0;
  height: 0;
  background-color: #333;
  border-style: solid;
  border-width: 17px 0 17px 35px;
  border-color: transparent transparent transparent #6EDC5F;

  margin: 5px;

  border: 5px 2px solid green;
}

.controls {
  display: flex;

  height: 21%;

  background: #333;

  justify-content: flex-end;
}

.buttons {
  display: flex;

  flex-direction: column;
}

.main {
  display: flex;
  height: 100%;
}

.animations {
  background: #CCC;
  color: black;
  width: 10%;
}

.animation {
  margin: 5px;

  border: 1px solid lightgray;
  border-radius: 2px;

  padding: 5px 3px;

  background: #bbb
}

.animation.selected {
  background: #888;
}