/* Base Styles & Vibrant Blue Vibe */
body {
    background-color: #0044cc; /* Pure, vibrant royal blue */
    color: #ffffff; /* Clean white for general text readability */
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header {
    text-align: center;
    padding: 25px 20px 10px 20px;
}

header h1 {
    font-size: 2.5rem;
    letter-spacing: 4px;
    margin: 0;
    color: #ff6600; /* Bright orange for your title */
    text-shadow: 2px 2px 0px #000000; /* Black shadow to make the orange pop */
}

header .subtitle {
    font-size: 0.9rem;
    color: #ff9933; /* Slightly lighter orange for the subtitle */
    margin: 5px 0 0 0;
}

/* Comic Page Container */
.comic-container {
    width: 100%;
    max-width: 800px;
    margin: 15px 0;
    text-align: center;
}

.comic-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    border: 4px solid #ff6600; /* Solid orange border around your comic art */
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* Navigation Button Layout */
.comic-nav {
    display: flex;
    gap: 10px;
    margin: 10px 0;
}

/* Style for clickable navigation buttons */
.comic-nav a {
    background-color: #002b80; /* Deeper blue for the buttons */
    color: #ff9933; /* Orange button text */
    text-decoration: none;
    padding: 8px 16px;
    border: 2px solid #ff6600; /* Orange button border */
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: bold;
    transition: all 0.2s ease;
}

/* Hover effect: Turns the button orange with dark blue text */
.comic-nav a:hover {
    background-color: #ff6600;
    color: #002b80;
    box-shadow: 0 0 8px rgba(255, 102, 0, 0.6);
}

/* Style for disabled buttons (e.g., 'Prev' on Page 1) */
.comic-nav .disabled {
    background-color: #003399; /* Faded blue for inactive buttons */
    color: #0055ff; /* Darker blue text to look unclickable */
    padding: 8px 16px;
    border: 2px solid #002b80;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: not-allowed;
}

footer {
    text-align: center;
    padding: 30px 20px;
    font-size: 0.8rem;
    color: #b3ccff;
}

footer a {
    color: #ff9933;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}