:root {
      
  --backgroundColor:             rgb(  36,  35,  34      );
  --backgroundTransparentColor: rgba(  36,  35,  34, .8  );
  --sheetBackgroundColor:       rgba(  18,  17,  17, .8  );
  
  --foregroundColor:             rgb( 137, 136, 135      );
  --thinRuleColor:              rgba( 137, 136, 135, .25 );
  
  --headingsColor:               rgb( 255, 255, 255      );
  --headingsUnderlineColor:     rgba( 255, 255, 255, .25 );
  --boldColor:                     var(--headingsColor);
  --boldUnderlineColor:            var(--headingsUnderlineColor);
  --linkColor:                   rgb( 240, 106,  32      );
  --linkUnderlineColor:         rgba( 240, 106,  32, .25 );
  --linkColorVisited:            rgb( 160,  80,  32      );
  --linkUnderlineColorVisited:  rgba( 160,  80,  32, .12 );
  --hoverColor:                  rgb( 238, 218,  35      );
  --hoverUnderlineColor:        rgba( 238, 218,  35, .25 );
  /* --tagColor */
  /* --tagUnderlineColor  */
  --adminColor:                  rgb(  64, 176,  96      );
  --adminUnderlineColor:        rgba(  64, 176,  96, .25 );
  --engineTextColor:             rgb(  87,  86,  85      );
  --engineTextUnderlineColor:   rgba(  87,  86,  85, .25 );
 
  --markedTextBackground:           #554433;
  --markedImageBorderColor:         #997755;

  --inputBackgroundColor:           #0040cc;
  --inputTextColor:                 #fff;
  /* --offSwitchColor */
  --onSwitchColor:                 var(--activeColor);

  --imageBorderColor:               #333;
  --disabledColor:               rgb(  87,  86,  85      );
  --activeColor:                   var(--linkColor);
  --errorColor:                  rgb( 255, 112,  96);
  --verifiedColor:               rgb(  96, 240,  32);
  --currentItemBackgroundColor:     #333;
  --windowBackgroundColor:       rgb(  45,  44,  43      );
  /* --unsavedIndicatorColor */

  /* to match .likely */
  /* --followButtonBackground: rgba(231,231,231,.8); */
  /* --followButtonHoverBackground: rgba(212,212,212,.8); */
  /* --followButtonTextColor: #000; */

  /* to match .likely-light */
  --followButtonBackground: rgba(236,236,236,.16);
  --followButtonHoverBackground: rgba(255,255,255,.48);
  --followButtonTextColor: #fff;

  --marginTop: 48px;
  --marginLeft: 3%;
  --marginRight: 3%;
  --marginTopCompact: 14px;
  --marginLeftCompact: 3%;
  --marginRightCompact: 3%;

  --displayLogoMarginal: none;
  --displayLogo: block;
  --displayLogoCompact: block;

  --columnSpacing: 20px;
  
  --logoTop: -8px;
  --blogTitleFontSize: 40px;
  --blogTitleLineHeight: 48px;
  --pageHeadingFontSize: 36px;
  --pageHeadingLineHeight: 40px;
  --noteTitleFontSize: 36px;
  --noteTitleLineHeight: 40px;
  --noteTextFontSize: 20px;
  --noteTextLineHeight: 28px;

  --mainFontFamily: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --noteMainFontFamily: "Georgia", serif;
  /* --smallFontFamily */

  /* --time */

}

.e2-text .loud {
  background-color: #0040cc;
  color: var(--headingsColor);
  font-family: var(--mainFontFamily);
  font-size: 40px;
  line-height: 44px;
  max-width: 720px;  
  border: none;
  padding: .4em .4em .8em;
  margin: 20px 0 40px;
}


/* Style: Tomorrow Night Eighties (https://highlightjs.org/static/demo/) */

.hljs {
  display: block;
  overflow-x: auto;
  color: #cccccc;
}

.hljs-comment, .hljs-quote {
  color: #999999
}

.hljs-variable, .hljs-template-variable, .hljs-tag, .hljs-name,
.hljs-selector-id, .hljs-selector-class, .hljs-regexp, .hljs-deletion {
  color: #f2777a
}

.hljs-number, .hljs-built_in, .hljs-builtin-name, .hljs-literal,
.hljs-type, .hljs-params, .hljs-meta, .hljs-link {
  color: #f99157
}

.hljs-attribute {
  color: #ffcc66
}

.hljs-string, .hljs-symbol, .hljs-bullet, .hljs-addition {
  color: #99cc99
}

.hljs-title, .hljs-section {
  color: #6699cc
}

.hljs-keyword, .hljs-selector-tag {
  color: #cc99cc
}

.hljs-emphasis {
  font-style: italic
}

.hljs-strong {
  font-weight: bold
}