body {
    --main-bg-color: papayawhip;
    --sheet-bg-color: #fffdf6;
    --sheet-shadow-color: #e1c596;
    --sheet-border-color: #bb9961;
    --link-color: #06a;
    --text-color: black;
}

body.dark {
    --main-bg-color: #151515;
    --sheet-bg-color: #2f2f2f;
    --sheet-shadow-color: #0d0d0d;
    --sheet-border-color: #111;
    --link-color: #30a5f2;
    --text-color: #ececec;
}

@media (prefers-color-scheme: dark) {
    body {
        --main-bg-color: #151515;
        --sheet-bg-color: #2f2f2f;
        --sheet-shadow-color: #0d0d0d;
        --sheet-border-color: #111;
        --link-color: #30a5f2;
        --text-color: #ececec;
    }
}

body {
    background-color: var(--main-bg-color);
    font-family: times;
    color: var(--text-color);
}

body > div {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

nav > ol {
    margin: 0;
    padding-left: 1em;
}

nav > ol > li {
    display: inline-block;
    position: relative;
    top: 1px;
    background-color: var(--sheet-bg-color);
    border: 1px solid var(--sheet-border-color);
    margin-right: 6px;
}

nav > ol > li.current {
    box-shadow: var(--sheet-shadow-color) 8px 2px 0 -3px;
    border-bottom: 1px solid var(--sheet-bg-color);
}

nav > ol > li > a {
    display: inline-block;
    padding: 7px 8px 2px 8px;
    color: inherit !important;
    text-decoration: none;
}

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

.tag-list {
    padding: 0;
}

.tag-list > li {
    display: inline-block;
}

.tag-list > li::after {
    content: ",";
}

.tag-list > li:last-of-type:after {
    content: ".";
}

.tag-list > li:first-of-type {
    text-transform: capitalize;
}

article {
    background-color: var(--sheet-bg-color);
    border: 1px solid var(--sheet-border-color);
    padding: 0 1em;
    box-shadow: var(--sheet-shadow-color) 5px 5px;
    overflow: auto; /* Corrects float when article is short */
}

article.listing li {
    margin-bottom: 0.5em;
}

.e-content {
  hyphens: auto;
}

.h-review .u-photo {
    float: right;
    width: 150px;
    margin-left: 1.5em;
    margin-bottom: .5em;
    border: 1px solid var(--sheet-border-color);
}

.h-review .h-product {
    font-style: italic;
    font-size: smaller;
    margin-top: -1em;
}

.dt-published {
    font-style: italic;
}

.h-entry img.img-full-width {
    width: 100%;
}

.h-entry img.img-half-width {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.h-entry img.img-quarter-width {
    width: 25%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}