docs/flatweb.css
html {
  scroll-behavior: smooth !important;   
}

body,
h1,
h2,
h3,
h4, 
p,
blockquote,
code,
ul,
ol,
dl,
dd,
img {
  margin: 0;
}

img {
  outline: none;
}

body {
  color: #222;
  font: normal 16px/24px 'Roboto',
  sans-serif;
}

article.chapter h2 {
    font: 600 30px/24px "Source Sans Pro", sans-serif;
    margin: 69px 0 0 0;
    padding-bottom: 3px;
}

article.chapter h2 small {
    font: 800 22px/24px "Source Sans Pro", sans-serif;
    float: right;
}

article.chapter h3 {
    font: italic 24px/24px "Source Sans Pro", sans-serif;
    margin: 71px 0 0 0;
    padding-bottom: 1px;
}

article.chapter h3 small {
    font: 600 16px/24px "Source Sans Pro", sans-serif;
    float: right;
}

article.chapter h2 a,
article.chapter h3 a {
    color: #222;
    border-bottom: none;
}

article.chapter h2 a:hover,
article.chapter h3 a:hover {
    border-bottom: none;
    color: inherit;
}

article.chapter h2 a::before,
article.chapter h3 a::before {
    position: absolute;
    left: -48px;
    width: 48px;
    color: #fff;
    transition: color 0.2s ease;
    text-align: center;
}

article.chapter h2 a:hover::before,
article.chapter h3 a:hover::before {
    color: #ddd;
}

article.chapter table {
    margin: 0px 0 20px;
    width: 100%;
    border-collapse: collapse;
}

article.chapter table thead {
    font: 700 15px "Source Sans Pro", sans-serif;
}

article.chapter table td {
    line-height: 22px;
    padding: 3px 0 0 0;
    margin: 0;
}

article.chapter table td + td {
    padding-left: 12px;
}

@media only screen and (max-width: 960px){
  .marginnote {
      visibility: hidden;
  }
  
}
@media only screen and (max-width: 630px) {
  article.chapter h2 a::before,
  article.chapter h3 a::before {
    left: -24px;
    width: 24px;
  }
}

@media only screen and (max-width: 580px) {

    /* Control the view of PDF file link as mobile users won't need it */
    h2,
    h3,
    h4 {
        a {
            svg {
                visibility: hidden;
            }
        }
    }

    /* Control the view of code-type information as the screen is too small
       to fit it */
    .code-lang {
        visibility: hidden;
    }

  article.chapter h2 {
    margin-top: 64px;
    padding-bottom: 2px;
    font-size: 22px;
    line-height: 22px;
  }
  
  article.chapter h3 {
    margin-top: 64px;
    padding-bottom: 0;
    font-size: 20px;
  }
  
}

article.contents h2 {
  margin: 22px 0 6px 0;
  font:
    600 normal 18px/24px "Source Sans Pro",
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}
article.contents h2 .num {
  display: inline-block;
  width: 36px;
}
article.contents ul {
  margin: -12px 0 0 0;
  padding: 6px 0 14px 0;
}
article.contents li {
  padding: 12px 0 0 36px;
  font:
    normal 16px/24px "Source Sans Pro",
    sans-serif;
  color: #7aa0b8;
  list-style-type: none;
}
article.contents li .num {
  display: inline-block;
  letter-spacing: 1px;
  width: 36px;
}
article.contents li a {
  font:
    600 17px/24px "Source Sans Pro",
    sans-serif;
}

article.contents .chapters {
  display: table;
  width: 864px;
}
article.contents .row {
  display: table-row;
}
article.contents .first,
article.contents .second {
  display: table-cell;
  vertical-align: top;
}
article.contents .second {
  padding-left: 48px;
}
article.contents footer {
  width: 864px;
}

@media only screen and (max-width: 1344px) {
    
  article.contents .chapters,
  article.contents .row,
  article.contents .first,
  article.contents .second {
    display: block;
    width: auto;
  }
  article.contents .second {
    padding-left: 0;
  }
  article.contents footer {
    width: inherit;
  }
}

@media only screen and (max-width: 630px) {
  article.contents h2 .num,
  article.contents li .num {
    width: 28px;
  }
  article.contents ol,
  article.contents ul {
    margin-left: 0;
  }
  article.contents li {
    padding-left: 0;
  }
}

