
body > * {
  max-width: 1000px;
  margin: 0 auto;
}

header ul {
  font-size: .8em;
  list-style-type: none;
  margin: 0;
  padding: 0;
  li {
    display: inline-block;
    & + li { margin-left: .5em; }
  }
}
header { margin-bottom: 1em; }

textarea {
  font-family: monospace;
}

#home svg {
  max-width: 50%;
  display: block;
  float: right;
}

#parse {
  svg,
  .text {
    max-width: 49%;
    display: inline-block;
    vertical-align: top;
  }
  
  .guides {
    stroke: #ddd;
    &.point {
      fill: #fff;
      stroke: #888;
    }
  }

  .result {
    &.line {
      stroke-dasharray: 5,5;
    }
    stroke: #050;
  }
}

#background-example {
  .geometry-scene {
    /* imitate a background image */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    max-height: 100vh;
    max-width: 100vw;
    z-index: 100;
    
    /* color */
    stroke: rgba(128, 160, 160, .5);
    .point { fill: white; stroke: inherit; }
    .free-point { fill: rgb(128, 160, 160);}
    .hex { stroke: rgba(160, 100, 50, .5); }
  }
  .content {
    position: relative;
    z-index: 200;
  }
  
}
