scene {
  display: none;
}

@font-face {
  font-family: 'xkcd';
  src: url('../../fonts/xkcd-script.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.cmx-scene {
  float: left;

  font-family: "xkcd", sans-serif;
  font-size: 14px;
  background-color: white;
  margin: 0px;
  position: relative;

  -moz-transition: all 0.6s ease-out;
  -o-transition: all 0.6s ease-out;
  -webkit-transition: all 0.6s ease-out;
  -ms-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
}

.cmx-scene svg {
  display: block;
}

.cmx-path {
  fill: none;
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cmx-back {
  stroke: white;
}

.cmx-back .cmx-text {
  shape-rendering: optimizeSpeed;
  text-rendering: optimizeSpeed;
  fill: none;
  stroke-opacity: 1;
  stroke-width: 8px;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.cmx-back .cmx-path {
  stroke-width: 6px;
}

.cmx-front {
  stroke: black;
}

.cmx-front .cmx-path {
  stroke-width: 3px;
}

.cmx-front .cmx-text {
  stroke: none;
}

.cmx-text-border .cmx-path {
  stroke: black;
  fill: white;
  stroke-width: 2px;
}