#story-container {
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    padding: 2rem;
    box-sizing: border-box;
    font-family: 'Georgia', serif;
    background-image: linear-gradient(
        hsl(var(--sl-hue), var(--sl-sat), 90%),
        hsl(var(--sl-hue), var(--sl-sat), 75%)
    );
}

.story-paragraph {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1.2s ease, transform 1.2s ease;
    font-size: 1.2rem;
    line-height: 1.7rem;
    margin-bottom: 2rem;
    color: #333;
}

.story-paragraph.visible {
    opacity: 1;
    transform: translateY(0);
}

#story-next-btn {
    display: block;
    margin: 40px auto 40px auto;
    padding: 12px 24px;
    background: #1f80ff;
    color: white;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}