Стилі для сторінки

                
CSS
                
/* Основний контейнер для вірша - створює "паперовий" ефект */
.poem {
    font-family: 'Georgia', serif; /* Використовуємо класичний шрифт для літератури */
    max-width: 600px; /* Обмежуємо ширину для кращої читабельності */
    margin: 40px auto; /* Центруємо блок та додаємо відступи */
    padding: 40px 50px; /* Внутрішні відступи */
    background-color: #fffdf8; /* Кремовий колір фону, схожий на старий папір */
    border: 1px solid #e8e0d0; /* Тонка рамка кольору старого паперу */
    border-radius: 2px; /* Легке закруглення кутів */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* М'яка тінь для ефекту "піднятого" паперу */
    line-height: 1.8; /* Міжрядковий інтервал для комфортного читання */
    color: #333; /* Основний колір тексту */
    position: relative; /* Для позиціонування псевдоелементів */
    background-image: linear-gradient(to bottom, #fffdf8 95%, #f5e9d9 100%); /* Градієнт для ефекту "вицвілого" паперу */
}

/* Декоративний внутрішній контур для додаткового "паперового" ефекту */
.poem:before {
    content: ""; /* Обов'язковий атрибут для псевдоелементів */
    position: absolute; /* Абсолютне позиціонування */
    top: 10px; /* Відступи від країв */
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px solid #f0e6d6; /* Світла рамка */
    pointer-events: none; /* Щоб не заважав інтерактивним елементам */
}
            

                
CSS
                
/* Стилі для заголовка вірша */
.poem-title {
    font-size: 1.8em; /* Великий розмір шрифту */
    text-align: center; /* Вирівнювання по центру */
    margin-bottom: 30px; /* Відступ після заголовка */
    color: #5a4a3a; /* Колір тексту - темно-коричневий */
    font-weight: normal; /* Звичайна товщина (не жирний) */
    font-style: italic; /* Курсив для поетичного стилю */
    letter-spacing: 1px; /* Невеликий міжлітерний інтервал */
    position: relative; /* Для псевдоелемента */
}

/* Декоративна лінія після заголовка */
.poem-title:after {
    content: ""; /* Обов'язковий атрибут */
    display: block; /* Блоковий елемент */
    width: 100px; /* Ширина лінії */
    height: 2px; /* Товщина лінії */
    background: #d9c7b8; /* Колір лінії - світло-коричневий */
    margin: 15px auto 0; /* Відступи та центрування */
}

/* Стилі для імені автора */
.poem-author {
    text-align: right; /* Вирівнювання праворуч */
    font-style: italic; /* Курсив */
    margin-top: 25px; /* Відступ зверху */
    color: #7a6b5a; /* Колір тексту */
    font-size: 0.95em; /* Трохи менший розмір шрифту */
}

/* Стилі для строфи вірша */
.poem-stanza {
    margin-bottom: 25px; /* Відступ між строфами */
    padding-left: 20px; /* Відступ зліва */
    position: relative; /* Для псевдоелемента */
}

/* Декоративна лапка на початку кожної строфи */
.poem-stanza:before {
    content: "“"; /* Символ лапки */
    position: absolute; /* Абсолютне позиціонування */
    left: -5px; /* Позиція зліва */
    top: -15px; /* Позиція зверху */
    font-size: 3em; /* Великий розмір */
    color: #e8e0d0; /* Дуже світлий колір */
    font-family: 'Times New Roman', serif; /* Класичний шрифт */
    line-height: 1; /* Мінімальний міжрядковий інтервал */
}

/* Стилі для рядка вірша */
.poem-line {
    display: block; /* Кожен рядок - окремий блок */
    margin-bottom: 8px; /* Відступ між рядками */
    text-indent: -1em; /* Виступ першого рядка */
    padding-left: 1em; /* Компенсація для text-indent */
}

/* Видаляємо відступ після останнього рядка */
.poem-line:last-child {
    margin-bottom: 0;
}