/* Общие стили */
body {
 background-color: #293133; /* Антрацитово-серый фон */
 color: #FFFACD; /* LemonChiffon - Цвет основного текста */
 font-family: Arial, sans-serif;
 margin: 0;
 padding: 0;
}

p {
 text-indent: 20px; /* Отступ первой строки */
 margin-bottom: 0px; /* Уменьшаем отступ */
 margin: 0; /* верхний и нижний отступ */
 }


h1 {
 font-size: 24px;
 text-align: center;
 font-family: 'Lobster', cursive; /* Красивый рукописный шрифт */
 color: #FFFACD; /* цвет */
 margin-bottom: 5px;
}

h2 {
 font-size: 20px;
 text-align: center;
 font-family: 'Pacifico', cursive; /* Красивый рукописный шрифт */
 color: #FFFACD; /* цвет */
 margin-bottom: 5px;
}
/* Стили для ссылок */
a {
 color: #FFD700; /* Золотой цвет ссылок */
 text-decoration: none;
}

a:hover {
 font-weight: bold;
}

/* Шапка */
.site-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 10px;
 background-color: #000;
 color: #FFF;
 position: sticky;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 1000;
 box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}

/* Меню */
.menu-container {
 display: flex;
 justify-content: flex-start;
 align-items: center;
 flex: 1;
}

.menu {
 display: none;
 position: absolute;
 top: 60px;
 left: 0;
 background-color: #000;
 border-radius: 5px;
 padding: 10px;
 width: 200px;
 box-shadow: 0px 4px 6px rgba(255, 255, 255, 0.2);
 opacity: 0;
 transition: opacity 0.3s ease-in-out;
}

.menu.active {
 display: block !important;
 opacity: 1 !important;
 visibility: visible !important;
}

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

.menu li {
 padding: 10px;
}

.menu a {
 color: #FFF;
 font-size: 18px;
}

.menu a:hover {
 background-color: #FFD700;
 border-radius: 5px;
}

/* Логотип */
.logo {
 flex: 1;
 text-align: center;
 font-family: 'Lobster', cursive;
 font-size: 28px;
 color: #FFF;
}

/* Форма входа */
.auth-links {
 display: flex;
 justify-content: flex-end;
 align-items: center;
 flex: 1;
 margin-right: 20px;
}

.auth-links a {
 color: #FFF;
 margin-right: 10px;
 text-decoration: none;
}



/* Стили для иконок аутентификации */
.auth-links {
 display: flex;
 align-items: center;
 gap: 10px; /* Промежуток между иконками */
}

.auth-links a {
 display: flex;
 align-items: center;
}

.auth-icon {
 width: 24px; /* Размер иконок */
 height: 24px;
 transition: transform 0.3s ease-in-out; /* Плавное увеличение */
}

/* Увеличение при наведении */
.auth-icon:hover {
 transform: scale(1.2);
}


/* Бургер-меню */
.burger-menu {
 cursor: pointer;
 display: block;
 width: 35px;
 height: 30px;
 margin-left: 10px;
}

.burger-menu span {
 display: block;
 width: 35px;
 height: 3px;
 background-color: #FFF;
 margin: 5px 0;
 transition: 0.3s ease-in-out;
}

/* Подвал */
.site-footer {
 text-align: center;
 padding: 20px;
 background-color: #222;
 color: #FFF;
 font-size: 14px;
 min-height: 100px;
}

/* Контакты */
.contacts-container {
 padding: 40px;
 background-color: #222;
 color: #FFFACD;
 max-width: 1200px;
 margin: 0 auto;
}

/* Заголовки */
.contacts-container h1, .contacts-container h2, .contacts-container h3 {
 color: #FFFACD;
 text-align: center;
}

/* Контактный список */
.contact-list {
 list-style: none;
 padding: 0;
 margin: 20px 0;
 font-size: 18px;
 line-height: 1.6;
}

.contact-list li {
 margin: 10px 0;
}

/* ========== Стили для контейнера с темным фоном и рамкой ========== */

