:root {
    
  --backgroundColor:             rgb(248, 248, 247);
  --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(  36,  126, 182      );
  --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: 0px;
  --blogTitleFontSize: 26px;
  --blogTitleLineHeight: 28px;
  --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(36, 126, 182);
    --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;
}
.e2-note-single-image {
    width: 100%;
    margin: 0 0 1.5rem;
    overflow: hidden;
    border-radius: 20px;
}

.e2-note-single-image img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 70vh;
    object-fit: cover;
}

.e2-note-single-image::after {
    background: rgba(0,0,0,0);
    transition: background 0.3s ease;
}

.e2-note-single-image:hover::after {
    background: rgba(0,0,0,0.05);
}

.e2-note-snippet h1 {
    font-size: 1.8rem;
    line-height: 1.3;
    margin: 0.5em 0;
}

@media (max-width: 768px) {
    .e2-note-snippet h1 {
        font-size: 1.6rem;
    }
}

/* ===== ШРИФТ INTER ===== */
/* Применение шрифта ко всему сайту */
body {
    font-family: 'Inter', sans-serif;
    font-weight: 400; /* Обычное начертание */
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; /* Сглаживание для Mac */
    -moz-osx-font-smoothing: grayscale;
}

/* Заголовки - полужирные */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 600; /* Полужирное */
    line-height: 1.3;
}

/* Особо важные заголовки - жирные */
h1 {
    font-weight: 600;
}

/* Главное меню */
#main-menu ul {
    list-style: none;
    line-height: 2em;
    margin: 10px 0 0 0;
    font-family: 'Inter', sans-serif;
    font-weight: 500; /* Medium для меню */
}

#main-menu li {
    display: inline;
    font-size: 17px;
}

#main-menu a {
    display: inline-block;
    border: none;
    padding: 0 16px 0 0;
    text-decoration-line: underline;
    text-decoration-color: #e2e2e2;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

/* Заголовок блога */
#e2-blog-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

/* Описание блога */
#e2-blog-description {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

/* Заметки на главной */
.e2-frontpage-note-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

/* Основной контент */
.content {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

/* Футер */
.footer {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
}

/* Кнопки и ссылки */
a {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

/* Улучшенное отображение для мобильных */
@media (max-width: 768px) {
    body {
        font-size: 16px; /* Оптимальный размер для мобильных */
        line-height: 1.5;
    }
    
    #main-menu li {
        font-size: 16px;
    }
}