:root {
    --accent: #ece2d0;
    --accent2: #5cf59e;
    --accent3: #ffb6c1;
    --accent4: #deb887;
    --bg-color: #130918;
    --bg-blue: #c6e7ff;
    --bg-green: #34cf79;
    --text-color: #ece2d0;
    --gray: #666666;
    --yellow: #c39e5f;
    --link-color: var(--yellow);
}

a,
a:hover {
    color: var(--yellow);
}

a:visited,
a:visited:hover {
    color: var(--accent4);
}

body {
    font-size: 20px;
    line-height: 1.7;
}

#blog header {
    align-items: end;
    display: flex;
    justify-content: space-between;
}

#blog header h1 {
    color: var(--accent2);
}

header {
    & > nav > a {
        color: var(--accent);
        padding: 10px;
        text-transform: capitalize;
    }

    & > nav > a:hover {
        color: var(--accent);
    }

    & > nav > a:visited {
        color: var(--accent);
    }

    & > nav > a:last-child {
        text-transform: uppercase;
    }
}

header hr {
    display: none;
}

#post h1,
.md h2 {
    color: var(--accent2);
}

#post article p {
    margin-bottom: 1.5rem;
}

#post img {
    border: 1px solid var(--gray);
    border-radius: 8px;
}

#post .pill {
    background-color: var(--accent4);
    border: none;
    color: var(--bg-color);
}

#post .pill a {
    color: var(--bg-color);
    text-decoration: none;
}

#post-footer {
    color: var(--gray);
    margin-top: 4rem;
    text-align: center;
}

@media (max-width: 720px) {
    #blog header {
        align-items: flex-start;
        flex-direction: column;

        & > nav {
            margin-top: 1rem;
        }

        & > nav > a:first-child {
            padding-left: 0;
        }

        & > nav > a:last-child {
            padding-right: 0;
        }
    }
}