body {
  display: flex;
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  background-color: #fff;
  color: #333;
  padding-top: 60px; /* Добавим отступ сверху, чтобы контент не накладывался на шапку */
}

/* Шапка */
.wiki-header {
  width: 100%; /* Ширина шапки на всю страницу */
  position: fixed; /* Закрепить шапку в верхней части */
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 1000; /* Чтобы шапка всегда была сверху */
  padding: 15px 30px; /* Добавлены отступы для всей шапки */
  box-shadow: 0 4px 2px -2px gray; /* Легкая тень */
  display: flex; /* Используем flex для шапки */
  justify-content: space-between; /* Распределение контента по краям */
  align-items: center; /* Центрирование по вертикали */
}

.wiki-header .logo img {
  height: 50px;
  border-radius: 50%; /* Делаем логотип круглым */
  object-fit: cover; /* Если логотип не квадратный, обрезаем лишнее */
  margin-right: 20px; /* Добавлен отступ справа для логотипа */
}

.wiki-header nav {
  flex-grow: 1; /* Это позволит навигации занять оставшееся место */
  text-align: center; /* Центрируем текст кнопок */
}

.wiki-header nav ul {
  list-style: none;
  display: inline-flex; /* Используем inline-flex для центрирования */
  gap: 20px;
  margin: 0;
  padding: 0;
}

.wiki-header nav ul li a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  transition: color 0.3s;
}

.wiki-header nav ul li a:hover {
  color: rgba(0, 255, 175, 1);
}

.wiki-header .social-icons {
  display: flex; /* Используем flex для правого блока с иконками */
  gap: 5px;
  margin-right: 50px; /* Добавлен отступ слева для иконок социальных сетей */
}

.wiki-header .social-icons a img {
  height: 25px;
  transition: opacity 0.3s;
}

.social-icons a {
  text-decoration: none; /* Убирает подчёркивание */
}

header .social-icons a img:hover {
  transform: scale(1.2); /* Увеличение иконки при наведении */
}



