#spoiler-content11 {
 background-color: #f9f9f9;
 padding: 10px;
 margin-top: 10px;
 border-radius: 5px;
 color: #000;
 font-size: 14px;
}

.Hqqqr {
 display: inline-block;
 overflow: hidden;
 cursor: pointer; /* Добавляем указатель при наведении, чтобы пользователь понимал, что элемент можно кликнуть */
}

.Hqqqr h1 {
 display: inline-block;
 margin: 0;
 transform: translateY(100%);
 animation: slideIn 1.5s forwards;
 transition: color 0.5s; /* Добавляем плавный переход для изменения цвета текста */
}

.Hqqqr h1:hover {
 color: black; /* Здесь можно добавить нужные вам цвета или использовать классы для цветов */
}

@keyframes slideIn {
 to {
 transform: translateY(0);
 }
}

 .statistic-container {
width: 100%;
 background-color: rgba(255, 255, 255, 0.7);
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 text-align: center;
 color: white;
 margin: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 background: linear-gradient(to right, #00CED1, #20B2AA);
 } 
 
 .ksk {
 font-size: 18px;
 text-align: center;
 margin-top: 20px;
 padding: 10px;
 border: 2px solid #1d5f67;
 border-radius: 5px;
 }

 .ksk cite {
 display: block;
 margin-top: 10px;
 font-style: italic;
 color: #888;
 }

 #userCount { 
width: 80%;
 font-size: 18px;
 margin: 20px;
 padding: 15px;
 border: 2px solid #1d5f67;
 display: inline-block;
 box-shadow: 15px 15px 0 0 #1d5f67;
 }

 /* Стили для кнопки */
 .d4d42s {
 display: inline-block;
 background-color: #000;
 color: white;
 text-align: center;
 text-decoration: none;
 font-size: 14px;
 cursor: pointer;
 border-radius: 5px;
 border: 2px solid red; /* красная обводка */
 transition: background-color 0.3s;
 }

 .d4d42s:hover {
 background-color: #000;
 }