/* Layout & Style for Blog Articles */


/* Style for the article */
article {
    display: flex; /* Enables Flexbox for alignment */
    flex-direction: column; /* Stacks child elements vertically */
    align-items: center; /* Horizontally centers content within the header */
    background-color: #a3fff3;
    border-radius: 10px;
    padding-top: 2%;
    padding-bottom:1.5%;
    margin-bottom: 3%;
}


.article-header {
    width: 1000px; /* Sets a fixed width for the header container */
    margin-top: 0; 
    margin-bottom: 15px;
    display: flex; /* Enables Flexbox for alignment */
    flex-direction: column; /* Stacks child elements vertically */
    align-items: center; /* Horizontally centers content within the header */
    gap: 10px; /* Consistent spacing */
}

.article-header .article-metadata h1 {
    color: #333; 
    font-family: 'Inconsolata', monospace;
    font-size: 2.5rem; 
    margin-top: 0;
    margin-bottom: 20px; 
}

.article-header .article-metadata .publish-date {
    color: #333; 
    font-family: 'Inconsolata', monospace;
    font-size: 1.25rem; 
    margin-top: 0; /* Remove default margin */
    margin-bottom: 20px; 
}
/* Style for the main photo container */
.main-photo {
    width: 100%; /* Allows the image container to adapt to the header width */
    display: flex; /* Enables Flexbox for alignment */
    justify-content: center; /* Centers the image inside the container */
    align-items: center; /* Vertically centers content if needed */
}

/* Style for the image itself */
.main-photo img {
    width: 700px; /* Sets the desired width for the image */
    height: 470px; /* Maintains the image's aspect ratio */
    border-radius: 10px; /* Adds rounded corners */
    margin: 0; /* Removes extra margins to ensure alignment */
}

/* Style the article content aka the blog post */

.article-content {
    width: 800px; /* Sets a fixed width for the article content container */
    margin: 0;
    display: flex; /* Enables Flexbox for alignment */
    flex-direction: column; /* Stacks child elements vertically */
    align-items: left; /* Horizontally centers content within the header */
}

.article-content p {
    color: #333; 
    font-family: 'Inconsolata', monospace;
    font-size: 1rem; 
    text-indent: 2rem;
    letter-spacing: 0.04em;
    line-height: 1.5;
}

.article-content h2 {
    color: #333; 
    font-family: 'Inconsolata', monospace;
    font-size: 2rem;
    font-weight: 900;
    margin-top:15px;
    margin-bottom:0;
}

.article-content h3 {
    color: #333; 
    font-family: 'Inconsolata', monospace;
    font-size: 1.25rem;
    font-weight: 750;
    margin-top:20px;
    margin-bottom:0;
}

.article-image {
    display: flex; /* Enables Flexbox for alignment */
    flex-direction: column; /* Stacks child elements vertically */
    align-items: center; /* Horizontally centers content within the header */
    gap: 10px; /* Spacing between the image and the caption */
    margin-top:0;
}

.article-image img{
    height:300px;
    width: auto;
    border-radius: 5px;
}

.article-image figcaption {
    color: #333; 
    font-family: 'Inconsolata', monospace;
    font-size: .9rem;
    font-weight: 400;
}

.article-content .small-list {
    list-style-type: square;
    display: flex;
    flex-direction: column;
    align-items: left;
    margin-left: 10%;
    line-height: 1.5; /* Adds spacing between list items */
}

.article-content .small-list li {
    font-family: 'Inconsolata', monospace;
    font-size: 1rem; /* Matches your paragraph font size */
    color: #333; /* Ensures the color matches the text */
    display: list-item; /* Ensures bullets are shown */
    width: auto; /* Let list items size dynamically */
}

.article-content .ordered-list li {
    font-family: 'Inconsolata', monospace;
    font-size: 1rem; /* Matches your paragraph font size */
    color: #333; /* Ensures the color matches the text */
    display: list-item; /* Ensures bullets are shown */
    width: auto; /* Let list items size dynamically */
}

/* Ensure the code starts at the left */
/* Ensure the entire code block aligns to the left */
pre {
    text-align: left;
    padding: 0px !important;
    border-radius: 5px;
    font-family: 'Courier New', Courier, monospace !important;
    overflow-x: auto !important;
    white-space: pre !important; /* Ensures line breaks are preserved */
    margin: 0 !important;
    display: block !important; /* No flex */
    width: 100% !important;
    max-width: 800px !important;
}

pre code {
    font-size: 11px !important;
    display: block;
    text-align: left;
    white-space: pre !important; /* Ensures line breaks are preserved */
}