/* Styling the container for readability */
.article-container {
    max-width: 100%;
    margin: 40px auto;
    padding: 20px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #333333;
    line-height: 1.7;
    background-color: #ffffff;
}

/* Headings Design */
.article-container h1 {
    font-size: 2.5rem;
    color: #0f172a; /* Dark Navy Blue */
    line-height: 1.3;
    margin-bottom: 24px;
    font-weight: 800;
    border-bottom: 4px solid #0ea5e9; /* Light blue accent bar */
    padding-bottom: 15px;
}

.article-container h2 {
    font-size: 1.8rem;
    color: #1e293b;
    margin-top: 40px;
    margin-bottom: 16px;
    font-weight: 700;
    position: relative;
}

.article-container h3 {
    font-size: 1.3rem;
    color: #0f766e; /* Teal Green for technical terms */
    margin-top: 25px;
    margin-bottom: 12px;
    font-weight: 600;
}

/* Paragraphs */
.article-container p {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: #475569;
}

/* Custom design for links or highlighted terms instead of ugly blue underline */
.article-container u {
    text-decoration: none;
    color: #0284c7;
    font-weight: 600;
    border-bottom: 2px dotted #0284c7;
}

/* Lists Styling (UL & OL) */
.article-container ul, 
.article-container ol {
    background-color: #f8fafc; /* Subtle grey background for lists */
    padding: 25px 25px 25px 40px;
    border-radius: 8px;
    margin-bottom: 25px;
    border-left: 4px solid #0f766e;
}

.article-container li {
    margin-bottom: 12px;
    font-size: 1.05rem;
    color: #334155;
}

.article-container li strong {
    color: #0f172a;
}
.article-container strong {
    font-weight: 600;
}

/* Responsive adjustments for mobile screens */
@media (max-width: 768px) {
    .article-container {
        padding: 15px;
        margin: 10px auto;
    }
    .article-container h1 {
        font-size: 2rem;
    }
    .article-container h2 {
        font-size: 1.5rem;
    }
}