h1 {
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h2 {
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h3 {
    text-align: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
ol {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.hover-link:hover {
  color: #ff9900;
}

:root {
  /* Базовая ширина: 75 символов — идеально для чтения */
  --content-max-width: 800px;
}

/* Для экранов от 1400px и выше делаем колонку шире */
@media (min-width: 1400px) {
  :root {
    --content-max-width: 960px; /* Чуть шире, но всё ещё комфортно читать */
  }
}

/* Для совсем огромных экранов (4K и больше) можно ещё чуть увеличить */
@media (min-width: 1920px) {
  :root {
    --content-max-width: 1100px;
  }
}

header h1 {
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;    /* Чтобы padding не ломал ширину */

  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
  
  overflow-wrap: break-word;
}

.body-text 
{
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;    /* Чтобы padding не ломал ширину */
    
  text-align: left;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

@media (max-width: 1000px) {
  .body-text {
    text-align: left;
  }
}
.ref-links {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
}
.no-bullet {
    list-style: none;
    padding: 0;
}
.nav-home {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
}
.code {
    font-family: 'Courier New', Courier, monospace;
    background-color: lightgray;
}
.code-frame {
    font-family: 'Courier New', Courier, monospace;
    background-color: lightgray;
    padding: 10px;
    border: 2px solid darkgray; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.code-frame p {
  margin: 1px 0; /* минимальный отступ между абзацами */
}

.code-frame2 {
  position: relative;
  font-family: 'Courier New', Courier, monospace;
  background: #f4f4f4;
  border: 2px solid #2977b7;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  padding: 10px 10px 10px 10px;
  margin: 20px 0;

  width: 100%;
  max-width: 100%; /* Внутри своей колонки */
  box-sizing: border-box;
}

.code-header {
  display: flex;
  justify-content: space-between; /* Разносит язык и кнопки по краям */
  align-items: center;
  margin-bottom: 8px; /* Отступ между шапкой и кодом */
  flex-wrap: wrap;    /* На очень узких экранах кнопки могут упасть вниз */
}

.code-language p {
  margin: 0;
  color: #555;
  font-size: 0.9em;
}

.code-language {
  /*font-size: 12px;*/
  color: #666;
  background-color: #e9ecef;
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 5px;
}

.code-scrollable {
  overflow-x: auto;           /* Скролл только здесь */
  max-height: 400px;          /* Опционально: ограничим высоту, чтобы не было километровых блоков */
  border-radius: 2px;          /* Чуть скруглим углы внутри, чтобы было красиво */
}

.code-content {
  margin: 0;                  /* Убираем стандартные отступы у pre */
  /*white-space: pre-wrap; */     /* Переносим длинные строки */
  /*word-break: break-all; */     /* Если строка без пробелов — режем её */
  padding-right: 20px;        /* Твой «отступ справа» — чтобы текст не прилипал к краю */
  box-sizing: border-box;     /* Чтобы padding не увеличивал ширину сверх 100% */
  display: block;
}

.code-frame2 p {
  margin: 3px 0;
  /*font-size: 14px;*/
  line-height: 1.4;
}

.code-frame2 pre {
  margin: 3px 0;
  /*font-size: 14px;*/
  line-height: 1.4;
}

/* Стили кнопки */
.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 8px;
  font-size: 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.copy-btn:hover {
  background-color: #0056b3;
}

/* Стили сообщения об успехе */
.hidden {
  display: none;
}

.copy-message {
  position: absolute;
  top: 8px;
  right: 40px; /* слева от кнопки */
  background-color: #28a745;
  color: white;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 12px;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none; /* чтобы не мешало кликам */
}

.copy-message.visible {
  opacity: 1;
  transform: translateX(0);
}

.code-frame2 pre.code-content {
    font-size: inherit;       /* Берёт размер шрифта от .code-frame2 (как это делает <p>) */
    line-height: inherit;     /* И межстрочный интервал тоже берёт от родителя */
    
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace; /* Шрифт остаётся моноширинным */
    
    margin: 0;                 /* Обязательно: убирает огромные отступы, которые браузер ставит по умолчанию для <pre> */
    padding: 0;                /* Убирает внутренние отступы */
}