body {
  /* remove any browser margin around the p5js sketch */
  padding: 0px;
  margin: 0px;

  background-color: #171613;

  /* default text settings */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10px;
  line-height: 1.4;
  color: hsla(40, 8%, 100%, 0.3);
}

canvas {
  /* avoid slight vertical scroll if the canvas is full screen */
  vertical-align: top;
}

b {
  color: hsla(40, 8%, 100%, 0.5);
  /* Type weight 100-900 in 100 increments; Medium is 500: http://www.webtype.com/info/articles/fonts-weights/ */
  font-weight: 500;
  letter-spacing: 0.5px;
}

#centerContainer {
  /* Center horizontally and vertically */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;

  /* This to solve "the content will not be cut when the window is smaller than the content" */
  max-width: 100%;
  max-height: 100%;
  overflow: auto;

  /* This surpresses unneeded scrollbars that show up when adding siblings to the canvas in the div */
  overflow: hidden;
}

#showPerSpeakersDiv, #showInFeetDiv {
  text-align: right;
}

.storytitle {
  font-size: 14px;
  font-weight: 300;
  border-bottom: 1px solid;
  line-height: 1.8;
}

.label {
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.7px;
}

.number {
  float: right;
  font-size: 14px;
  font-weight: 100;
  margin-top: -1px;

  /* Oldstyle figures https://helpx.adobe.com/typekit/using/open-type-syntax.html#onum */
  /* Not available for Helvetica */
  /*font-variant-numeric: oldstyle-nums;
  -moz-font-feature-settings: "onum";
  -webkit-font-feature-settings: "onum";
  font-feature-settings: "onum";*/

  /* Tabular figures https://helpx.adobe.com/typekit/using/open-type-syntax.html#tnum */
  /* default for Helvetica */
  /*font-variant-numeric: tabular-nums;
  -moz-font-feature-settings: "tnum";
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";*/
}

/* Safari 9.0+ */
_::-webkit-:not(:root:root), .safari_only_number {
  /* Adjust for the font-weight appearing much lighter in Safari */
  font-weight: 200;
}

.originstory {
  line-height: 2.2;
  margin-top: -3px;
}

.altitude {
  font-size: 9px;
}

.tag {
  background-color: #080707;
  border-radius: 3px;
  padding: 4px 4px 4px 4px;
  margin: 0px 1px 0px 1px;

  color: hsla(40, 8%, 100%, 0.5);
  font-weight: 500;
  letter-spacing: 0.25px;
}

.cursorpopup {
  background-color: hsla(0, 0%, 0%, 0.8);
  border-radius: 3px;
  line-height: 1.3;
  padding: 4px 7px 4px 7px;

  /* CW orientation */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);

  /* top left, in % */
  -webkit-transform-origin: 0 50%;
  -moz-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  -o-transform-origin: 0 50%;
  transform-origin: 0 50%;
}

.clickable {
  cursor: pointer;
}

.underlined {
  border-bottom: 1px dashed;
}

.hoverable {
  cursor: pointer;
}

.rotated {
  /* CW orientation */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);

  /* top left, in % */
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
}

.noselect {
  /* http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting */
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently not supported by any browser */
}