@media only screen and (max-width: 580px) {
  article.contents h2 {
    margin: 19px 0 6px 0;
    font-size: 17px;
    line-height: 22px;
  }
  article.contents h3 {
    padding: 1px 0 2px 0;
    font-size: 17px;
    line-height: 22px;
  }
  article.contents p {
    font-size: 15px;
    line-height: 22px;
  }
  article.contents ol,
  article.contents ul {
    padding-bottom: 8px;
  }
  article.contents li {
    font-size: 14px;
    line-height: 22px;
    padding: 4px 0 3px 0;
  }
}

@font-face {
  font-family: "Source Sans Pro";
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: italic;
}
@font-face {
  font-family: "Source Sans Pro";
  font-weight: 600;
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: italic;
  font-weight: 600;
}
@font-face {
  font-family: "Source Sans Pro";
  font-weight: bold;
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: italic;
  font-weight: bold;
}
body,
h1,
h2,
h3,
h4,
p,
blockquote,
code,
ul,
ol,
dl,
dd,
img {
  margin: 0;
}

img {
  outline: none;
}

img.arrow {
  width: auto;
  height: 11px;
}

img.dot {
  width: auto;
  height: 18px;
  vertical-align: text-bottom;
}

body {
  color: #222;
  font:
    normal 16px/24px "Source Sans Pro",
    sans-serif;
}

@media print {
  body,
  a,
  code {
    color: #000 !important;
    background: none !important;
  }

  nav,
  .sign-up {
    display: none;
  }

  .page {
    margin: 0 !important;
  }


}
.emdash {
  white-space: nowrap;
}

.small-caps {
  font-weight: 600;
  font-size: 13px;
}

a {
  color: #1481b8;
  text-decoration: none;
  border-bottom: solid 1px rgba(222, 233, 237, 0);
  transition:
    color 0.2s ease,
    border-color 0.4s ease;
}

a:hover {
  color: #1481b8;
  border-bottom: solid 1px #dee9ed;
}

nav {
  font:
    300 15px/24px "Source Sans Pro",
    sans-serif;
  background: #29313d;
  color: #4b6781;
  overflow: auto;
}

nav a,
nav h2 a {
  color: #7aa0b8;
  text-decoration: none;
  border-bottom: none;
}

nav a:hover {
  color: #dee9ed;
  text-decoration: none;
  border-bottom: none;
}

nav img {
  box-sizing: border-box;
  width: 100%;
  padding: 55px 48px 23px 48px;
}

nav h2 {
  font:
    400 16px/24px "Source Sans Pro",
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #7aa0b8;
}

nav h3 {
  font:
    400 18px/24px "Source Sans Pro",
    sans-serif;
  color: #7aa0b8;
}

nav h2 small,
nav h3 small {
  float: right;
  font-size: 16px;
  color: #4b6781;
}

nav ol,
nav ul {
  margin: 6px 0 3px 0;
  padding: 6px 0 4px 24px;
  border-top: solid 1px #3b4b5e;
  border-bottom: solid 1px #3b4b5e;
}

nav ul {
  list-style-type: none;
  padding-left: 0;
}

nav hr {
  border: none;
  border-top: solid 1px #3b4b5e;
  margin: 6px 0 0 0;
  padding: 0 0 3px 0;
}

nav li small {
  float: right;
  font-size: 14px;
  color: #4b6781;
}

nav li.divider {
  margin: 5px 0 7px 0;
  border-top: solid 1px #3b4b5e;
}

nav li.end-part {
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
}

nav li.end-part small {
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
}

nav .prev-next {
  padding-top: 7px;
  font:
    400 12px/18px "Source Sans Pro",
    sans-serif;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}

nav.wide {
  position: fixed;
  width: 336px;
  z-index: 10;
  height: 100%;
}
nav.wide .contents {
  margin: 24px 48px;
}

.nav-wrapper {
  position: absolute;
  right: 288px;
}

nav.floating {
  display: none;
  z-index: 2;
  position: absolute;
  width: 288px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
nav.floating #expand-nav {
  padding: 0 0 4px 0;
  display: block;
  font-size: 20px;
  text-align: center;
  color: #4b6781;
  cursor: pointer;
  transition:
    padding 0.2s ease,
    margin 0.2s ease,
    color 0.2s ease;
}

