body {
        background: url("images/transbackground.png");
        background-repeat: repeat;
    }
  

    .container {
        max-width: 1000px;         /* максимальная ширина на больших экранах */
        margin: 0 auto;            /* центрирование */
        padding-left: 20px;          /* адаптивный отступ слева */
        padding-right: 20px;         /* адаптивный отступ справа */
        box-sizing: border-box;    /* padding учитывается в ширине */
    } 


    
    .container2.author-block {
        display: flex;              /* элементы в ряд */
        justify-content: center;    /* выравнивание всей строки по центру страницы */
        align-items: flex-start;    /* выравнивание по верхнему краю */
        gap: 10px;                  /* расстояние между фото и текстом */
        margin-bottom: 20px;        /* отступ снизу */
    }
    
    .background {
        background: url("images/background.jpg");
        background-repeat: repeat;
    }
    section {
    float: left;
    }
    
    h1{
        color: Darkblue;
        text-align: center;
        font-size: 30px;
        font-family: "Times New Roman";
        font-weight: bold;
        line-height: 1.0;
        margin-top: 5px;
        margin-bottom: 5px;
    }
     
    h2{
        color: Darkblue;
        text-align: center;
        font-size: 25px;
        font-family: "Times New Roman";
        font-weight: bold;
        line-height: 1.0;
        margin-top: 5px;
        margin-bottom: 5px;
    }
      
      

 
    .p{
        color: Darkblue;
        text-align: left;
        font-size: 40px;
        font-family: "Times New Roman";
        font-weight: bold;
        line-height: 1.5;
        margin-left: 50px;
        margin-right:20px;
    }
      
    .p1{
        color: Darkblue;
        text-align: justify;
        font-size: 10px;
        font-family: "Times New Roman";
        font-weight: bold;
        line-height: 1.0;
        margin-left: 10px;
        margin-right:10px;
    }
      
    .p2{
        color: Darkblue;
        font-size: 20px;
        font-family: "Times New Roman";
        font-weight: bold;
        line-height: 1.2;
        margin-left: 90px;
        margin-right: 90px;       
        text-indent: 40px; /* Отступ первой строки */
        text-align: justify; /* Выравнивание по ширине */
        margin-top: 10px;
        margin-bottom: 5px;
    }
      
    .p3{
        color: Darkblue;
        font-size: 20px;
        font-family: "Times New Roman";
        font-weight: bold;
        line-height: 1.5;
        margin-left: 70px;
        margin-top: 10px;
        text-indent: 40px; /* Отступ первой строки */
        text-align: justify; /* Выравнивание по ширине */
    }
    
   
      
    .p4{
        color: Darkblue;
        font-size: 18px;
        font-family: "Times New Roman";
        font-weight: bold;
        line-height: 1.0;
        margin-left: 70px;
        margin-top: 10px;
        text-indent: 40px; /* Отступ первой строки */
    }
    

    .p5{
        color: Darkblue;
        font-size: 18px;
        font-family: "Times New Roman";
        font-weight: bold;
        line-height: 1.0;
        text-align: center;
        margin-top: 10px;
    }   
    
    .p6{
        color: Black;
        font-size: 20px;
        font-family: "Times New Roman";
        font-weight: bold;
        line-height: 1.0;
        text-align: left;
    }   
    
    .pspisok{
        color: Darkblue;
        font-size: 20px;
        font-family: "Times New Roman";
        font-weight: bold;
        line-height: 1.5;
        margin-left: 0px;
        text-indent: 10px; /* Отступ первой строки */
        margin-top: 10px;
        margin-bottom: 5px;
    }
    

    .pширокийтекст{
        color: Darkblue;
        font-size: 20px;
        font-family: "Times New Roman";
        font-weight: bold;
        line-height: 1.5;

        width: 100%;               /* 🔴 адаптивная ширина */
        text-indent: 40px;
        text-align: justify;
        margin: 10px 0;
        box-sizing: border-box;    /* 🔴 учитывает padding родителя */
    }


    
    

    
    .author-block {
        display: flex;                /* элементы в ряд */
        justify-content: center;      /* центрируем весь блок по горизонтали */
        align-items: flex-start;      /* выравнивание по верхнему краю картинки */
        margin-bottom: 20px;          /* отступ снизу */
    }
    
    .author-block img {
        display: block;               /* убирает лишние пробелы вокруг картинки */
        margin-right: 10px;           /* отступ между картинкой и текстом */
    }

    .author-name {
        font-family: "Times New Roman";  
        font-size: 25px;
        color: Darkblue;
        font-weight: bold;
        line-height: 1.4;
        margin-top: 20px; /* сдвигаем текст вниз на 20px */
    }
    
    .poem-container {
        max-width: 700px;   /* ширина стихотворения */
        margin: 0 auto;     /* центрируем блок */
    }

    .poem-title {
        text-align: center; /* заголовок по центру */
        font-weight: bold;
        font-family: "Times New Roman";
        font-size: 20px;
        color: Darkblue;
        margin-bottom: 3px;
    }

    .poem {
        margin: 0;                 /* убираем стандартные отступы */
        text-align: left;          /* левый край ровный */
        margin-left: 250px;
        font-family: "Times New Roman";
        font-size: 20px;
        color: Darkblue;
        line-height: 1.1;
        white-space: pre-line;     /* сохраняет переносы строк */
    }
    
    
    .ul{
        color: Darkblue;
        text-align: left;
        font-size: 40px;
        font-family: "Times New Roman";
        line-height: 1.5;
        margin-left: 70px;
    }        
        
    
    .video_iframe{
        margin-left: 50px;
    }
    
    .html{
        scroll-behavior: smooth; /* Примечание: Страница прокручивается плавно */
    }
    
    .author-btn, .nav-btn {
        display: inline-block;
        font-family: "Times New Roman", serif;  /* новый шрифт */
        font-weight: bold;
        font-size: 14px;
        text-decoration: none;
        padding: 8px 16px;
        border-radius: 12px;      
        cursor: pointer;
        position: relative;
        overflow: hidden;

        /* Основной фон: светлый градиент */
        background: linear-gradient(145deg, #fefefe, #e8e8ff);

        /* Тонкая почти невидимая рамка */
        border: 1px solid rgba(0,0,0,0.05);

        /* Объём через тень */
        box-shadow: 0 4px 10px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);

        /* Цвет текста одинаковый для всех */
        color: darkblue;

        /* Плавный переход для hover */
        transition: all 0.3s ease;
    }

    /* Hover: подсветка и усиление объёма */
    .author-btn:hover, .nav-btn:hover {
        transform: translateY(-2px);
        background: linear-gradient(145deg, #f0f0ff, #dcdcff);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.1),
                0 0 12px rgba(108,92,231,0.4); /* эффект подсветки */
        color: darkblue; /* остаётся одинаковым при hover */
    }

    /* Контейнер кнопок */
    .btn-group {
        display: grid;                     /* 🔴 включаем grid */
        grid-template-columns: repeat(4, 1fr); /* 🔴 4 кнопки на строку, равная ширина */
        gap: 10px;                         /* 🔴 расстояние между кнопками */
        width: 100%;                        /* 🔴 занимаем всю ширину контейнера */
        margin: 0 auto;                     /* 🔴 центрируем grid внутри родителя */
        padding: 0;                         /* 🔴 убираем лишние отступы */
    }

    .btn-group .nav-btn {
        font-size: 14px;                    /* 🔴 размер шрифта как раньше */
        padding: 8px 16px;                  /* 🔴 отступ внутри кнопки */
        text-align: center;                  /* 🔴 текст по центру кнопки */
        width: 100%;                         /* 🔴 кнопка занимает всю ячейку grid */
        box-sizing: border-box;              /* 🔴 учитываем padding в ширине */
    }
    
    /* Медиа-запрос для телефонов */
    @media (max-width: 768px)
        {
        .container {
        padding-left: 10px;    /* 🔴 уменьшенный отступ на телефоне */
        padding-right: 10px;   /* 🔴 уменьшенный отступ на телефоне */
        }
    }
    
    @media (max-width: 480px)
        {
        .pширокийтекст {
        text-indent: 20px;     /* 🔴 уменьшаем отступ первой строки */
        margin-left: 5px;      /* 🔴 минимальный отступ слева */
        margin-right: 5px;     /* 🔴 минимальный отступ справа */
        }
    }

/* 🔴 Контейнер с фото и кнопками */
    .top-block {
        display: flex;                 
        align-items: stretch;           /* верх и низ фото совпадают с кнопками */
        gap: 20px;                      /* расстояние между фото и кнопками */
    }

    /* Фото слева */
    .top-block img {
        width: auto;                    /* сохраняем естественную ширину */
        max-height: 320px;              /* ограничиваем высоту фото */
        height: 100%;                   /* фото растягивается по высоте блока */
        flex-shrink: 0;                 /* фото не сжимается */
        object-fit: cover;              /* сохраняем пропорции, обрезая лишнее */
    }

    /* Блок с кнопками справа */
    .list-links {
        display: flex;
        flex-direction: column;        
        justify-content: space-between; /* равномерно распределяем кнопки по высоте блока */
        align-items: flex-start;        /* текст кнопок по левому краю */
        flex-grow: 1;                   /* занимает оставшееся место справа от фото */
        height: 100%;                   /* кнопки растягиваются на всю высоту блока */
    }

    /* Кнопки списка */
    .list-btn {
        display: inline-block;
        font-family: "Times New Roman", serif;
        font-weight: bold;
        font-size: 20px;               /* тот же размер, что и основной текст */
        line-height: 1.5;              /* высота строки как у текста */
        text-decoration: none;
        padding: 0 8px;                /* горизонтальные отступы внутри кнопки */
        margin: 4px 0;                 /* вертикальные отступы между кнопками */
        border-radius: 8px;
        text-align: left;
        background: linear-gradient(145deg, #fefefe, #e8e8ff);
        border: 1px solid rgba(0,0,0,0.05);
        box-shadow: 0 4px 10px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
        color: darkblue;
        transition: all 0.3s ease;
        white-space: nowrap;           /* текст кнопок не переносится */
    }

    .list-btn:hover {
        transform: translateY(-2px);
        background: linear-gradient(145deg, #f0f0ff, #dcdcff);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.1),
                0 0 12px rgba(108,92,231,0.4);
        color: darkblue;
    }
    
    .footer-text {
        width: 100%;          /* занимает всю ширину окна */
        margin: 0;            /* убираем внешние отступы */
        padding: 0;           /* убираем внутренние отступы */
        text-align: left;     /* текст строго слева */
        font-family: "Times New Roman", serif;
        font-size: 18px;      /* размер по вкусу */
        color: black;         /* 🔴 черный цвет текста */
    }