html {
    scroll-behavior: smooth;
}

p {
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 3;
    -webkit-hyphenate-limit-chars: 6 3 3;
    -webkit-hyphenate-limit-lines: 2;
    -webkit-hyphenate-limit-last: always;
    -webkit-hyphenate-limit-zone: 8%;

    -moz-hyphens: auto;
    -moz-hyphenate-limit-chars: 6 3 3;
    -moz-hyphenate-limit-lines: 2;
    -moz-hyphenate-limit-last: always;
    -moz-hyphenate-limit-zone: 8%;

    -ms-hyphens: auto;
    -ms-hyphenate-limit-chars: 6 3 3;
    -ms-hyphenate-limit-lines: 2;
    -ms-hyphenate-limit-last: always;
    -ms-hyphenate-limit-zone: 8%;

    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    hyphenate-limit-lines: 2;
    hyphenate-limit-last: always;
    hyphenate-limit-zone: 8%;
}

* {
    margin: 0;
}

p {
    color: #262626;
}

p,
ul,
div.list,
ol {
    margin-bottom: 0.9em;
}


/* reset         */
h1,
h2,
h3,
h4,
h5,
h6 {

    padding: 0;
    margin-bottom: 0.2em;
    color: #303030;
}

h2,
h3,
h4,
h5,
h6 {
    margin-top: 1.5em;
}

ul {
    /* list-style: none; */
    padding: 0;
    margin-left: 1em;
}

.holygrail-left ul {
    margin: 0;
    margin-top: 0.5em;
    list-style: none;
}

/* utilities */
.pa1 {
    padding: 1em;
}

.m1 {
    margin: 1em;
}

.mt1 {
    margin-top: 1em;
}

.pr1 {
    padding-right: 1em;
}

.pl1 {
    padding-left: 1em;
}

.pt1 {
    padding-top: 1em;
}

.tr {
    text-align: right;
}

.muted {
    color: #777;
    font-size: 0.9rem;
}

/* holy grail design */
main {
    margin: 1em auto;
}

.holygrail-body {
    display: flex;
    flex-direction: column;
    color: #111;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica, 'helvetica neue', roboto, noto, 'segoe ui', arial, sans-serif;
    color: #443e3c;
    /* max-width: 50em; */
    max-width: 800px;
    margin: 1em auto;
    font-size: 1.1em;
}

p,
li {
    box-sizing: border-box;
    /*    font-family: "Times", "Times New Roman", serif;
    letter-spacing: 0.1px;
    font-size: 1.2em;
    color: #333;
*/
    color: #444;
    font-size: 1rem;
    line-height: 1.7;
}

.holygrail-left {
    order: -1;
}


@media (min-width: 850px) {
    .desktop>div {
        border-right: 1px solid black;
        position: fixed;
        width: 140px;
    }

    .holygrail-body {
        flex-direction: row;
        flex: 1;
    }

    .holygrail-content {
        flex: 1;
    }

    .holygrail-left,
    .holygrail-right {
        /* 12em is the width of the columns */
        flex: 0 0 12em;
    }
}

/* mobility */
.desktop {
    display: none;
}

.mobile {
    display: block;
}

@media (min-width: 850px) {
    .mobile {
        display: none;
    }

    .desktop {
        display: block;
    }

    .holygrail-left {
        max-width: 160px;
    }
}

/*base stuff*/
.writing {
    max-width: 35em;
}

.list>div {
    grid-template-columns: 1fr min-content;
    display: grid;
    grid-column-gap: 5px;
    padding-top: 5px;
}

.list>div div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list>div div:last-child {
    padding-right: .25em;
    color: #888;
    font-size: 90%;
    padding-top: 1px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.012em;
}

img {
    width: 100%;
    max-width: 640px
}


a {
    /*    color: #444;
    text-decoration-skip-ink: auto;*/
    color: #443e3c;
    text-decoration: none;
    border-bottom: 1px solid #ddd;
}


.list a {
    text-decoration: none;
    border-bottom: none;
}


.writing a:visited {
    color: #888
}

a:hover {
    text-decoration: underline;
    color: #888;
}

h1 {
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: .004em;
    font-size: 1.4em;
}

h2 {
    line-height: 1.25;
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: .009em;
    font-size: 1.3em;
}

h3 {
    line-height: 1.25;
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: .009em;
    font-size: 1.2em;
}

h4 {
    line-height: 1.25;
    font-weight: 600;
    font-size: 1.1em;
}

