.poetry-content {
    text-align: center;
    margin: 2rem auto;
    max-width: 800px;
    font-size: 1.2rem;
    line-height: 1.6;
    position: relative; /* Ensure it stays above particles */
    z-index: 2; /* Higher z-index than particles */
    padding: 1rem; /* Add some padding */
}
.poetry-text {
    font-style: italic;
    white-space: pre-line; /* Ensure line breaks are rendered correctly */
}
.poetry-title {
    font-size: inherit;
    font-weight: bold;
    margin-bottom: 1rem;
    cursor: pointer; /* Add pointer cursor for hover effect */
    transition: color 0.3s ease, transform 0.3s ease; /* Smooth transition for hover */
    position: relative; /* Required for tooltip positioning */
    display: inline-block; /* Ensure the tooltip stays with the title */
}
.poetry-title:hover {
    color: #A23B3B !important; /* Change color on hover (e.g., tomato) */
    transform: scale(1.1); /* Slightly enlarge on hover */
}
/* Tooltip styling */
.poetry-title::after {
    content: '';
    position: absolute;
    top: 100%; /* Position below the title */
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* Start slightly below */
    width: 200px; /* Adjust based on your image size */
    height: 200px; /* Adjust based on your image size */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Drop shadow */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.9s ease, transform 0.9s ease, filter 3s ease; /* 3s for filter transition */
    pointer-events: none; /* Ensure the tooltip doesn't interfere with hover */
    background-size: cover;
    background-position: center;
    background-image: var(--tooltip-image); /* Dynamically set by JavaScript */
    filter: grayscale(100%) sepia(90%); /* Permanent grayscale + strong sepia */
}
.poetry-title:hover::after {
    opacity: 1; /* Show tooltip on hover */
    transform: translateX(-50%) translateY(0); /* Move to final position */
    filter: grayscale(0%) sepia(90%) contrast(120%) saturate(120%); /* Remove grayscale, keep sepia, and enhance contrast/colors */
}
/* Add padding to the date */
.item-date {
    padding-top: 1.5rem; /* Adjust this value as needed */
    opacity: 0; /* Start hidden */
    transition: opacity 2s ease; /* Fade in over 2 seconds */
}
/* Full-width particles container */
#particles-js {
    position: absolute; /* Position absolutely to overlap */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Cover the entire section */
    background: transparent;
    z-index: 1; /* Lower z-index than poetry text */
}
/* Ensure the section containing poetry and particles has relative positioning */
.particles-container {
    position: relative;
    min-height: 100vh; /* Adjust as needed to cover the entire section */
}