#achievements-container {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-around;
 padding: 20px;
}

.achievement {
 margin: 10px;
 padding: 10px;
 border: 2px solid #ccc;
 border-radius: 8px;
 text-align: center;
 cursor: pointer;
 transition: transform 0.3s ease-in-out;
}

.achievement:hover {
 transform: scale(1.1);
}

.achievement img {
 max-width: 100px;
 max-height: 100px;
 margin-bottom: 10px;
}

.popup {
 display: none;
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 padding: 20px;
 border: 2px solid #3498db; /* изменен цвет границы на синий */
 border-radius: 10px; /* увеличена округлость углов */
 background-color: #fff; /* изменен цвет фона на белый */
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* добавлена тень */
 animation: fadeIn 0.5s ease-in-out; /* добавлена анимация появления */

 z-index: 999;
}

.popup-title {
 font-size: 24px;
 font-weight: bold;
 color: #3498db; /* цвет текста заголовка */
 margin-bottom: 10px;
}

/* Анимация появления */
@keyframes fadeIn {
 from {
 opacity: 0;
 }
 to {
 opacity: 1;
 }
}

/* Стили для плоской кнопки */
.custom-button888 {
 display: inline-block;
 padding: 10px 20px; /* Задаем отступы */
 background-color: transparent; /* Прозрачный фон */
 border: 1px solid black; /* Черная обводка */
 color: black; /* Цвет текста */
 text-align: center; /* Выравнивание текста по центру */
 text-decoration: none; /* Убираем подчеркивание */
 cursor: pointer; /* Изменяем курсор при наведении */
 width: 100%; /* Растягиваем кнопку на всю ширину */
 box-sizing: border-box; /* Учитываем обводку в размерах элемента */
}

.custom-button888:hover {
 background-color: #3DFFF875; /* Изменяем цвет фона при наведении */
}

/* Анимация */
@keyframes bounce {
 0% { transform: translateY(0); }
 50% { transform: translateY(-10px); }
 100% { transform: translateY(0); }
}