div.flex-block {
  flex-wrap: wrap;
}

div.catalan-parentheses,
div.catalan-hex {
  padding: 10px 20px;
  white-space: nowrap;
}

div.catalan-parentheses {
  background-color: hsl(0, 0%, 80%);
  font-size: 2em;
}

div.catalan-hex {
  background-color: hsl(0, 0%, 90%);

  figure {
    min-width: 150px;

    .notchText {
      text-anchor: middle;
    }
  }

  figurecaption {
    font-size: 1.2em;
  }
  svg text {
    font-size: 2.5em;
  }
}

div.catalan-hex svg .large {
  text {
    font-size: 1.2em;
  }
}

svg {
  circle {
    fill: none;
    stroke: black;
  }

  path,
  circle {
    fill: none;
    stroke: black;
    stroke-linecap: round;
    stroke-linejoin: round;

    &.notch {
      stroke-width: 2px;
    }

    &.thick {
      stroke-width: 8px;
    }

    &.medium {
      stroke-width: 4px;
    }

    &.dashed {
      stroke-dasharray: 4 4;
    }

    &.gray {
      stroke: hsl(0, 0%, 50%);
    }

    &.red {
      stroke: red;
    }

    &.fillBlack {
      fill: black;
    }

    &.polygon {
      /*fill: gray;*/
      stroke-width: 26px; /* double the circle radius */
      /*stroke: grey;*/
    }
  }
}

.notchText {
  text-anchor: middle;

  &.red {
    fill: red;
    /*font: bold 20px;*/
    font-weight: bold;
  }
}