.content-container {
 background-color: #222; /* Темный фон */
 color: #FFFACD; /* Цвет текста */
 border: 2px solid #222; /* рамка */
 border-radius: 10px; /* Закругленные углы */
 padding: 10px; /* Отступы внутри контейнера */
 max-width: 1200px; /* Максимальная ширина */
 margin: 20px auto; /* Центрируем по горизонтали */
 box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Тень для объема */
}

/* Применяем для мобильных устройств */
@media (max-width: 768px) {
 .content-container {
 padding: 15px; /* Уменьшаем отступы на мобильных */
 }
}


/* ======= Иконки социальных сетей ======*/

/* Основные стили для иконок */
.contact-list li svg, .social-icon {
 width: 20px; /* Устанавливаем размер иконок */
 height: 20px;
 margin-right: 10px; /* Отступ справа для разделения */
 vertical-align: middle; /* Выравниваем по центру строки */
 transition: transform 0.3s ease; /* Добавляем плавный эффект при изменении размера */
}

/* Контейнер для иконок социальных сетей */
.social-icons {
 display: flex; /* Делаем иконки в строку */
 justify-content: center; /* Выравниваем по центру */
 gap: 10px; /* Добавляем промежутки между иконками */
 margin-top: 20px; /* Отступ сверху */
}

/* Размер иконок в нормальном состоянии */
.social-icons .social-icon {
 width: 40px; /* Размер иконки */
 height: 40px;
 transition: transform 0.3s ease-in-out; /* Добавляем плавную анимацию */
}

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

/* ============================= */
/* Адаптивность для мобильных устройств */
/* ============================= */

@media (max-width: 768px) {
 .social-icons {
 flex-wrap: nowrap; /* Запрещаем перенос на новую строку */
 overflow-x: auto; /* Добавляем горизонтальный скролл, если иконки не влезают */
 padding-bottom: 10px; /* Добавляем отступ снизу, чтобы не обрезало */
 white-space: nowrap; /* Убираем перенос строк */
 }

 .social-icons a {
 flex: 0 0 auto; /* Запрещаем изменение размера */
 }

 /* Уменьшаем размер иконок на мобильных */
 .social-icons .social-icon {
 width: 30px; 
 height: 30px;
 transition: transform 0.3s ease-in-out; /* Оставляем плавную анимацию */
 }
}



/* Форма обратной связи */
form {
 background-color: #333;
 padding: 20px;
 border-radius: 8px;
 margin: 20px 0;
 display: flex;
 flex-direction: column;
 gap: 15px;
}

form input, form textarea {
 padding: 10px;
 border: 1px solid #666;
 border-radius: 5px;
 background-color: #444;
 color: #FFF;
 font-size: 16px;
 width: 100%;
}

form button {
 padding: 10px;
 background-color: #FFD700;
 border: none;
 border-radius: 5px;
 color: #000;
 font-size: 16px;
 cursor: pointer;
 transition: background-color 0.3s;
}

form button:hover {
 background-color: #F39C12;
}

/* Адаптивность */
@media (max-width: 768px) {
 .contacts-container {
 padding: 15px;
 }

 .contact-list li {
 font-size: 16px;
 }

 .social-icons {
 flex-wrap: wrap;
 }

 .social-icons a {
 margin: 10px;
 }
}

/* Биография */
.biography-section {
 padding: 40px;
 background-color: #222;
 color: #FFFACD;
 max-width: 1200px;
 margin: 0 auto;
}

.bio-photo {
 text-align: center;
 margin-bottom: 20px;
}

.bio-avatar {
 width: 150px;
 height: 150px;
 border-radius: 50%;
 object-fit: cover;
}

.biography-section h1 {
 font-size: 28px;
 color: #F0E68C;
 text-align: center;
 font-family: 'Lobster', cursive;
 margin-bottom: 10px;
}

.biography-section h2 {
 font-size: 22px;
 color: #F0E68C;
 text-align: center;
 margin-bottom: 20px;
}

.bio-role {
 font-size: 28px;
 color: #F0E68C;
 text-align: center;
 font-family: 'Lobster', cursive;
 margin-bottom: 10px;
}