h5 {
    line-height: 1.25;
    font-weight: 600;
    font-size: .875rem
}

pre {
    margin-bottom: 20px;
    vertical-align: text-bottom;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    padding: 1em;
    text-shadow: none;
    background: #f5f7f9;
}


pre>code {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    white-space: pre;
    word-break: normal;
}

pre code {
    background-color: transparent;
    border: 0;
    display: inline;
    line-height: inherit;
    margin: 0;
    max-width: auto;
    overflow: visible;
    padding: 0;
    word-wrap: normal;
}

pre {
    word-wrap: normal;
    background-color: #f6f8fa;
    border-radius: 3px;
    line-height: 1.45;
    overflow: auto;
    padding: 16px;
}

code {
    background-color: rgba(27, 31, 35, .05);
    border-radius: 3px;
    margin: 0;
    padding: .2em .4em;
}

figure {
    margin: 0;
    display: block;
    padding-top: 1em;
    padding-bottom: 1em;
    /* padding-top: 1.5em;
    padding-bottom: 1.5em; */
    text-align: center;
}

figcaption {
    color: #777;
    font-size: 0.9rem;
    text-align: center;
}

blockquote {

    /* background-color: #ccc;
    color: #39424E; */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin: 0;

}

h3 a {
    text-decoration: none;
}

input,
textarea {
    font-size: 0.8em;
    font-family: 'proxima-nova-soft', sans-serif;
    border: 1px solid #ddd;
    background: #fff;
    padding: 0.5em;
    transition: all 0.3s ease-in-out;
    width: 100%;
}

.fr {
    float: right;
}

.title,
.subtitle {
    padding-bottom: 12px;
}

.titleimage {
    padding-bottom: 18px;
}

.subtitle {
    color: #D3D3D3;
    font-size: 0.9em;
}

.description {
    font-style: italic;
}

.mobile {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
    margin: 0;
}

.holygrail-left {
    padding-bottom: 1em;
}


.topnav {
    padding-left: 1em;
    padding-right: 1em;
}


.footnotes {
    padding-top: 2em;
}

.footnotes hr {
    margin-bottom: 1em;
}

.post {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 2em;
}

.post>.post-side {
    padding-top: 0.25em;
    margin-right: 20px;
    min-width: 50px;
}

.post>.post-content {
    width: 100%;
}

.post-avatar {
    width: 50px;
}

footer {

    padding: 1em 0 1em;
    margin-top: 2em;
    border-top: 1px solid #000;

}

/* book reviews */
.star {
    width: 13px;
    height: 12px;
    display: inline-block;
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTYuMzA5IDkuMjJMMi40MDkgMTJsMS40NC00LjU2N0wwIDQuNTgzbDQuNzg4LS4wNDJMNi4zMDggMCA3LjgzIDQuNTRsNC43ODkuMDQ0LTMuODUgMi44NDlMMTAuMjA5IDEyeiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+)
}

.books>div,
.writing>div {
    display: grid;
    grid-column-gap: 5px;
    padding-top: 5px
}

.books>div {
    grid-template-columns: 1fr .75fr min-content 70px
}

.books a {
    font-weight: 500;
    letter-spacing: -.015em
}

.books>div div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.books>div div:nth-child(3) {
    padding-right: .25em;
    color: #333;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.012em
}

@media screen and (max-width:640px) {
    .books>div {
        grid-template-columns: 1fr .75fr 70px
    }

    .books>div div:nth-child(3) {
        display: none
    }
}

h1 span {
    background-color: #fbf1a9;
}

.reviewRating {
    padding-right: .25em;
    color: #333;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.012em
}


.json-key {
    color: brown;
}

.json-value {
    color: navy;
}

.json-boolean {
    color: teal;
}

.json-string {
    color: olive;
}



.container {
    margin: 0 auto;
    position: relative;
}

.padded {
    padding: 2rem;
}

.push-down-large {
    margin-bottom: 3rem;
}

.header-card-light {
    -webkit-box-shadow: 0 1px 25px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(13, 13, 13, 0.29);
    -moz-box-shadow: 0 1px 25px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(13, 13, 13, 0.29);
    box-shadow: 0 1px 25px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(13, 13, 13, 0.29);
    background-color: #fdfdfd;

}

.push-down-small {
    margin-bottom: 1rem;
}

.text-right {
    text-align: right;
}


.bg-left {
    background-color: #aaa;
    float: left;
    width: 100%;
    height: 100%;
}


video {
    max-width: 100%;
}