nav.floating #expand-nav,
nav.floating #expand-nav:hover {
  border-bottom: none;
}

nav.floating #expand-nav:hover {
  color: #dee9ed;
}

nav.floating .expandable {
  overflow: hidden;
  padding: 0 12px;
  max-height: 0;
  transition:
    margin 0.2s ease,
    max-height 1s ease;
}

nav.floating .expandable .prev-next {
  padding-bottom: 6px;
}

nav.floating .expandable.shown {
  max-height: 550px;
}

nav.floating img {
  padding: 110px 24px 23px 24px;
}

nav.floating.pinned {
  position: fixed;
  top: -85px;
}
nav.floating.pinned .expandable {
  margin-top: -13px;
}
nav.floating.pinned #expand-nav {
  margin-top: -14px;
}

nav.narrow {
  display: none;
  text-align: center;
}
nav.narrow img {
  box-sizing: content-box;
  padding: 11px 0 3px 0;
  width: auto;
  height: 27px;
}
nav.narrow .prev,
nav.narrow .next {
  font-size: 32px;
  position: absolute;
  top: 12px;
  padding: 0 48px;
}
nav.narrow .prev {
  left: 0;
}
nav.narrow .next {
  right: 0;
}

/* .description { */
/* font-style: italic; */
/*   margin-left: 5ex; */
/* } */

.math {
  display: inline;
  display: inline;
  margin-right: 5px;
  vertical-align: middle;
  margin-left: 5px;
}

.math-display {
  text-align: center;
}



.left {
  float: left;
}

.right {
  float: right;
}

.page {
  position: relative;
  width: 1030px;
  margin: 0 auto 0 384px;
}

.em {
  padding: 0 0.1em;
  white-space: nowrap;
}


