body {
    font-family: 'Bangers', cursive; /* A comic-like font for that superhero vibe */
    background-color: #1a1a1a; /* A deep, dark background to make colors pop */
    color: #f4f4f4; /* Bright text for contrast */
    line-height: 1.6;
    padding: 20px;
}

.story-container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    background-color: #2a2a2a; /* Darker container for focus */
    border-radius: 8px; /* Smooth edges */
    box-shadow: 0px 0px 15px 5px rgba(0, 0, 255, 0.2); /* Blue glow for a dramatic effect */
}

.story-item {
    margin-bottom: 40px; /* Space between story items */
}

.story-item h2 {
    color: #ffcc00; /* A heroic gold for titles */
    margin-bottom: 10px;
    text-shadow: 2px 2px 2px #000; /* Text shadow for depth */
    font-size: 32px; /* Larger font size for impact */
}

.story-item img {
    max-width: 100%; /* Ensure images are not larger than their container */
    height: auto;
    border-radius: 10px; /* Slightly rounded corners for a softer look */
    box-shadow: 0 8px 16px rgba(0,0,0,0.5); /* More pronounced shadow for depth */
}

.story-item p {
    background-color: #333; /* Darker background for text for contrast */
    color: #e6e600; /* Bright yellow text for readability and flair */
    padding: 15px;
    border-radius: 5px; /* Slightly rounded corners for the description box */
    box-shadow: 0 4px 8px rgba(0,0,0,0.5); /* Stronger shadow for text box */
    border-left: 4px solid #ffcc00; /* A golden accent line on the left */
    margin-top: 10px;
    font-size: 24px; /* Larger font size for impact */
}

/* Responsive Image Gallery */
@media (max-width: 768px) {
    .story-container {
        padding: 10px;
    }

    .story-item h2 {
        font-size: 20px; /* Adjust title size for smaller screens */
    }

    .story-item p {
        font-size: 16px; /* Adjust text size for readability on smaller screens */
    }
}