.bio-content {
 font-size: 18px;
 line-height: 1.6;
 color: #FFFACD;
 max-width: 900px;
 margin: 0 auto;
 padding: 0 15px;
 text-align: left;
}

@media (max-width: 768px) {
 .bio-content {
 font-size: 16px;
 max-width: 100%;
 padding: 0 10px;
 }

 .bio-avatar {
 width: 120px;
 height: 120px;
 }

 .biography-section h1 {
 font-size: 24px;
 }

 .biography-section h2 {
 font-size: 20px;
 }
}

/* Рукописный шрифт */
.handwriting {
 font-family: 'Segoe Script', 'Dancing Script', 'Pacifico', cursive;
 font-size: 20px;
 color: #FFFACD;
 line-height: 1.6;
 text-align: left;
 display: block;
 margin-top: 15px;
}

@media (max-width: 768px) {
 .handwriting {
 font-size: 18px;
 }
}

/* Подпись */
.signature {
 font-family: 'Great Vibes', cursive;
 font-size: 28px;
 color: #FFFACD;
 text-align: right;
 display: block;
 margin-top: 20px;
}

@media (max-width: 768px) {
 .signature {
 font-size: 24px;
 }
}



/* Убираем лишние отступы для мобильных */
@media (max-width: 768px) {
 .bio-content {
 padding: 0 10px; /* Минимальные боковые отступы */
 text-align: justify; /* Выравниваем текст по ширине */
 }

 .biography-section {
 padding: 20px; /* Уменьшаем общий отступ */
 }
}

/* Роль участника в проекте */
.rol {
 font-family: 'Dancing Script', 'Pacifico', 'Segoe Script', cursive;
 font-size: 24px;
 color: #FFFACD;
 text-align: right;
 display: block;
 margin-top: 20px;
}

@media (max-width: 768px) {
 .rol {
 font-size: 20px;
 }
}


/* Выравнивание текста для всех страниц */
main, .content {
 margin: 0 auto; /* Центрируем контент */
 padding: 20px; /* Отступы для удобства */
 line-height: 1.6; /* Делаем текст более читаемым */
 font-size: 18px; /* Оптимальный размер шрифта */
 color: #FFFACD; /* Цвет текста */
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
 main, .content {
 padding: 10px; /* Уменьшаем отступы */
 font-size: 16px; /* Чуть меньше текст */
 }
}

/* ========== ОБЩИЕ СТИЛИ ДЛЯ КАРТОЧЕК ========== */

/* Контейнер всех карточек */
.entry-container {
 display: flex;
 flex-wrap: wrap; /* Разрешаем перенос строк */
 justify-content: center; /* Выравнивание по центру */
 gap: 20px; /* Отступ между карточками */
 padding: 20px; /* Общий отступ по краям */
}

/* Карточка участника / публикации */
.entry-card {
 background-color: #222; /* Тёмный фон */
 border-radius: 10px; /* Закруглённые углы */
 padding: 10px;
 text-align: center;
 box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Тень для объёма */
 transition: transform 0.3s ease-in-out;
 max-width: 100%; /* Ограничение ширины */
}

/* Анимация увеличения при наведении */
.entry-card:hover {
 transform: scale(1.05);
}

/* ========== ФОТОГРАФИЯ ========== */

/* Фото участника */
.entry-avatar {
 width: 150px; /* Размер фото */
 height: 150px; /* Размер фото */
 border-radius: 50%; /* Круглая форма */
 object-fit: cover; /* Заполнение контейнера без искажений */
 margin-bottom: 5px;
 transition: transform 0.3s ease-in-out; /* Добавляем плавное увеличение */
}

/* Эффект увеличения при наведении */
.entry-avatar:hover {
 transform: scale(1.1); /* Увеличиваем на 10% */
}
/* ========== ТЕКСТ ========== */

/* Имя участника */
.entry-title {
 font-size: 22px;
 color: #FFFACD; /* цвет */
 font-family: 'Pacifico', cursive; /* Красивый рукописный шрифт */
 margin-bottom: 5px;
}

