style.css

@import url('https://fonts.googleapis.com/css2?family=Encode+Sans|Encode+Sans:wght@400;600;700')


* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: none;
  -webkit-touch-callout: none;
}

.book .book-body .page-wrapper .page-inner section {
  line-height: 1.7;
  font-size: 1.6rem;
}

.book .book-summary {
  width: 300px;
  position:absolute;
  top:0;
  left:-300px;
}

.book.with-summary .book-header.fixed {
    left: 300px;
}

.book.with-summary .book-body {
    left: 300px;
}


 h1, h2, h3 {
  font-family: 'Encode Sans', 'Helvetica';
  font-size: 1.6rem;
  color: #37bbed;
  text-align: left;
}
 div, p, li .caption {
  font-family: 'Encode Sans', 'Helvetica'
  font-size: 1.3rem;
  color: #3b4449;
  text-align: justify;
}
code, kbd, pre, samp, .sourceLine, .sourceCode {
  font-family: 'PT Mono', monospace;
  font-size: 1em;
}


p code {
  white-space: inherit;
}
pre {
  word-break: normal;
  word-wrap: normal;
}
pre code {
  white-space: inherit;
}

.title {
  font-family: 'Encode Sans', serif;
  font-size: 3em !important;
  color: #9283BE;
 }

.subtitle {
  font-family: 'Encode Sans', serif;
  color: #50535C;
}

.note {
  font-family: 'Roboto Light', 'Encode Sans';
  font-size: 0.9em !important;
  color: #000000;
 }

.footer {
  font-family: 'Roboto Light', 'Encode Sans';
  font-size: 0.8em;!important;
  color: #808080;
}


/*--- LOGO ---*/

.toc-logo {
  width: 300px !important;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}

.toc-logo img {
  max-width: 100%;
  margin-bottom: 10px;
}

.summary > li:first-child {
  height: auto !important; 
}


/* HERO IMAGE */

.hero-image-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background-color: #133454;
}

.hero-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.page-inner {
  padding-top: 200px !important;
}
/* -----------Sidebar div tips------------- */
/* from r-pkgs.org*/

 div.note {
    padding: 1em;
    margin: 1em;
    padding-left: 30px;
    background-size: 70px;
    background-repeat: no-repeat;
    background-position: 15px center;
    min-height: 120px;
    color: #1f5386;
    background-color: #e2e2e2;
  /* border: solid 5px #000000; */
  }



/*div.note {
  background-image: url("../imagenes/marcadeagua.png");*/