pre {
  font:
    normal 13px/20px "Source Code Pro",
    Menlo,
    Consolas,
    Monaco,
    monospace;
  margin: 0;
  padding: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

article {
  position: relative;
  width: 700px;
}

article h1 {
  position: relative;
  font: 48px/48px "Source Sans Pro", sans-serif;
  padding: 109px 0 19px 0;
  z-index: 2;
}

article h1.part {
  font: 600 36px/48px "Source Sans Pro", sans-serif;
  padding: 108px 0 20px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

article .number {
  position: absolute;
  top: 50px;
  left: 700px;
  z-index: 1;
  font: 300 96px "Source Sans Pro", sans-serif;
  color: #821131;
}

article p {
  margin: 24px 0;
  line-height: 1.8;
}

article ol,
article ul {
  margin: 24px 0;
  padding: 0 0 0 24px;
}

article img {
  max-width: 100%;
}

article img.wide {
  max-width: none;
  width: 912px;
}

article.chapter table.tabularray td,
article.chapter table.tabularray th {
  border: 2px solid lightgray;
  padding: 15px; /* Adds 15px padding inside each cell */
  text-align: center;
}

aside {
  position: absolute;
  right: -336px;
  width: 288px;
  font:
    normal 14px/20px "Source Sans Pro",
    sans-serif;
  border-top: solid 1px #dee9ed;
}

aside p {
  margin: 20px 0;
}

aside p:first-child,
aside img:first-child {
  margin-top: 4px;
}
aside p:last-child {
  margin-bottom: 4px;
}
aside code {
  font-size: 14px;
  border-radius: 2px;
  padding: 1px 2px;
}

aside .codehilite {
  padding: 6px;
  margin: -12px 0;
}

aside .codehilite:last-child {
  margin-bottom: 4px;
}

aside img.above {
  position: absolute;
  bottom: 100%;
  margin-bottom: 16px;
}

aside blockquote {
  margin: 20px 0;
}

aside blockquote::before,
aside blockquote::after {
  content: none;
}

aside blockquote p {
  margin: 0 12px;
  font: italic 15px/20px "Source Sans Pro", sans-serif;
  color: inherit;
}

aside.bottom {
  border-top: none;
  border-bottom: solid 1px #dee9ed;
}

blockquote {
  position: relative;
  margin: 29px 0 31px 0;
}

blockquote::before,
blockquote::after {
  position: absolute;
  top: -20px;
  font:
    italic 72px "Source Sans Pro",
    sans-serif;
  color: #dee9ed;
}
blockquote::before {
  content: "“";
  left: -7px;
}
blockquote::after {
  content: "”";
  right: 8px;
}

blockquote p {
  margin: 0 48px;
  font:
    italic 24px/36px "Source Sans Pro",
    sans-serif;
  color: #5985a6;
}

blockquote p em {
  font-style: normal;
}

blockquote cite {
  display: block;
  text-align: right;
  color: #7aa0b8;
  font-style: normal;
  font-size: 18px;
}

blockquote cite::before {
  content: "— ";
  color: #dee9ed;
}

blockquote cite em {
  font-style: italic;
}

footer {
  position: relative;
  border-top: solid 1px #dee9ed;
  color: #7aa0b8;
  font: 400 15px "Source Sans Pro", sans-serif;
  text-align: center;
  margin: 48px 0;
  padding-top: 48px;
  padding: 30px 0 30px;
}

footer a,
footer a:hover {
  border: none;
}

footer .next {
  right: 0;
  top: -13px;
  padding-left: 4px;
  background: #fff;
  font: 400 17px/24px "Source Sans Pro", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

footer .next:hover {
  color: #004466;
  border: none;
}

/* span.chapterToc{ */
/*     font: 500 14px/60px "Source Sans Pro", sans-serif; */
/*     color: #29313d; */
/*     margin: 100px; */
/*     a { */
/*         color: #608da2; */
/*         float: right; */
/*         display: inline-block; */
/*                  text-align: right; */
/*     } */
    
/* } */

/* span.sectionToc{ */
/*     font: 200 13px/30px "Source Sans Pro", sans-serif; */
/*     color: #29313d; */
/*     a { */
/*         color: #537d90; */
/*          float: right; */
/*          display: inline-block; */
/*                   text-align: right; */
/*     } */
/* } */


/* span.subsectionToc{ */
/*     font: 100 12px/22px "Source Sans Pro", sans-serif; */
/*     color: #29313d; */
/*     a { */
/*         color: #446879; */
/*          float: right; */
/*          display: inline-block; */
/*          text-align: right; */
/*     } */
/* } */

@media only screen and (max-width: 1344px) {
    nav.wide {
        display: none;
    }

    .code-lang {
        display: none;
    }

    nav.floating {
        display: block;
    }

    .page {
        position: relative;
        width: inherit;
        max-width: 912px;
        margin: 0 auto;
    }

    article {
        width: inherit;
        margin-right: 336px;
    }
    article .number {
        top: 73px;
        left: inherit;
        right: 0;
        font-size: 72px;
    }
    article h1 {
        padding: 110px 0 18px 0;
        font-size: 44px;
    }
}


@media only screen and (max-width: 960px) {
    body {
        margin: 0;
    }

    nav.floating {
        display: none;
    }

    nav.narrow {
        display: block;
    }

    table.equation {
        overflow-x: auto;
        display: block;
    }
    
    .page {
        margin: 0 48px;
        width: inherit;
    }

    article {
        margin: 0;
    }
    article img.wide {
        width: inherit;
        max-width: 100%;
    }

    aside {
        position: inherit;
        right: inherit;
        width: inherit;
        border-bottom: solid 1px #dee9ed;
    }
    aside p:first-child {
        margin-top: 8px;
    }
    aside p:last-child {
        margin-bottom: 8px;
    }
    aside div.codehilite:last-child {
        margin-bottom: 12px;
    }
    aside img {
        display: block;
        max-width: 288px;
        margin: 0 auto;
    }
    aside img.above {
        position: relative;
    }

    aside + div.codehilite {
        margin-top: 12px;
    }

    div.codehilite + aside {
        margin-top: 24px;
    }

    .source-file {
        display: none;
    }

    .source-file-narrow {
        display: block;
    }
}
@media only screen and (max-width: 630px) {
    .page {
        margin: 0 24px;
        width: inherit;
    }

    nav.narrow .prev,
    nav.narrow .next {
        padding: 0 24px;
    }
}


@media only screen and (max-width: 580px) {
    body {
        font-size: 15px;
        line-height: 22px;
    }

    .small-caps {
        font-size: 12px;
    }

    .scrim {
        background: url("rows-22.png");
    }

    nav.narrow img {
        padding: 9px 0 1px 0;
        height: 27px;
    }
    nav.narrow .prev,
    nav.narrow .next {
        top: 11px;
    }

    article h1 {
        font-size: 36px;
        padding: 100px 0 14px 0;
    }
    article h1.part {
        font-size: 30px;
        padding: 97px 0 17px 0;
    }

    /* Control the way chapter number looks on mobile */
    article .number {
        top: 30px;
        font-size: 70px;
    }
    article p {
        margin: 22px 0;
    }
    article ol,
    article ul {
        margin: 22px 0;
        padding: 0 0 0 22px;
    }

    blockquote {
        margin: 27px 0 28px 0;
    }
    blockquote::before,
    blockquote::after {
        top: -17px;
        font-size: 52px;
    }
    blockquote p {
        margin: 0 22px;
        font-size: 20px;
        line-height: 33px;
    }

    footer .next {
        font-size: 15px;
    }
}

dl {
    display: grid;
    grid-template-columns: max-content auto;
}

.description {
    display: block;

    dd {
        margin: 30px;
        /*grid-column-start: 2;*/
    }
}

dt {
    font-weight: bold;
    padding: 0 10px 0 0;
    /* grid-column-start: 1; */
}

.ebsr-8x-x-87 {
    font-weight: bold;
}

.partToc {
    color: #1481b8;
    text-decoration: none;
    border-bottom: solid 1px rgba(222, 233, 237, 0);
    transition:
        color 0.2s ease,
        border-color 0.4s ease;
    text-transform: uppercase;
    font:
        600 normal 18px/24px "Source Sans Pro",
        sans-serif;
    line-height: 24px;
}

@media screen and (max-width: 1000px) {
    .tableofcontents {
        columns: 1;
        position: relative;
        width: 1000px;

        .chapterToc {
            padding: 12px 0 0 36px;
            font:
                normal 16px/24px "Source Sans Pro",
                sans-serif;
            color: #7aa0b8;
            list-style-type: none;
            line-height: 30px;
            font-weight: bold;
        }

        .sectionToc {
            padding: 12px 0 0 36px;
            font:
                normal 16px/24px "Source Sans Pro",
                sans-serif;
            color: #7aa0b8;
            list-style-type: none;
            line-height: 30px;
        }

        .subsectionToc {
            padding: 12px 0 0 36px;
            font:
                normal 16px/24px "Source Sans Pro",
                sans-serif;
            color: #7aa0b8;
            list-style-type: none;
            line-height: 30px;
        }

        .addchapToc {
            padding: 12px 0 0 36px;
            font:
                normal 16px/24px "Source Sans Pro",
                sans-serif;
            color: #7aa0b8;
            list-style-type: none;
            line-height: 30px;
            font-weight: bold;
        }
    }
}

@media screen and (min-width: 1000px) {
    .tableofcontents {
        columns: 1;
        position: relative;
        width: 700px;
        padding: 0 0 40px 0;

        .chapterToc {
            padding: 12px 0 0 36px;
            font:
                normal 16px/24px "Source Sans Pro",
                sans-serif;
            color: #7aa0b8;
            list-style-type: none;
            line-height: 30px;
            font-weight: bold;
        }

        .sectionToc {
            padding: 12px 0 0 50px;
            font:
                normal 16px/24px "Source Sans Pro",
                sans-serif;
            color: #7aa0b8;
            list-style-type: none;
            line-height: 30px;
        }

        .subsectionToc {
            padding: 12px 0 0 80px;
            font:
                normal 16px/24px "Source Sans Pro",
                sans-serif;
            color: #7aa0b8;
            list-style-type: none;
            line-height: 30px;
        }

        .addchapToc {
            padding: 12px 0 0 36px;
            font:
                normal 16px/24px "Source Sans Pro",
                sans-serif;
            color: #7aa0b8;
            list-style-type: none;
            line-height: 30px;
            font-weight: bold;
        }
    }
}

/* List length of the bibliography */
dl.thebibliography {
  width: 700px;
}

/* Numbering colour  */
dt.thebibliography {
  color: #821131;
}

.knowledge {
    background: #d3ebe7;
    padding: 0.1px;
    padding-right: 0.1px;
    padding-left: 0.1px;
    margin: 20px -12px 20px;
    font:
        normal 16px/24px "Source Sans Pro",
        sans-serif;
    color: #444;
    padding-right: 1ex;
    padding-left: 2ex;
    border-left: 6px solid #4fb1a1 !important;
    border-top: 1px solid #4fb1a1 !important;
    border-right: 1px solid #4fb1a1 !important;
    border-bottom: 1px solid #4fb1a1 !important;

    p {
        margin: 8px 0;
    }
}

.warning {
    background: #feefd4;
    padding: 0.1px;
    padding-right: 0.1px;
    padding-left: 0.1px;
    margin: 20px -12px 20px;
    font:
        normal 16px/24px "Source Sans Pro",
        sans-serif;
    color: #444;
    padding-right: 1ex;
    padding-left: 2ex;
    border-left: 6px solid #fcc055 !important;
    border-top: 1px solid #fcc055 !important;
    border-right: 1px solid #fcc055 !important;
    border-bottom: 1px solid #fcc055 !important;

    p {
        margin: 8px 0;
    }
}

.quoteblock {
    border-radius: 2px;
    border-width: 1pt;
    margin: 00px;
    padding-right: 1ex;
    padding-left: 2ex;
    border-style: solid;
    border-color: #dee9ed;
    background-color: #dee9ed;
}

.informationblock {
    margin: 20px -12px 20px;
    border-left: 1px solid #4fb1a1 !important;
    border-top: 1px solid #4fb1a1 !important;
    border-right: 1px solid #4fb1a1 !important;
    border-bottom: 1px solid #4fb1a1 !important;
    background: #edf7f6;
    font:
        normal 15px/20px "Source Sans Pro",
        sans-serif;
    dd.description {
        margin-top: 10px;
    }

    div img {
        width: 100%;
        height: 100%;
    }

    
    .noindent {
        margin: 8px 0;
    }

    .title {
        background: #edf7f6;
        padding: 3px 10px;
        margin: 0px 5px -25px;
        color: #4fb1a1;
    }
    .box-content {
        padding: 0.5em 1em;
        color: #222;
    }

    img {
        width: 100%;
    }
}

.theoryblock {
    margin: -2px -12px 26px -12px;
    border-top: 1px solid #42395f !important;
    border-left: 1px solid #42395f !important;
    border-bottom: 1px solid #42395f !important;
    border-right: 1px solid #42395f !important;
    background: #ebe9f2;
    font:
        normal 15px/20px "Source Sans Pro",
        sans-serif;

    .noindent {
        margin: 8px 0;
    }

    .title {
        background: #ebe9f2;
        padding: 3px 10px;
        margin: 0px 5px -25px;
        color: #42395f;
    }
    .box-content {
        padding: 0.5em 1em;
        color: #222;
    }

    img {
        width: 100%;
    }
}

.code-block {
    display: inline-block;
    position: relative;
    width: 100%;

    .code-lang {
        text-align: right;
        font-size: 12px;
        padding: 10px 0 5px 0;
        font-family: Verdana, sans-serif;
        color: #1481b8;
        transform: rotate(90deg);
        transform-origin: top left;
        position: absolute;
        top: 5px;
        left: 735px;

        @include transform(rotate(270deg));
        @include transform-origin(0 0);
    }
}

.exerciseblock {
    margin: -2px -12px 26px -12px;
    border-left: 1px solid #326199 !important;
    border-top: 1px solid #326199 !important;
    border-right: 1px solid #326199 !important;
    border-bottom: 1px solid #326199 !important;
    background: #e8eff7;
    font:
        normal 15px/20px "Source Sans Pro",
        sans-serif;

    .title {
        background: #e8eff7;
        padding: 3px 10px;
        color: #326199;

        .noindent {
            margin: 8px 0;
        }
    }
    
    .box-content {
        padding: 0.5em 1em;
    }

    .code-block {
        width: 100%;
    }

    .figure {
        margin: 40px auto;

        .caption {
            text-align: left;
        }
    }

    .bi-file-pdf {
        left: -30px;
        color: red;
    }
}

.addchapHead {
    position: relative;
    font:
        48px/48px "Source Sans Pro",
        sans-serif;
    padding: 109px 0 19px 0;
    z-index: 2;
}

.subfigure {
    display: inline-block;
    img {
        display: block;
    }
}


#author-info {
    padding-bottom: 10px;
    background-color: #29313d;
}

.chapterHead {
    position: relative;
    font:
        48px/48px "Source Sans Pro", sans-serif;
    padding: 109px 0 50px 0;
    z-index: 2;
}

.paragraphHead {
    font-weight: bold;
    margin: 0 20px 0 0;
}

.llbutton {
    border: none;
    margin: 10px 0 10px 0;
    padding: 3px;
    color: #29313d;
    margin: 10px 10px 10px 0;
    width: 100%;
}

.ace_editor {
    border-radius: 3px;
}









figure {
    margin: 0pt;
    width: 100%;
}

.wrapfig-r {
    .caption{
        font: normal 12px/20px "Source Sans Pro",
              sans-serif;
    }
}

/* Control the way the margins look in the description environment */
dd.description {
    margin: 30px;
    margin-top: -20px;
}

.caption {

    font-size: 12px;
    color: #333333;

    span.id {
        font-weight: bold;
    }
}

alert {
    span {
        sup {
            font-weight: normal;
        }
    }
}

code {
    color: #df6e5b;
    font-size: 14px;
}

div {
    .figure {
        width: 100%;
    }
}

div {
    .box-content {
        .figure {
            width: 100%;
        }
    }
}

.MathJax_Display, .MJXc-display, .MathJax_SVG_Display {
    overflow-x: auto;
    overflow-y: hidden;
}

table {
    /* .equation:hover { */
    /*     /\* transition: transform 0.5s ease; *\/ */
    /*     /\* transform: scale( *\/ */
    /*     /\*     1.5 *\/ */
    /*     /\* ); /\\* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) *\\/ *\/ */
    /*     background: white; */
    /*     border-style: solid; */
    /*     border-color: #29313d; */
    /* } */
}

.eq-no {
    text-align: right;
}

dt {
    .enumerate-enumitem {
        padding: 0 10px 0px 0px;
    }
}

dl {
    .enumerate-enumitem {
        line-height: 1.8;
    }
}

h2 {
    line-height: 1.4;
}

.solution {
    .hrule {
        color: #e8eff7;
        border-color: #e8eff7;
    }
}

#toc-button {
    border-radius: 5px;
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 999;
    background-color: #29313d;
    border: none;
    padding: 10px 20px;
    font: 400 18px/24px "Source Sans Pro", sans-serif;
    color: #7aa0b8;
}

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

#bibbox {
  width: 400px;
  background: #f0ead6;
  padding: 10px;
  font-size: 14px;
  transition:
    visibility 0s,
    opacity 0.5s linear;
  z-index: 10000;
}