/* Роль участника */
.entry-role {
 font-size: 18px;
 font-family: 'Pacifico', cursive; /* Красивый рукописный шрифт */
 color: #FFFACD; /* цвет */
 margin-bottom: 5px;
}

/* Краткое описание */
.entry-message {
 font-size: 16px;
 color: #FFFACD; /* цвет */
 margin-bottom: 5px;
}

/* ========== КНОПКА ПОДРОБНЕЕ ========== */

/* Ссылка "Подробнее" */
.entry-link {
 display: inline-block;
 padding: 8px 14px;
 background-color: #FFD700; /* Золотая кнопка */
 color: #000;
 text-decoration: none;
 border-radius: 5px; /* Закругление */
 font-size: 14px;
 transition: background 0.3s;
}

/* Анимация кнопки при наведении */
.entry-link:hover {
 background-color: #F39C12; /* Оранжево-золотой */
}/* Общие стили */
body {
 background-color: #293133; /* Антрацитово-серый фон */
 color: #FFFACD; /* LemonChiffon - Цвет основного текста */
 font-family: Arial, sans-serif;
 margin: 0;
 padding: 0;
}

/* Стили для ссылок */
a {
 color: #FFD700; /* Золотой цвет ссылок */
 text-decoration: none;
}

a:hover {
 font-weight: bold;
}

/* Шапка */
.site-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 10px;
 background-color: #000;
 color: #FFF;
 position: sticky;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 1000;
 box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}

/* Меню */
.menu-container {
 display: flex;
 justify-content: flex-start;
 align-items: center;
 flex: 1;
}

.menu {
 display: none;
 position: absolute;
 top: 60px;
 left: 0;
 background-color: #000;
 border-radius: 5px;
 padding: 10px;
 width: 200px;
 box-shadow: 0px 4px 6px rgba(255, 255, 255, 0.2);
 opacity: 0;
 transition: opacity 0.3s ease-in-out;
}

.menu.active {
 display: block !important;
 opacity: 1 !important;
 visibility: visible !important;
}

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

.menu li {
 padding: 10px;
}

.menu a {
 color: #FFF;
 font-size: 18px;
}

.menu a:hover {
 background-color: #FFD700;
 border-radius: 5px;
}

/* Логотип */
.logo {
 flex: 1;
 text-align: center;
 font-family: 'Lobster', cursive;
 font-size: 28px;
 color: #FFF;
}

/* Форма входа */
.auth-links {
 display: flex;
 justify-content: flex-end;
 align-items: center;
 flex: 1;
 margin-right: 20px;
}

.auth-links a {
 color: #FFF;
 margin-right: 10px;
 text-decoration: none;
}



/* Стили для иконок аутентификации */
.auth-links {
 display: flex;
 align-items: center;
 gap: 10px; /* Промежуток между иконками */
}

.auth-links a {
 display: flex;
 align-items: center;
}

.auth-icon {
 width: 24px; /* Размер иконок */
 height: 24px;
 transition: transform 0.3s ease-in-out; /* Плавное увеличение */
}

/* Увеличение при наведении */
.auth-icon:hover {
 transform: scale(1.2);
}


/* Бургер-меню */
.burger-menu {
 cursor: pointer;
 display: block;
 width: 35px;
 height: 30px;
 margin-left: 10px;
}

.burger-menu span {
 display: block;
 width: 35px;
 height: 3px;
 background-color: #FFF;
 margin: 5px 0;
 transition: 0.3s ease-in-out;
}

/* Подвал */
.site-footer {
 text-align: center;
 padding: 20px;
 background-color: #222;
 color: #FFF;
 font-size: 14px;
 min-height: 100px;
}

/* Контакты */
.contacts-container {
 padding: 40px;
 background-color: #222;
 color: #FFFACD;
 max-width: 1200px;
 margin: 0 auto;
}

/* Заголовки */
.contacts-container h1, .contacts-container h2, .contacts-container h3 {
 color: #FFFACD;
 text-align: center;
}

