/* article.css */

/* Existing Styles */
#articleContent {
    padding: 10px 20px; /* Reduced top padding to eliminate extra space */
    margin: 0 auto;
    background-color: transparent; /* Changed from #ffffff to transparent */
    border-radius: 8px;
}

/* Markdown content styling */
#articleContent h1,
#articleContent h2,
#articleContent h3,
#articleContent h4,
#articleContent h5,
#articleContent h6 {
    color: #e8491d;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-weight: bold; /* Ensure headers are bold */
    /* Removed font-size definitions to inherit from index.css */
}

main h1 {
    font-size: 2em;
}

main h2 {
    font-size: 1.75em;
}

main h3 {
    font-size: 1.25em;
}

/* Rest of your existing styles */
#articleContent p {
    line-height: 1.6;
    color: #555555;
}

#articleContent a {
    color: #1e90ff;
    text-decoration: none;
}

#articleContent a:hover {
    text-decoration: underline;
}

#articleContent pre {
    background-color: #f5f5f5;
    padding: 10px;
    overflow-x: auto;
    border-radius: 4px;
}

#articleContent code {
    background-color: #f5f5f5;
    padding: 2px 4px;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
}

/* Style for error messages */
#errorMessage {
    color: #cc0000; /* Red text */
    font-weight: bold;
    text-align: center;
    padding: 10px 20px; /* Adjust padding for better readability */
    margin: 20px auto; /* Adjust margin to space out from other elements */
    max-width: 800px;
    /* Removed background-color, border, and other box styles */
}

/* Ensure hidden elements are not displayed */
.hidden {
    display: none;
}

.visible {
    display: block;
}

/* Graph Canvas Styling */
.graph-canvas {
    margin: 20px 0;
    max-width: 100%;
    height: 400px; /* Adjust height as needed */
}

/* Responsive adjustments */
@media (max-width: 600px) {
    #articleContent, #errorMessage {
        padding: 15px;
        margin: 20px;
    }

    .graph-canvas {
        height: 300px;
    }
}

/* Article Footer Styling */
#articleContent h6.article-footer {
    color: #888888; /* Light grey */
    margin-top: 20px;
    font-size: 0.875em; /* Smaller font size */
    font-weight: normal; /* Ensure normal weight */
}