.my-btn {
  display: inline-block;       /* Чтобы работали отступы у ссылок */
  background-color: #007BFF;   /* Синий цвет фона */
  color: white;                /* Белый текст */
  padding: 10px 20px;          /* Внутренние отступы */
  font-size: 16px;             /* Размер шрифта */
  border: none;                /* Убираем стандартную рамку */
  border-radius: 5px;          /* Скругление углов */
  cursor: pointer;             /* Курсор-рука при наведении */
  text-decoration: none;       /* Убираем подчеркивание у ссылки */
  transition: background 0.3s; /* Плавное изменение цвета */
}

/* Эффект при наведении */
.my-btn:hover {
  background-color: #0056b3;   /* Темно-синий цвет */
}

.my-btn1 {
  display: inline-block;       /* Чтобы работали отступы у ссылок */
  background-color: #ff0000;   /* Синий цвет фона */
  color: white;                /* Белый текст */
  padding: 10px 20px;          /* Внутренние отступы */
  font-size: 16px;             /* Размер шрифта */
  border: none;                /* Убираем стандартную рамку */
  border-radius: 5px;          /* Скругление углов */
  cursor: pointer;             /* Курсор-рука при наведении */
  text-decoration: none;       /* Убираем подчеркивание у ссылки */
  transition: background 0.3s; /* Плавное изменение цвета */
}

/* Эффект при наведении */
.my-btn1:hover {
  background-color: #00b300;   /* Темно-синий цвет */
}

/* Стили для контейнера */
  details {
    margin-bottom: 10px;
  }

  /* Стилизуем summary как кнопку */
  summary {
    display: inline-block; /* Делаем блоком под размер текста */
    padding: 10px 20px;
    background-color: #faad06; /* Синий цвет кнопки */
    color: rgb(0, 0, 0);
    cursor: pointer;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    user-select: none; /* Чтобы текст на кнопке не выделялся */
    list-style: none; /* Убираем стандартный треугольник */
  }

  /* Убираем треугольник для Safari/Chrome */
  summary::-webkit-details-marker {
    display: none;
  }

  /* Эффект при наведении */
  summary:hover {
    background-color: #f503e9;
  }

  /* Стиль для скрытого текста */
  .hidden-content {
    padding: 15px;
    border: 1px solid #ddd;
    margin-top: 10px;
    border-radius: 5px;
    background-color: #f9f9f9;
  }

   /* Общие стили для страницы */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        /* Стили для ШАПКИ (Header) */
        header {
            background-color: rgb(107, 3, 107);
            color: white;
            padding: 15px 20px;
            
            /* Включаем Flexbox */
            display: flex;
            /* Ставим элементы друг под другом */
            flex-direction: column; 
            /* Выравниваем их по левому краю */
            align-items: flex-start; 
            /* Добавляем отступ между кнопкой и крошками */
            gap: 15px; 
            
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        /* Стили кнопки */
        .home-btn {
            display: inline-block;
            text-decoration: none;
            background-color: #f89807;
            color: white;
            padding: 8px 16px; /* Чуть уменьшил размер для аккуратности */
            border-radius: 5px;
          box-shadow: 0 4px 6px rgba(0,0,0,0.2);
            font-size: 14px;
            transition: background 0.3s;
        }

        .home-btn:hover {
            background-color: #f77001;
            box-shadow: 0 6px 10px rgba(0,0,0,0.3); /* Тень становится больше */
        }

        .home-btn:active {
    box-shadow: 0 2px 3px rgba(0,0,0,0.2); /* Тень уменьшается */
}

        /* Стили хлебных крошек */
        .breadcrumbs {
            font-size: 13px; /* Чуть меньше, так как это вторичная навигация */
        }

        .breadcrumbs ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap; /* Чтобы переносились на новую строку на телефонах */
        }

        .breadcrumbs li {
            color: #ccc;
        }

        /* Разделитель "/" */
        .breadcrumbs li + li::before {
            content: "/";
            padding: 0 8px;
            color: #666;
        }

        .breadcrumbs a {
            text-decoration: none;
            color: #ccc;
            transition: color 0.2s;
            border-bottom: 1px solid transparent; /* Для эффекта подчеркивания */
        }

        .breadcrumbs a:hover {
            color: #fff;
            border-bottom: 1px solid #fff;
        }

        .breadcrumbs li:last-child {
            color: #fff; /* Текущая страница ярче */
            font-weight: bold;
            cursor: default;
        }
        main {
    padding-left: 15px; /* Тот самый отступ в 15 пикселей */
    padding-right: 15px; /* Желательно добавить и справа, чтобы текст не прилипал */
    padding-top: 20px;   /* Немного отступа сверху от шапки */
}