/* Контактный список */
.contact-list {
 list-style: none;
 padding: 0;
 margin: 20px 0;
 font-size: 18px;
 line-height: 1.6;
}

.contact-list li {
 margin: 10px 0;
}


/* ======= Иконки социальных сетей ======*/

/* Основные стили для иконок */
.contact-list li svg, .social-icon {
 width: 20px; /* Устанавливаем размер иконок */
 height: 20px;
 margin-right: 10px; /* Отступ справа для разделения */
 vertical-align: middle; /* Выравниваем по центру строки */
 transition: transform 0.3s ease; /* Добавляем плавный эффект при изменении размера */
}

/* Контейнер для иконок социальных сетей */
.social-icons {
 display: flex; /* Делаем иконки в строку */
 justify-content: center; /* Выравниваем по центру */
 gap: 10px; /* Добавляем промежутки между иконками */
 margin-top: 20px; /* Отступ сверху */
}

/* Размер иконок в нормальном состоянии */
.social-icons .social-icon {
 width: 40px; /* Размер иконки */
 height: 40px;
 transition: transform 0.3s ease-in-out; /* Добавляем плавную анимацию */
}

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

/* ============================= */
/* Адаптивность для мобильных устройств */
/* ============================= */

@media (max-width: 768px) {
 .social-icons {
 flex-wrap: nowrap; /* Запрещаем перенос на новую строку */
 overflow-x: auto; /* Добавляем горизонтальный скролл, если иконки не влезают */
 padding-bottom: 10px; /* Добавляем отступ снизу, чтобы не обрезало */
 white-space: nowrap; /* Убираем перенос строк */
 }

 .social-icons a {
 flex: 0 0 auto; /* Запрещаем изменение размера */
 }

 /* Уменьшаем размер иконок на мобильных */
 .social-icons .social-icon {
 width: 30px; 
 height: 30px;
 transition: transform 0.3s ease-in-out; /* Оставляем плавную анимацию */
 }
}



/* Форма обратной связи */
form {
 background-color: #333;
 padding: 20px;
 border-radius: 8px;
 margin: 20px 0;
 display: flex;
 flex-direction: column;
 gap: 15px;
}

form input, form textarea {
 padding: 10px;
 border: 1px solid #666;
 border-radius: 5px;
 background-color: #444;
 color: #FFF;
 font-size: 16px;
 width: 100%;
}

form button {
 padding: 10px;
 background-color: #FFD700;
 border: none;
 border-radius: 5px;
 color: #000;
 font-size: 16px;
 cursor: pointer;
 transition: background-color 0.3s;
}

form button:hover {
 background-color: #F39C12;
}

/* Адаптивность */
@media (max-width: 768px) {
 .contacts-container {
 padding: 15px;
 }

 .contact-list li {
 font-size: 16px;
 }

 .social-icons {
 flex-wrap: wrap;
 }

 .social-icons a {
 margin: 10px;
 }
}

/* Биография */
.biography-section {
 padding: 40px;
 background-color: #222;
 color: #FFFACD;
 max-width: 1200px;
 margin: 0 auto;
}

.bio-photo {
 text-align: center;
 margin-bottom: 20px;
}

.bio-avatar {
 width: 150px;
 height: 150px;
 border-radius: 50%;
 object-fit: cover;
}

.biography-section h1 {
 font-size: 28px;
 color: #F0E68C;
 font-family: 'Lobster', cursive;
 margin-bottom: 10px;
}

.biography-section h2 {
 font-size: 22px;
 color: #F0E68C;
 margin-bottom: 20px;
}

.bio-content {
 font-size: 18px;
 line-height: 1.6;
 color: #FFFACD;
 max-width: 900px;
 margin: 0 auto;
 padding: 0 15px;
 text-align: left;
}

@media (max-width: 768px) {
 .bio-content {
 font-size: 16px;
 max-width: 100%;
 padding: 0 10px;
 }

 .bio-avatar {
 width: 150px;
 height: 150px;
 }

 .biography-section h1 {
 font-size: 24px;
 }

 .biography-section h2 {
 font-size: 20px;
 }
}