.thebibliography {
  dd {
    margin: -25px 0 0 0;
  }

  dt {
    text-align: end;
  }
}

svg {
  bi.bi-file-pdf {
    color: red;
    position: absolute;
    left: -30px;
  }
}

::marker {
  color: #821131;
  font-size: 1.2em;
}

ul {
  list-style-type: "■ ";
}

a.pdf-link {
  color: red;
}

tbody {
  td {
    white-space: normal !important;
  }
}

/* Add a black background color to the top navigation */
.lowernav {
  background-color: #4a586e;
  overflow: hidden;
  position: fixed; /* Set the navbar to fixed position */
  bottom: 0; /* Position the navbar at the top of the page */
  width: 100vw; /* Full width */
  z-index: 1;
}

/* Style the links inside the navigation bar */
.lowernav a {
  color: #a2bccd;
  text-align: right;
  padding: 10px 16px;
  text-decoration: none;
  font-size: 15px;
  float: right;
  font:
    normal 12px/16px "Source Sans Pro",
    sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  font-weight: lighter;
}

/* Change the color of links on hover */
.lowernav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.lowernav a.active {
  background-color: #7f7f7f;
  color: white;
}

.section-control {
    visibility: hidden;
}

// <weight>: Use a value from 300 to 800
// <uniquifier>: Use a unique and descriptive class name

.open-sans-thin {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}



.marginnote {
  position: absolute;
  right: -330px;
  width: 300px;
  font: normal 12px/20px "Source Sans Pro",
        sans-serif;
  border-top: solid 1px #dee9ed;
}

blockquote p{
            font: italic 16px/30px "Source Sans Pro",
    sans-serif;
            color: #5985a6;
}
