@import url('https://fonts.googleapis.com/css2?family=Sniglet:wght@400;800&display=swap');

body {
    font-family: 'Sniglet', system-ui;
    font-style: italic;
    font-size: 10px;
    color: #333333;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased; /* For better font rendering on Safari */
    -moz-osx-font-smoothing: grayscale;  /* For better font rendering on macOS */
}

.story-container {
    max-width: 800px;
    padding-bottom: 10px;
    margin: 0 auto;
    padding-top: 35svh;
    text-align: center;
    padding-left: 15px;
    padding-right: 15px;
}

.fade-in {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
    will-change: opacity, transform;
    font-size: 24px; /* Fixed large font size */
    line-height: 1.4;
    margin-bottom: 40vh; /* Space between paragraphs */
}

@media (max-width: 767px) {
    .story-container {
        padding-top: 35svh; /* Keep first paragraph centered on smaller screens */
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
        width: calc(100% - 40px); /* Ensure container fits within screen */
    }

    .fade-in {
        margin-bottom: 50vh; /* Increase space on smaller screens */
    }
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Vendor prefixes for broader compatibility */
.fade-in {
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px);
}

.fade-in.visible {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}