/* Updated font imports for better reading */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;700&family=Montserrat:wght@400;700&display=swap');

body {
    /* Deep aquatic blue background */
    background-color: #04101d; 
    /* Subtle water-like gradient */
    background: radial-gradient(circle at top, #0a2444 0%, #04101d 100%);
    background-attachment: fixed;
    /* Montserrat is cleaner for the UI, Merriweather for the story text */
    font-family: 'Montserrat', sans-serif;
    color: #e0f2ff;
    margin: 0;
    padding: 0;
}

h1 {
    font-family: 'Rage Italic', cursive;
    font-size: 48px;
    color: #0daccc; /* Bright water blue */
    text-shadow: 0 0 15px rgba(5, 92, 206, 0.5);
    text-align: center;
    margin-top: 40px;
}

.container {
    max-width: 800px; /* Narrower for easier reading */
    margin: 40px auto;
    padding: 50px;
    /* Frosted glass effect (Glassmorphism) */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.story-text {
    font-family: 'Merriweather', serif; /* Serif fonts are better for long stories */
    font-size: 1.2rem;
    line-height: 1.8; /* Increased line height for readability */
    color: #d1e8ff;
    text-align: left; /* Left-aligned is much better for reading than center */
}

/* Style for paragraph breaks */
.story-text p {
    margin-bottom: 1.5em;
}

/* Enhance the "pool vibe" for specific keywords */
.blue, .water {
    color: #00d4ff;
    text-shadow: 0 0 5px rgba(0, 212, 255, 0.8);
}

.kiss, .pink {
    color: #ff69b4;
}

/* Customize scrollbar to match the theme */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #04101d;
}
::-webkit-scrollbar-thumb {
    background: #00d4ff;
    border-radius: 5px;
}