/* define colors */
:root {
    --link-hover-color: #f9bb59;
    --light-gray:       #828282;
    --lighter-gray:     #d9cbbc;
    --color-white:      #dfc48c;
    --color-black:      #170e21;
    --color-red:        #9c5c5a;
    --color-green:      #8cc495;
    --color-yellow:     #f0e0aa;
    --color-blue:       #8ab6c2;
    --color-purple:     #94a9d9;
    --color-cyan:       #7eb5ac;

}

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

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

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(--color-white);
    background-color: var(--color-black);
    tab-width: 4;
    padding: 15px;
    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;
}

nav ul {
    padding: 0px;
}

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

/* terminal colors and effects */
.underline {
    text-decoration: underline;
}

.bold {
    font-weight: bold;
}

.blink {
    text-decoration: blink;
}

.reset {
    color:var(--color-black);
}

.bg-reset {
    background-color: var(--color-black);
}

.inverted {
    color: var(--color-black);
}

.bg-inverted {
    background-color: var(--color-white);
}

.dimgray {
    color: var(--color-black);
}

.red {
    color: var(--color-red);
}

.green {
    color: var(--color-green);
}

.yellow {
    color: var(--color-yellow);
}

.blue {
    color: var(--color-blue);
}

.purple {
    color: var(--color-purple);
}

.cyan {
    color: var(--color-cyan);
}

.white {
    color: var(--color-white);
}

.bg-black {
    background-color: var(--color-black);
}

.bg-red {
    background-color: var(--color-red);
}

.bg-green {
    background-color: var(--color-green);
}

.bg-yellow {
    background-color: var(--color-yellow);
}

.bg-blue {
    background-color: var(--color-blue);
}

.bg-purple {
    background-color: var(--color-purple);
}

.bg-cyan {
    background-color: var(--color-cyan);
}

.bg-white {
    background-color: var(--color-white);
}