:root {
        --bs-font-sans-serif: 'Roboto', sans-serif;
        }

.http_cat_img {
    width: 99%
}


.max_w_48 {
    max-width: 48rem;
}

h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

h2 {
    display: block;
    font-size: 1.75rem;           /* Чуть крупнее — лучше читаемость */
    margin: 1.5rem 0 1rem 0;      /* Больше отступ сверху, меньше снизу */
    font-weight: 600;             /* Чуть жирнее, но не чересчур */
    color: #212529;               /* Тёмно-серый — мягче, чем чисто чёрный */
    line-height: 1.3;             /* Пространство между строк */
    border-left: 4px solid #f39638; /* Оранжевый акцентный маркер */
    padding-left: 0.75rem;        /* Отступ от линии до текста */
}


p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.text-orange {
    color: #ff7c54;
}

.text-dark_grey {
    color: #413f42
}

.card-img-top {
    height: 270px;
    object-fit: cover; /* Обрезает с сохранением пропорций */
    object-position: center; /* Центрирует обрезку */
}

.bg-body-orange {
    background-color: #ff7c54;
}

.bg-orange {
  background-color: #f97316; /* ярко-оранжевый в духе text-orange из заголовка */
}

.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 24px;
  z-index: 1000;
  opacity: 0.9;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.back-to-top:hover {
  opacity: 1;
  transform: translateY(-3px);
}


/* === Цвета темы === */
:root {
  --bg-light: #f8f4ff;
  --bg-dark: #1c1c1c;
  --text-light: #1a1a1a;
  --text-dark: #f0f0f0;
  --accent: #ff7c54;
}

/* === Темная тема === */
body.dark-mode {
  background-color: var(--bg-dark) !important;
  color: var(--text-dark);
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p,
body.dark-mode li,
body.dark-mode a {
  color: var(--text-dark);
}

body.dark-mode pre,
body.dark-mode code {
  background-color: #2a2a2a;
  color: #ddd;
}

body.dark-mode .text-muted,
body.dark-mode .text-white-50 {
  color: #aaa !important;
}

body.dark-mode .btn-outline-secondary {
  border-color: #ccc;
  color: #ccc;
}

body.dark-mode .btn-outline-secondary:hover {
  background-color: #444;
  border-color: #ddd;
  color: #fff;
}

body.dark-mode .border-bottom {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode footer {
  background: linear-gradient(90deg, #111, #222);
}

/* === Плавающая кнопка Наверх === */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 24px;
  z-index: 1000;
  opacity: 0.9;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.back-to-top:hover {
  opacity: 1;
  transform: translateY(-3px);
}

/* === Переключатель темы === */
.theme-toggle {
  cursor: pointer;
  background: none;
  border: none;
  font-size: 1.2rem;
  padding: 6px 10px;
  color: var(--accent);
  transition: transform 0.2s ease;
}

.theme-toggle:hover {
  transform: scale(1.1);
  color: var(--accent);
}

/* === Иконки в теме === */
.theme-toggle svg {
  width: 20px;
  height: 20px;
  fill: var(--accent);
}

body.dark-mode .theme-toggle svg {
  fill: #ffb997;
}

.theme-toggle .theme-icon {
  width: 20px;
  height: 20px;
  opacity: 0.4;
  transition: opacity 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.theme-toggle .theme-icon.active {
  opacity: 1;
  transform: scale(1.2);
  color: var(--accent);
}

.theme-icon {
  font-size: 1.2rem;
  opacity: 0.4;
  transition: opacity 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.theme-icon.active {
  opacity: 1;
  transform: scale(1.2);
  color: var(--accent);
}

/* Цвет текста в логотипе */
.text-variant {
  color: #1a1a1a;
}

body.dark-mode .text-variant {
  color: #f0f0f0;
}

/* Фильтр на логотип, чтобы сделать белым (только если он черный по умолчанию) */
body.dark-mode #logo-img {
  filter: brightness(1000%) grayscale(100%) contrast(1000%);
}


.copy-btn {
  border-left: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0 !important;
}

.martop {margin-top: -20px;}

.cookie-notification {
            position: fixed;
            background-color: rgba(0, 0, 0, .8);
            bottom: 0;
            width: 100%;
            color: white;
            padding: 15px;
        }
        .cookie-notification_hidden_yes {
            display: none;
        }
        .cookie-notification__header {
            margin-bottom: 10px;
            font-size: 23px;
        }
        .cookie-notification__body {
            margin-bottom: 10px;
        }
        
.with-markers {
    list-style: disc;
    padding-left: 1.25rem;
}