@import url('https://fonts.googleapis.com/css2?family=BBH+Hegarty&family=Funnel+Display:wght@300..800&display=swap');

body {
    --bg-color: #a6c4a5;
    --dark-color: #400016;
    --light-color: #E5DCBD;
    --link-color: #547271;
    --visited-color: #685075;

    background-color: var(--bg-color);
    padding: 5px 15px 0 5px;

    text-align: left;
    line-height: 1.2;

    font-family: "Funnel Display", sans-serif;
    color:var(--dark-color);
    font-size: 20px;
    font-weight: 400;
}

body * {
    margin: auto 0;
}

header,
main div,
main article {
    margin: 0 auto 30px auto;
    padding: 10px;

    background-color: var(--light-color);
    outline: 5px solid var(--dark-color);
    box-shadow: 10px 10px 0 5px var(--dark-color);

    max-width: 1024px;
}

/* TEXT FORMATTING */
h1 {
    font-size: 50px;
    font-weight: 400;
    text-transform: uppercase;

    font-family: "BBH Hegarty", sans-serif;
}

h2 {
    background-color: var(--dark-color);
    color: var(--light-color);

    font-size: 32px;
    font-weight: 800;
}

em,
mark  {
    background-color: var(--dark-color);
    color: var(--light-color);
}

a {
    color: var(--link-color);
}

a:visited {
    color: var(--visited-color);
}

hr {
    background-color: var(--dark-color);

    height: 5px;
    border: 0;
}

/* LIST FORMATTING */
ul {
    text-align: left;
}

/* ARTICLE STYLING */
article > p {
    text-align: left;
    text-indent: 60px;
}

article p:has(time) {
    text-indent: 0;
    font-weight: 800;

    background-color: var(--dark-color);
    color: var(--light-color);

    padding: 0 5px;
}

article p time {
    color: var(--light-color);
}

/* BLOCK QUOTE STYLING */
blockquote {
    background-color: var(--dark-color);

    max-width: 400px;
    margin: 5px 0;
    padding: 15px;
}

blockquote p {
    color: var(--light-color);

    text-align: left;
    font-size: 16px;
}

blockquote p::before {
    content: "\201C";
}

blockquote p::after {
    content: "\201D";
}

blockquote + p {
    text-align: right;

    max-width: 430px;
    margin: -5px 0 0 0;
}

blockquote + p::before {
    content: "—";
}

/* HEADER STYLING */
header a {
    text-decoration: none;
}

header a:visited {
    color: var(--light-color);
}

header nav * {
    background-color: var(--dark-color);
    color: var(--light-color);

    font-family: "BBH Hegarty", sans-serif;
    font-size: 32px;
    font-weight: 400;
    text-transform: uppercase;

    padding: 0 5px;
}

/* HOME STYLING */
.post-list {
    font-size: 26px;
}