:root {

    /* Colors */
    --lbs-body-color: #34323c;
    --lbs-background-color: #cbcbcb;
    --lbs-neutral-color: #e4e5e6;
    --lbs-accent-color: #438072;
    --lbs-attention-color: #2fab91;
    --lbs-highlight-color: #85a17d;

    /* Fonts */
    --lbs-font-family: georgia, serif;

    /* Font Colors */
    --lbs-font-lite: rgb(255, 255, 255);
    --lbs-font-dark: rgb(0, 0, 0);

    /* Link Colors */
    --lbs-link-color: var(--lbs-attention-color);
    --lbs-link-hover-color: var(--lbs-attention-color);
    --lbs-link-active-color: var(--lbs-attention-color);

    /* Font Size */
    --lbs-font-size-base: 14px;
    --lbs-font-size-small: 12px;
    --lbs-font-size-medium: 14px;
    --lbs-font-size-large: 16px;
    --lbs-font-size-xlarge: 18px;
    --lbs-font-size-2xlarge: 20px;
    --lbs-font-size-3xlarge: 72px;

    /* Font Weight */
    --lbs-font-weight-light: 300;
    --lbs-font-weight-normal: 400;
    --lbs-font-weight-medium: 500;
    --lbs-font-weight-semibold: 600;
    --lbs-font-weight-bold: 700;
    --lbs-font-weight-extra-bold: 800;
    --lbs-font-weight-ultra-bold: 900;

    /* Line height */
    --lbs-line-height-base: 1.5;
    --lbs-line-height-small: 1.25;
    --lbs-line-height-medium: 1.5;
    --lbs-line-height-large: 1.5;
    --lbs-line-height-xlarge: 1.5;
    --lbs-line-height-2xlarge: 1.5;
    --lbs-line-height-3xlarge: 1.5;

}

body {
    background-color: var(--lbs-body-color);
    color: var(--lbs-neutral-color);
    font-size: var(--lbs-font-size-base);
    font-weight: var(--lbs-font-weight-base);
    line-height: var(--lbs-line-height-base);
    margin: 0;
    padding: 0;
}

a:link {
    color: var(--lbs-link-color);
    text-decoration: none;
}

a:is(:hover, :focus) {
    color: var(--lbs-link-hover-color);
    text-decoration: underline;
}

a:is(:active, :visited) {
    color: var(--lbs-link-active-color);
    text-decoration: underline;
}

/* Grid Template */
.container {
    /* max-width: 1280px;
    background-color: var(--lbs-neutral-color); */
    color: var(--lbs-font-lite);
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr auto;
    grid-template-rows: 180px 2fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        ". header header header ."
        ". blog blog blog ."
        ". footer footer footer .";
    margin: 0 auto;
}

.blog {
    background-color: var(--lbs-background-color);
    max-width: 1280px;
    min-width: 640px;
    padding: 0.5rem 1rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: column;
    grid-template-areas:
    "article";
    grid-area: 2 / 2 / 3 / 5;
}

.article {
    background-color: var(--lbs-neutral-color);
    color: var(--lbs-font-dark);
    border-radius: 3px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: min-content min-content min-content;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "author title publish_date"
        "summary summary summary"
        "post post post";
    grid-area: article;
}

.author {
    background-color: var(--lbs-neutral-color);
    color: var(--lbs-font-dark);
    border-radius: 3px;
    text-align: left;
    margin: 0.5em;
    grid-area: author;
}

.publish_date {
    background-color: var(--lbs-neutral-color);
    color: var(--lbs-font-dark);
    border-radius: 3px;
    margin: 0.5em;
    text-align: right;
    grid-area: publish_date;
}

.title {
    background-color: var(--lbs-neutral-color);
    color: var(--lbs-font-dark);
    border-radius: 3px;
    margin: 0.5em;
    text-align: center;
    grid-area: title;
}

.summary {
    background-color: var(--lbs-neutral-color);
    color: var(--lbs-font-dark);
    border-radius: 3px;
    margin: 0.25em 0.5em;
    height: fit-content;
    text-align: justify;
    grid-area: summary;
}

.post {
    grid-area: post;
    margin: 0.25em 0.5em;
    height: fit-content;
}

.page_header {
    align-items: center;
    background-color: var(--lbs-accent-color);
    color: var(--lbs-font-lite);
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: var(--lbs-font-size-3xlarge);
    font-weight: var(--lbs-font-weight-ultra-bold);
    grid-area: 1 / 2 / 2 / 5;
}

/* .page_footer {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 0.5rem auto;
    grid-area: 3 / 1 / 4 / 6;
} */

.page_footer {
    background-color: var(--lbs-accent-color);
    color: var(--lbs-font-dark);
    font-size: var(--lbs-font-size-large);
    font-weight: var(--lbs-font-weight-semi-bold);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: min-content;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "copyright contact social";
    grid-area: 3 / 2 / 4 / 5;
}

.left_header {
    grid-area: 1 / 1 / 2 / 2;
}

.right_header {
    grid-area: 1 / 5 / 2 / 6;
}

.left_footer {
    grid-area: 3 / 1 / 4 / 2;
}

.right_footer {
    grid-area: 3 / 5 / 4 / 6;
}

.copyright {
    grid-area: copyright;
}

.contact {
    grid-area: contact;
}

.social {
    grid-area: social;
}

/* End of Grid template */

ul {
    list-style-type: none;
    margin: 0;
}