/* Боковая панель */
.sidebar {
  width: 200px;
  background-color: #fff;
  position: fixed;
  top: 80px; /* Отступ от шапки */
  left: 0;
  bottom: 0;
  overflow-y: auto;
  padding: 20px 10px;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Боковая панель */
.sidebar ul li {
  margin-bottom: 3px; /* Уменьшаем отступы между кнопками */
}

/* Стили для кнопок */
.sidebar ul li button {
  display: block; /* Кнопка будет занимать всю ширину */
  width: 100%; /* Кнопки растягиваются по ширине */
  padding: 10px;
  font-size: 16px;
  background-color: transparent; /* Фон по умолчанию прозрачный */
  color: #333; /* Цвет текста по умолчанию */
  border: none; /* Без границы */
  cursor: pointer;
  text-align: left; /* Выравнивание текста по левому краю */
  padding-left: 15px; /* Отступ слева */
  transition: background-color 0.3s ease; /* Плавное изменение фона */
  border-radius: 5px; /* Скругляем углы */
}

/* Фон при наведении на кнопку */
.sidebar ul li button:hover {
  background-color: rgba(146, 146, 146, 0.2); /* Легкий фон при наведении */
}

/* Фон для активной кнопки */
.sidebar ul li button.active {
  background-color: rgba(0, 255, 175, 0.2); /* Легкий фон для активной кнопки */
}

/* Новый заголовок */
.sidebar-header {
  padding: 10px;
  font-size: 16px;
  font-weight: bold; /* Жирный шрифт */
  color: #333;
  background-color: transparent; /* Без фона */
  text-align: left; /* Выравнивание текста по левому краю */
  padding-left: 15px; /* Отступ слева */
  cursor: default; /* Убираем курсор при наведении */
  border-radius: 5px; /* Скругленные углы */
}

.sidebar-header:hover {
  background-color: rgba(146, 146, 146, 0.2); /* Легкий фон при наведении, чтобы выглядело как кнопка */
}

/* Стили для кнопок правой группы (с отступом) */
/* Стили для кнопок правой группы (с отступом) */
.right-buttons {
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 16px;
    background-color: transparent;
    color: #333;
    border: none;
    cursor: pointer;
    text-align: left;
    padding-left: 40px; /* Увеличенный отступ слева для сдвига кнопок вправо */
    transition: background-color 0.3s ease;
    border-radius: 5px;
  }
  
  /* Фон при наведении на правые кнопки */
  .right-buttons:hover {
    background-color: rgba(146, 146, 146, 0.2); /* Легкий фон при наведении */
  }
  

/* Контент */
.content {
  margin-left: 220px; /* Чтобы контент не накладывался на боковую панель */
  padding: 20px;
  flex-grow: 1;
  margin-top: 20px; /* Добавляем отступ сверху для контента */
}

.section {
  display: none;
}

.active-section {
  display: block;
}

/* Стили для кнопок */
button {
  font-family: 'Montserrat', sans-serif;
}

/* Секция Введение */
.welcome-title {
  text-align: center;
  font-size: 2.5em;
  background: rgba(0, 255, 175, 1);
  -webkit-background-clip: text;
  color: transparent;
}

/* Стили для ссылок */
a {
  color: #1a73e8;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

#voice-chat {
  width: 80%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

#voice-chat ol {
  margin-left: 20px;
}

.highlight {
  color: red;
  font-weight: bold;
}

.icon-table {
  width: 100%;
  border-collapse: collapse;
}

.icon-table td {
  padding: 10px;
  text-align: center;
}

.icon-table img {
  width: 50px;
  height: 50px;
  display: block;
  margin: 0 auto;
}

.term-title {
  font-size: 15px;
  font-weight: bold;
}

.voice-title {
  text-align: center;
  margin-right: 20px
}

.rounded-image2 {
  border-radius: 15px; /* Скругляет углы */
  width: 300px; /* Устанавливает ширину в пикселях */
  height: auto; /* Сохраняет пропорции */
}

.center-container {
  display: flex; /* Включаем Flexbox */
  justify-content: center; /* Центрируем по горизонтали */
}

.center-container2 {
  display: flex; /* Включаем Flexbox */
  justify-content: center; /* Центрируем по горизонтали */
}

.rounded-image {
  border-radius: 15px;
  width: 300px; /* Установите нужный размер */
  height: auto;
  margin-right: 20px; /* Увеличивает горизонтальное расстояние */
}

.rounded-image3 {
  display: grid; 
  place-items: center;
  border-radius: 5px; /* Скругляет углы */
  width: 300px; /* Устанавливает ширину в пикселях */
  height: auto; /* Сохраняет пропорции */
}

.footer-container {
  background-color: white;
  color: #222;
  text-align: center;
  padding: 10px;
}

.footer-social a {
  margin: 0 10px;
}

.footer-text p {
  margin-top: 10px;
  font-size: 14px;
}

#footer {
  background-color: white;         /* Цвет фона футера */
  color: #222;                   /* Цвет текста */
  padding: 20px 0;                 /* Отступы сверху и снизу */
  text-align: center;              /* Центрируем текст */
  position: relative;
}

.footer-container {
  display: flex;                  /* Используем Flexbox для выравнивания */
  justify-content: space-between;  /* Располагаем элементы с отступом */
  align-items: center;            /* Центрируем по вертикали */
  max-width: 1200px;               /* Ограничиваем максимальную ширину */
  margin: 0 auto;                 /* Центрируем контейнер по горизонтали */
  padding: 0 20px;                /* Отступы по бокам */
}

.footer-social a {
  margin: 0 10px;                 /* Отступы между иконками */
}

.footer-social img {
  width: 40px;                    /* Размер иконок */
  height: 40px;                   /* Высота иконок */
  object-fit: contain;            /* Сохраняем пропорции иконок */
  transition: transform 0.3s ease; /* Плавное увеличение при наведении */
}

.footer-social img:hover {
  transform: scale(1.2);          /* Увеличиваем иконки при наведении */
}

.footer-text p {
  font-size: 18px;                /* Размер шрифта */
  margin: 0;                       /* Убираем отступы */
  color: #222;                   /* Белый цвет для текста */
  font-family: 'Montserrat', sans-serif;  /* Шрифт */
}