/* Рукописный шрифт */
.handwriting {
 font-family: 'Segoe Script', 'Dancing Script', 'Pacifico', cursive;
 font-size: 20px;
 color: #FFFACD;
 line-height: 1.6;
 text-align: left;
 display: block;
 margin-top: 15px;
}

@media (max-width: 768px) {
 .handwriting {
 font-size: 18px;
 }
}

/* Моя Подпись */
.signature {
 font-family: 'Great Vibes', cursive;
 font-size: 28px;
 color: #F0E68C;
 text-align: right;
 display: block;
 margin-top: 20px;
}

@media (max-width: 768px) {
 .signature {
 font-family: 'Great Vibes', cursive !important;
 font-size: 24px !important;
 color: #F0E68C !important;
 text-align: right !important;
 }
}




/* Убираем лишние отступы для мобильных */
@media (max-width: 768px) {
 .bio-content {
 padding: 0 10px; /* Минимальные боковые отступы */
 text-align: justify; /* Выравниваем текст по ширине */
 }

 .biography-section {
 padding: 20px; /* Уменьшаем общий отступ */
 }
}

/* Роль участника в проекте */
.rol {
 font-family: 'Dancing Script', 'Pacifico', 'Segoe Script', cursive;
 font-size: 16px;
 color: #FFFACD;
 text-align: right;
 display: block;
 margin-top: 20px;
}

@media (max-width: 768px) {
 .rol {
 font-size: 20px;
 }
}


/* Выравнивание текста для всех страниц */
main, .content {
 margin: 0 auto; /* Центрируем контент */
 padding: 20px; /* Отступы для удобства */
 line-height: 1.6; /* Делаем текст более читаемым */
 font-size: 18px; /* Оптимальный размер шрифта */
 color: #FFFACD; /* Цвет текста */
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
 main, .content {
 padding: 10px; /* Уменьшаем отступы */
 font-size: 16px; /* Чуть меньше текст */
 }
}




/* Фото участника */
.bio-photo {
 display: flex;
 justify-content: center; /* Выравнивание по центру */
 align-items: center;
 width: 100%; /* Занимает всю ширину */
 margin-bottom: 20px;
 cursor: pointer;
}

/* Фото увеличивается при наведении */
.bio-avatar {
 width: 150px; /* Исходный размер */
 height: 150px;
 border-radius: 50%;
 object-fit: cover;
 transition: transform 0.3s ease-in-out;
 display: block; /* Избавляемся от inline-особенностей */
 margin: 0 auto; /* Центрируем картинку */
}

.bio-avatar:hover {
 transform: scale(1.1);
}


/* Полноэкранный режим */
.fullscreen-overlay {
 display: none; /* Скрываем по умолчанию */
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 background: rgba(0, 0, 0, 0.9);
 justify-content: center;
 align-items: center;
 z-index: 9999;
}

.fullscreen-img {
 max-width: 100%;
 max-height: 100%;
 border-radius: 10px;
}



/* ========== ОБЩИЕ СТИЛИ ДЛЯ КАРТОЧЕК ========== */

/* Контейнер всех карточек */
.entry-container {
 display: flex;
 flex-wrap: wrap; /* Разрешаем перенос строк */
 justify-content: center; /* Выравнивание по центру */
 gap: 20px; /* Отступ между карточками */
 padding: 20px; /* Общий отступ по краям */
}

/* Карточка участника / публикации */
.entry-card {
 background-color: #222; /* Тёмный фон */
 border-radius: 10px; /* Закруглённые углы */
 padding: 10px;
 text-align: center;
 box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Тень для объёма */
 transition: transform 0.3s ease-in-out;
 max-width: 100%; /* Ограничение ширины */
}

/* Анимация увеличения при наведении */
.entry-card:hover {
 transform: scale(1.05);
}

/* ========== ФОТОГРАФИЯ ========== */

/* Фото участника */
.entry-avatar {
 width: 150px; /* Размер */
 height: 150px;
 border-radius: 50%; /* Делаем круглым */
 object-fit: cover; /* Заполняем контейнер без искажений */
 margin-bottom: 5px;
}

