body {
  margin: 0;
  font-family: var(--article-font-family);
  font-size: 19px;
  line-height: 150%;
}

p + p {
  margin-top: 1.5em;
}
li > p {
  width: calc(100% - 2em);
}

kbd {
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
    color: #333;
    display: inline-block;
    font-size: .85em;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    white-space: nowrap;
 }

table {
    margin-top: 1em;
    margin-bottom: 1em;
}

.footnote {
  font-size: smaller;
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
.footnotes {
  font-size: smaller;
}

pre {
  background: rgb(143, 140, 140);
  padding: 1em;
}
pre>code {
  white-space: inherit;
  background: none;
}
pre.prettyprint {
    margin-top: 2em !important;
    margin-bottom: 2em !important;
}
pre.prettyprint li {
    white-space: pre;
}
pre.prettyprint code {
    color: #CCC;
    font-family: var(--code-block-font-family);
    display: block;
}

/* to handle long words in paragraph */
p code, h3 {
  word-break: break-word;
  white-space: normal;
}

.lesson-comment-notes {
  padding: 1em;
  margin: 1em;
  background: #DDD;
  color: red;
}

.webgl_navbar>div,
.lesson-title,
.lesson-comments,
.lesson-comment-sep,
.lesson-main>* {
    margin: 0 auto 1em;
    max-width: 700px;
    width: calc(100% - 40px);
}
.lesson-main>.webgl_example_container {
    max-width: 90%;
}
.lesson-main>img {
    width: revert-layer;
}

/* hope this is ok */
a>img {
    max-width: 100%;
}

.webgl_example {
    width: 100%;
    height: 500px;
}
.webgl_header {
    background-image: url(/webgl/lessons/resources/banner-00.jpg);
    background-size: cover;
    background-position: center, center;
    padding: 1em;
    text-align: center;
    position: relative;
}
.webgl_header h1 {
    font-size: 5vw;
    margin: 0;
    background-image: url(/webgl/lessons/resources/logo.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;

    font-weight: bold;
    color: black;
    /*
    text-shadow: 0px 0px 15px #fff,
                 0px 0px 5px #fff,
                 0px 0px 10px #fff;
    */
}
.webgl_header a {
    color: rgba(0, 0, 0, 0);
    text-decoration: none;
}
.webgl_navbar {
    background: black;
    color: white;
    color-scheme: dark;
}
.webgl_navbar a {
    color: white;
}
.webgl_navbar>div {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.webgl_navbar>div>* {
    display: block;
    margin: .25em 0;
}
.webgl_navbar select {
    background: #444;
    border: none;
    font-size: large;
    color: white;
}
.home-lang select {
    font-size: large;
}
.checkerboard {
  background-color: #404040;
  background-image:
     linear-gradient(45deg, #808080 25%, transparent 25%),
     linear-gradient(-45deg, #808080 25%, transparent 25%),
     linear-gradient(45deg, transparent 75%, #808080 75%),
     linear-gradient(-45deg, transparent 75%, #808080 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.x-axis { color: red; }
.y-axis { color: green; }
.z-axis { color: blue; }

.fullscreen {
    position: fixed !important;
    left: 0;
    top: 0;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 100;
}
.lesson-main>blockquote {
    background-color: #DEF;
    padding: 1em;
}
.lesson-title {
    margin-top: 3em;
    margin-bottom: 2em;
}
.lesson-sidebar {
    font-size: small;
    columns: 220px;
    padding: 1em;
    column-rule: dashed 1px #CCC;
    background: #eee;
    margin-bottom: 1em;
}
.lesson-sidebar>ul>li {
    line-height: 1.3em;
}
.lesson-sidebar ul {
    line-height: 1.3em;
    margin-bottom: 1em;
}
.lesson-sidebar ul {
    list-style-type: none;
    padding-left: 1em;
    text-indent: -1em;
}
h1, h2, h3, h4 {
  font-family: var(--headline-font-family);
  line-height: 1.2;
}
h3 {
  font-size: medium;
}
code {
    color: black;
    font-family: var(--code-font-family);
    background-color: #ddd;
    padding: 0.1em 0.2em 0.1em 0.2em;
    border-radius: 0.5em;
    white-space: nowrap;
}
pre>code,
.webgl_math {
    background: none;
}

.webgl_table_div_center {
  text-align: center;
}

.webgl_table_center {
  margin-left: auto;
  margin-right: auto;
}

.webgl_center {
  margin-left: auto;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-right: auto;
  display: block;
  text-align: center;
  max-width: 95%;
  overflow-x: auto;
}
.webgl_center pre,
pre.webgl_center {
  background: none;
}
.webgl_center>img {
  max-width: 100%;
}
.webgl_image>img {
    width: 100%;
}
.webgl_math {
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  text-align: left;
}

.webgl_math_center {
  display: block;
  text-align: center;
}

.hcenter {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;

  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;

  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
}

table.vertex_table {
  border: 1px solid black;
  border-collapse: collapse;
  font-family: var(--code-font-family);
  font-size: small;
}

table.vertex_table th {
  background-color: #88ccff;
  padding-right: 1em;
  padding-left: 1em;
}

table.vertex_table td {
  border: 1px solid black;
  text-align: right;
  padding-right: 1em;
  padding-left: 1em;
}

.tabular-data {
  font-family: var(--code-font-family);
  font-size: medium;
  text-align: left;
  display: inline-block;
  line-height: 1.2;
  border-collapse: collapse;
}
.tabular-data thead {
  background: lightblue;
}
.tabular-highlight {
  background: pink;
}
.tabular-data td {
  border: 1px solid black;
  padding: 0.2em;
}
.tabular-data1 td:nth-child(3),
.tabular-data1 td:nth-child(4) {
  text-align: center;
}
.tabular-data2 tbody td:nth-child(8),
.tabular-data2 tbody td:nth-child(9) {
  text-align: center;
}
.tabular-data4 tbody td:nth-child(4) {
  text-align: center;
}


iframe {
    display: block;
}

iframe.body {
  height: 100vh;
}
iframe.webgl_example {
  border: none;
  margin-left: auto;
  margin-right: auto;
  display: block;
  border: 1px solid black;
}
iframe.noborder {
  border: none !important;
}

iframe.external_diagram {
  border: none;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

div.webgl_bottombar {
  border: 1px solid #000;
  background-color: #def;
  padding: 1em;
  width: calc(100% - 80px);
}
div.webgl_bottombar>h3 {
  font-size: x-large;
  font-weight: bold;
  margin-bottom: 1em;
}
div.webgl_bottombar code {
    background-color: #ccc;
}

.so {
  font-size: x-small;
}
.so a {
  cursor: pointer;
}

/* --- Prettify --- */
pre.prettyprint .nocode { background-color: none; color: #FFF }
pre.prettyprint .str { color: #b9ca4a } /* string          */
pre.prettyprint .kwd { color: #c397d8 } /* keyword         */
pre.prettyprint .com { color: #f3efb2 } /* comment         */
pre.prettyprint .typ { color: #7aa6da } /* type            */
pre.prettyprint .lit { color: #45e7a6 } /* literal         */
pre.prettyprint .pun { color: #7ecce0 } /* punctuation     */
pre.prettyprint .pln { color: #eaeaea } /* plaintext       */
pre.prettyprint .tag { color: #d54e53 } /* html/xml tag    */
pre.prettyprint .atn { color: #e78c45 } /* attribute name  */
pre.prettyprint .atv { color: #70c0b1 } /* attribute value */
pre.prettyprint .dec { color: #e78c45 } /* decimal         */
pre.prettyprint .var { color: #d54e53 } /* variable name   */
pre.prettyprint .fun { color: #7aa6da } /* function name   */

pre.prettyprint ul.modifiedlines {
    list-style-type: none;
    padding-left: 0;
}
pre.prettyprint ul.modifiedlines li.linemodified {
    list-style-type: none;
    background-color: #324840;
}
pre.prettyprint ul.modifiedlines li.linedeleted {
    list-style-type: none;
    background-color: #4c1414;
    text-decoration: line-through;
}

pre.prettyprint ul.modifiedlines li.lineadded {
    list-style-type: none;
    background-color: #3f4463;
}


pre.prettyprint, code.prettyprint {
    color: #FFF;
    background: #222;
    border: 1px solid #000;
    box-shadow: 10px 10px 0px #ccc;
    font-size: 9pt;
    font-family: var(--code-block-font-family);
    margin: auto;
    padding: 1em;
    text-align: left;           /* override justify on body */
    /* this was disabled until 2016-08-26 but I don't know why */
    overflow: auto;             /* allow scroll bar in case of long lines - goes together with white-space: nowrap! */
    white-space: pre;        /* was nowrap, prevent line wrapping */
    line-height: 1.5em;
    width: calc(100% - 80px);
}

@media print {
    pre.prettyprint .str, code.prettyprint .str{color:#060}
    pre.prettyprint .kwd, code.prettyprint .kwd{color:#006;font-weight:bold}
    pre.prettyprint .com, code.prettyprint .com{color:#600;font-style:italic}
    pre.prettyprint .typ, code.prettyprint .typ{color:#404;font-weight:bold}
    pre.prettyprint .lit, code.prettyprint .lit{color:#044}
    pre.prettyprint .pun, code.prettyprint .pun{color:#440}
    pre.prettyprint .pln, code.prettyprint .pln{color:#000}
    pre.prettyprint .tag, code.prettyprint .tag{color:#006;font-weight:bold}
    pre.prettyprint .atn, code.prettyprint .atn{color:#404}
    pre.prettyprint .atv, code.prettyprint .atv{color:#060}
    pre.prettyprint, code.prettyprint {
        color: #000;
        background: #EEE;
        font-size: 8pt;
        font-family: var(--code-block-font-family);
        width: 95%;
        margin: auto;
        padding: 1em;
        text-align: left;           /* override justify on body */
        overflow: visible;
        white-space: pre;        /* was nowrap, prevent line wrapping */
        line-height: 1.5;
    }

    pre.prettyprint ul.modifiedlines li.linemodified {
        list-style-type: none;
        background-color: #DDD;
    }
    pre.prettyprint ul.modifiedlines li.linedeleted {
        list-style-type: none;
        background-color: #CCC;
        text-decoration: line-through;
    }

    pre.prettyprint ul.modifiedlines li.lineadded {
        list-style-type: none;
        background-color: #EEE;
    }

    body {
        margin: 10mm;
    }
    .doubleSpace p {
        line-height: 2.5;
        font-size: x-large;
    }
    .doubleSpace pre.prettyprint {
        font-size: 14pt;
    }
    .webgl_navbar,
    .lesson-comment-sep,
    .lesson-sidebar,
    .lesson-comments {
        display: none;
    }
}

@media (max-height: 700px) {
    .webgl_example {
        height: 400px;
    }
    .webgl_math {
        font-size: small;
    }
    ul, ol {
      padding-inline-start: 10px;
    }
    li {
      margin-left: 5px;
    }
    #search {
      display: none;
    }
}

@media (max-width: 720px) {
    body {
        font-size: 16px;
    }
    h1 {
        font-size: 24px;
    }
    iframe {
        max-width: 95% !important;
    }
}

@media (prefers-color-scheme: dark) {
  html {
    scrollbar-color: hsl(0, 0%, 35%) hsl(0, 0%, 13%);
  }
  body {
    background: #333;
    color: #CCC;
  }
  a {
    color: #56d3fd;
  }
  pre.prettyprint, code.prettyprint {
    box-shadow: 10px 10px 0px #292929;
  }
  code {
    background: #666;
    color: #CCC;
  }
  .x-axis { color: red; }
  .y-axis { color: hsl(120, 100%, 40%); }
  .z-axis { color: hsl(240, 100%, 80%); }
  img {
    background: #DDD;
  }
  img[src$=".svg"] {
    filter: invert(1) hue-rotate(180deg);
    background: none;
  }
  .invertdark {
    filter: invert(1) hue-rotate(180deg);
    background: none;
  }
  .nobg {
    background: none;
  }
  .noinvertdark {
    filter: none !important;
  }
  .lesson-sidebar {
    background: #222;
  }
  .lesson-main>blockquote {
    background-color: #1b1b44;
  }
  table.vertex_table th {
    background-color: #348;
  }
  div.webgl_bottombar {
    background-color: #1b1b44;
  }
  div.webgl_bottombar code {
    background-color: #348;
  }
  .lesson-comment-notes {
    background: #222;
  }
  .tabular-data thead {
    background: darkblue;
  }
  .tabular-highlight {
    background: darkred;
  }
}