/* define colors */
:root {
    --light-gray:       #828282;
    --lighter-gray:     #d9cbbc;
    --code-foreground:  #dfc48c;
    --code-background:  #170e21;
    --link-hover-color: #f9bb59;
}

body {
    width: 40em;
    max-width: 95vw;
    line-height: 135%;
    font-family: sans-serif;
    margin-left: auto;
    margin-right: auto;
}

/* set top and bottom margins for posts */
main {
    margin: 50px 0 50px;
}

time {
    color: var(--light-gray);
    font-size: smaller;
}

blockquote {
    border-left: 2px solid var(--light-gray);
    padding-left: 10px;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
}

table {
    margin: auto;
}

article table, article th, article td {
    border: 1px solid var(--light-gray);
    border-collapse: collapse;
}

article th, article td {
    padding: 5px;
}

pre {
    overflow-x: auto;
    color: var(--code-foreground);
    background-color: var(--code-background);
    tab-width: 4;
    padding: 20px;
    line-height: initial;
}

hr {
    border: none;
    height: 1px;
    color: var(--lighter-gray);
    background-color: var(--lighter-gray);
}

a {
    text-decoration: underline;
    color: black;
}

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

/* navigation */
header, footer {
    text-align: center;
}

article header {
    text-align: left;
}

nav ul {
    padding: 0;
}

nav li {
    display: inline;
    list-style-type: none;
    margin: 15px;
}