/* ========== ТЕКСТ ========== */

/* Имя участника */
.entry-title {
 font-size: 22px;
 color: #FFFACD; /* цвет */
 font-family: 'Pacifico', cursive; /* Красивый рукописный шрифт */
 margin-bottom: 5px;
}

/* Роль участника */
.entry-role {
 font-size: 20px;
 text-align: center;
 font-family: 'Lobster', cursive; /* Красивый рукописный шрифт */
 color: #FFFACD; /* цвет */
 margin-bottom: 5px;
}

/* Краткое описание */
.entry-message {
 font-size: 16px;
 color: #FFFACD; /* цвет */
 margin-bottom: 5px;
}

/* ========== КНОПКА ПОДРОБНЕЕ ========== */

/* Ссылка "Подробнее" */
.entry-link {
 display: inline-block;
 padding: 8px 14px;
 background-color: #FFD700; /* Золотая кнопка */
 color: #000;
 text-decoration: none;
 border-radius: 5px; /* Закругление */
 font-size: 14px;
 transition: background 0.3s;
}

/* Анимация кнопки при наведении */
.entry-link:hover {
 background-color: #F39C12; /* Оранжево-золотой */
}

/* ========== АДАПТИВНОСТЬ ========== */

/* Для мобильных устройств */
@media (max-width: 768px) {
 .entry-container {
 flex-direction: column; /* Выстраиваем карточки в колонку */
 align-items: center; /* Центрируем */
 }

 .entry-card {
 width: 90%; /* Занимает почти всю ширину */
 max-width: 100%; /* Ограничение */
 }
}






@font-face {
 font-family: 'Segoe Script';
 src: url('/fonts/Segoe_Script.ttf') format('truetype');
}

/* Общий стиль контейнера комментария */
.comment-container {
 background-color: #222; /* Темный фон */
 color: #FFFACD; /* Цвет текста */
 border: 2px solid #FFD700; /* Золотая рамка */
 border-radius: 10px;
 padding: 15px;
 margin-bottom: 15px;
 box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
 text-align: center; /* Центрируем всё внутри */
 max-width: 100%; /* Ограничиваем ширину */
 margin-left: auto;
 margin-right: auto;
}

/* Секция аватара */
.comment-avatar {
 margin-bottom: 10px;
}

/* Аватар в центре */
.comment-avatar-img {
 width: 60px;
 height: 60px;
 border-radius: 50%;
 transition: transform 0.3s ease-in-out;
 object-fit: cover;
}

/* Анимация увеличения аватарки при наведении */
.comment-avatar-img:hover {
 transform: scale(1.2);
}

/* Имя пользователя */
.comment-user {
 font-size: 18px;
 font-family: 'Lobster', cursive;
 color: #FFD700;
}

/* Подпись пользователя */
.comment-signature {
 font-size: 14px;
 font-family: 'Lobster', cursive;
 font-style: italic;
 color: #D4AF37;
 margin-bottom: 10px;
}

/* Тело комментария */
.comment-body {
 font-size: 16px;
 line-height: 1.4;
 text-align: left;
 font-family: 'Segoe Script', 'Dancing Script', 'Pacifico', cursive; 
 background-color: #333;
 padding: 10px;
 border-radius: 5px;
}

/* Ответ на комментарий */
.comment-answer {
 margin-top: 10px;
 padding: 10px;
 background-color: #444;
 border-radius: 5px;
 font-family: 'Segoe Script', 'Dancing Script', 'Pacifico', cursive;
}

/* ========== Адаптация для мобильных устройств ========== */
@media (max-width: 768px) {
 .comment-container {
 padding: 10px;
 }

 .comment-avatar-img {
 width: 50px;
 height: 50px;
 }

 .comment-user {
 font-size: 16px;
 }

 .comment-signature {
 font-size: 12px;
 }

 .comment-body {
 font-family: 'Segoe Script', cursive;
 font-size: 14px;
 }

 .comment-answer {
 font-size: 14px;
 }
}