
     H4{
            margin-bottom: 0px;
            color: red;
            font-weight: bold;
            text-size: 4em;
            font-style: italic;
            text-align: left;
        }
        
        details {
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin-bottom: 25px;
            padding: 10px 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            text-align: left;
        }
        

        summary {
            font-weight: bold;
            background-color: #fff;
            font-size: 1.1em;
            cursor: pointer;
            outline: none;
            padding: 10px 0;
            color: #700101;
            list-style: none; 
        }

        /* Добавляем красивую стрелочку для summary */
        summary::after {
            content: ' ▼';
            float: right;
            font-size: 0.5em;
            color: #000000;
            transition: transform 0.3s ease;
        }

        details[open] summary::after {
            transform: rotate(180deg);
        }

        .hidden-text {
            margin-top: -20px;
            padding-top: 10px;
            /*border-top: 1px solid #eee;*/
            color: #000000;
            line-height: 1.2;
            text-indent: 20px;
        }
        .hidden-text p {
        text-indent: 20px;
        }

    /* Основной стиль для слова */
.hover-word {
    position: relative;
    color: #0066cc;
    text-decoration: none;
    cursor: pointer;
}

/* Скрываем картинку по умолчанию */
.hover-word img {
    display: none;
    position: absolute;
    /* Позиционируем картинку под/над словом */
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 10px;
    
    /* Дополнительно: рамка и тень для красоты */
    border: 2px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 10;
}

/* Показываем картинку при наведении */
.hover-word:hover img {
    display: block;
}

        
