@font-face {
    font-family: 'mononoki';
    src: url('fonts/mononoki-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/mononoki-Regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/mononoki-Regular.woff') format('woff'), /* Pretty Modern Browsers */
         url('fonts/mononoki-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mononoki';
    src: url('fonts/mononoki-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/mononoki-Bold.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/mononoki-Bold.woff') format('woff'), /* Pretty Modern Browsers */
         url('fonts/mononoki-Bold.ttf')  format('truetype'); /* Safari, Android, iOS */
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'mononoki';
    src: url('fonts/mononoki-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/mononoki-Italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/mononoki-Italic.woff') format('woff'), /* Pretty Modern Browsers */
         url('fonts/mononoki-Italic.ttf')  format('truetype'); /* Safari, Android, iOS */
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'mononoki';
    src: url('fonts/mononoki-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/mononoki-BoldItalic.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/mononoki-BoldItalic.woff') format('woff'), /* Pretty Modern Browsers */
         url('fonts/mononoki-BoldItalic.ttf')  format('truetype'); /* Safari, Android, iOS */
    font-weight: bold;
    font-style: italic;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin: 0 auto; line-height: 2em; box-sizing: border-box; color: #333; overflow: auto; background-color: #fffcf3; padding: 0; }

body, html {height: 100%;}

.wrapper {box-sizing: border-box; height: 100%; }


a {text-decoration: none; color: #333; border-bottom: 3px solid #5896c1;}
a:hover {color: #5896c1}
p {font-size: 19px;}

h1, h2 {
  font-family: mononoki;
  font-weight: bold;
}

h1 {
  text-transform: uppercase;
  font-size: 45px;
  border: 4px solid #5896c1;
  color: #5896c1;
  margin-bottom: 60px;
  padding: 24px;
  line-height: 1.4;
}

footer {
  display: table;
  border-collapse: collapse;
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.4;
  justify-content: space-around;
  margin: 200px 0 20px;
  width: 100%;
}

footer div {
  padding: 24px;
  border: 3px solid #5896c1;
  display: table-cell;
}

.jsorg {
  border-bottom: none;
  margin-right: 12px;
}

.container {margin: 0 auto; max-width: 1100px; padding: 120px 12px 50px;}
hr {border-bottom: 3px solid #5896c1;}

p code {
  background-color: rgba(0, 0, 0, 0.05);
  box-shadow: 0 0px 0 5px rgba(0, 0, 0, 0.05);
}

.demo-group label {
  display: block;
  cursor: pointer;
  font-size: 20px;
  margin: 10px;
}

/*
.demo-group input[type="radio"]:checked ~ * {
  border-bottom: 3px solid #5896c1;
}

.demo-group input[type="radio"] {
  display: none;
}
*/

.hljs {
  font-family: mononoki;
}

/* diagram stuff */

.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}

.fill {
  fill: #fff;
}

.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
}

.land {
  fill: #222;
}

.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}

.night {
  stroke: steelblue;
  fill: steelblue;
  fill-opacity: .3;
}

.bar {
  fill: steelblue;
}
.button {
  fill: red;
}

.hexagon {
  fill: none;
  stroke: #000;
  stroke-width: .5px;
}

/*
hljs solarized

Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>

*/

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  border-left: 3px solid #5896c1;
  padding-left 1em !important;
  color: #657b83;
}

.hljs-comment,
.hljs-quote {
  color: #93a1a1;
}

/* Solarized Green */
.hljs-keyword,
.hljs-selector-tag,
.hljs-addition {
  color: #859900;
}

/* Solarized Cyan */
.hljs-number,
.hljs-string,
.hljs-meta .hljs-meta-string,
.hljs-literal,
.hljs-doctag,
.hljs-regexp {
  color: #2aa198;
}

/* Solarized Blue */
.hljs-title,
.hljs-section,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
  color: #268bd2;
}

/* Solarized Yellow */
.hljs-attribute,
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-class .hljs-title,
.hljs-type {
  color: #b58900;
}

/* Solarized Orange */
.hljs-symbol,
.hljs-bullet,
.hljs-subst,
.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-link {
  color: #cb4b16;
}

/* Solarized Red */
.hljs-built_in,
.hljs-deletion {
  color: #dc322f;
}

.hljs-formula {
  background: #eee8d5;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

@media only screen and (min-device-width : 501px) {
  pre {
    font-size: 22px;
  }
}

@media only screen and (min-device-width : 401px) and (max-device-width : 500px) {
  pre {
    font-size: 26px;
  }

  .demo-group label {
    font-size: 34px;
    margin: 40px 10px;
  }

  body {
    line-height: 2.2em;
  }
}

@media only screen and (max-device-width : 400px) {
  pre {
    font-size: 30px;
  }

  .demo-group label {
    font-size: 34px;
    margin: 40px 10px;
  }

  body {
    line-height: 2.4em;
  }
}