:root {
    
  --backgroundColor:             rgb( 255, 255, 255      );
  --backgroundTransparentColor: rgba( 255, 255, 255, .8  );
  --sheetBackgroundColor:       rgba( 240, 240, 240, .8  );

  --foregroundColor:             rgb( 107, 122, 118      );
  --thinRuleColor:              rgba( 107, 122, 118, .12 );

  --headingsColor:               rgb(   0,   0,   0      );
  --headingsUnderlineColor:     rgba(   0,   0,   0, .12 );
  --boldColor:                     var(--headingsColor);
  --boldUnderlineColor:            var(--headingsUnderlineColor);
  --linkColor:                   rgb(  33,  63, 255      );
  --linkUnderlineColor:         rgba(  33,  63, 255, .12 );
  --linkColorVisited:            rgb(   0,   0,   0      );
  --linkUnderlineColorVisited:  rgba(   0,   0,   0, .12 );
  --hoverColor:                  rgb( 205,  80,  85      );
  --hoverUnderlineColor:        rgba( 205,  80,  85, .12 );
  --tagColor:                    rgb(   0,   0,   0      );
  --tagUnderlineColor:          rgba(   0,   0,   0, .12 );
  --adminColor:                  rgb(  33, 160, 170      );
  --adminUnderlineColor:        rgba(  33, 160, 170, .12 );
  --engineTextColor:             var(--foregroundColor);
  --engineTextUnderlineColor:    var(--thinRuleColor);

  --markedTextBackground:        rgb( 255, 242, 128);
  --markedImageBorderColor:      rgb( 255, 242, 128);

  --inputBackgroundColor:        rgb(235, 240, 240);
  --inputTextColor:              black;
  /* --offSwitchColor */
  /* --onSwitchColor */

  /* --imageBorderColor */
  /* --disabledColor */
  /* --activeColor */
  /* --errorColor */
  /* --verifiedColor */
  /* --currentItemBackgroundColor */
  /* --windowBackgroundColor */
  /* --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: 6%;
  --marginRight: 6%;
  --marginTopCompact: 14px;
  --marginLeftCompact: 3%;
  --marginRightCompact: 3%;

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

  /* --columnSpacing */

  --logoTop: -8px;
  --blogTitleFontSize: 28px;
  --blogTitleLineHeight: 32px;
  --pageHeadingFontSize: 36px;
  --pageHeadingLineHeight: 42px;
  /* --noteTitleFontSize */
  /* --noteTitleLineHeight */
  /* --noteLeadFontSize */
  /* --noteLeadLineHeight */
  /* --noteTextFontSize */
  /* --noteTextLineHeight */

  /* --mainFontFamily */
  /* --noteMainFontFamily */
  /* --smallFontFamily */

  /* --time */
  /* --timeLong */

}


@media (prefers-color-scheme: dark) {
  :root .e2-responds-to-dark-mode {

    --backgroundColor:             rgb(  32,  32,  32      );
    --backgroundTransparentColor: rgba(  32,  32,  32, .8  );
    --sheetBackgroundColor:       rgba(  24,  24,  24, .8  );
    
    --foregroundColor:             rgb( 144, 144, 144      );
    --thinRuleColor:              rgba( 144, 144, 144, .12 );
    
    --headingsColor:               rgb( 255, 255, 255      );
    --headingsUnderlineColor:     rgba( 255, 255, 255, .12 );
    --boldColor:                   rgb( 255, 255, 255      );
    --boldUnderlineColor:            var(--headingsUnderlineColor);
    --linkColor:                   rgb(   0, 128, 255      );
    --linkUnderlineColor:         rgba(   0, 128, 212, .12 );
    --linkColorVisited:            rgb( 160, 160, 160      );
    --linkUnderlineColorVisited:  rgba( 160, 160, 160, .12 );
    --hoverColor:                  rgb( 240,  40,  32);
    --hoverUnderlineColor:        rgba( 240,  40,  32, .12 );
    --tagColor:                      var(--foregroundColor);
    --tagUnderlineColor:             var(--thinRuleColor);
    --engineTextColor:               var(--foregroundColor);
    --engineTextUnderlineColor:      var(--thinRuleColor);

    --markedTextBackground:           #443300;
    --markedImageBorderColor:         #886600;

    --errorColor:                  rgb( 240,  40,  32);

  }
}

.e2-text .loud {
  font-family: var(--mainFontFamily);
  font-weight: normal;
  font-size: 40px;
  line-height: 44px;
  color: var(--boldColor);
  max-width: 720px;  
  border: none;
  padding: 0;
  margin: 20px 0 40px;
}