html {
    scroll-behavior: smooth;
}

html,
body {
    font: 16px/1.6 'Courier New', monospace;
}

body {
    font-weight: 400;
}

h1,
h2,
h3 {
    font-weight: 200;
    font-family: 'Garamond';
}

.headerlink {
    display: none;
}

nav {
    font-size: 1rem;
    font-style: italic;
}

/* typo rythm */
html,
.root {
    font-size: 16px;
    line-height: 28px;
}

body,
.article {
    font-size: 1rem;
    line-height: 1.75rem;
    margin: auto;
}

h1,
.h1 {
    font-size: 6.5625rem;
    line-height: 7rem;
    margin-top: 1.75rem;
    margin-bottom: 3.5rem;
}

h2,
.h2 {
    font-size: 3.5rem;
    line-height: 3.5rem;
    margin-top: 1.75rem;
    margin-bottom: 1.75rem;
}

h3,
.h3 {
    font-size: 1.875rem;
    line-height: 3.5rem;
    margin-top: 1.75rem;
    margin-bottom: 0rem;
}

h4,
.h4 {
    font-size: 1rem;
    line-height: 1.75rem;
    margin-top: 1.75rem;
    margin-bottom: 0rem;
}

h5,
.h5 {
    font-size: 1rem;
    line-height: 1.75rem;
    margin-top: 1.75rem;
    margin-bottom: 0rem;
}

p,
ul,
ol,
pre,
table,
blockquote {
    margin-top: 0rem;
    margin-bottom: 1.75rem;
}
p {
    max-width: 560px;
}

ul ul,
ol ol,
ul ol,
ol ul {
    margin-top: 0rem;
    margin-bottom: 0rem;
}

/* Let's make sure all's aligned */
hr,
.hr {
    border: 1px solid;
    margin: -1px 0;
}

a,
b,
i,
strong,
em,
small,
code {
    line-height: 0;
}

sub,
sup {
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}


/* table styles */
table {
    width: 100%;
    table-layout: auto;
    min-width: 1024px;
}

th {
    text-align: left;
    text-transform: capitalize;
}
tr.odd {
    background-color: rgba(0, 0, 0, 0.05);
}

th, td {
    vertical-align: top;
    padding: 4px 10px;
}

ul.dataview {
    padding: 0;
    margin: 0;
}

ul.dataview li {
    display: inline-block;
}

ul.dataview li span {
    font-size: 0.85rem;
    display: inline-block;
}
ul.dataview li span::after {
	content: ",";
}
ul.dataview li:last-child span::after {
	content: none;
}

.dataview.small-text {
    font-size: 0.75rem;
    position: relative;
    left: 0.2rem;
    top: -0.4rem;
}

pre.dataview {
    display: none;
}

@media (max-width: 1200px) {
    h1 {
        font-size: 3.19rem;
        line-height: 1.02em;
        padding-top: 0.176em;
        margin-bottom: 0.333em;
    }

    h2 {
        font-size: 2.38rem;
        line-height: 1.37em;
        padding-top: 0.342em;
        margin-bottom: 0.342em;
    }

    h3 {
        font-size: 1.75rem;
        line-height: 1.86em;
        padding-top: 0.571em;
        margin-bottom: 0.357em;
    }

    h4 {
        font-size: 1.31rem;
        line-height: 1.24em;
        padding-top: 0.286em;
        margin-bottom: 0.952em;
    }

    p {
        font-size: 1.00rem;
        line-height: 1.63em;
        padding-top: 0.500em;
        margin-bottom: 1.13em;
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 2.44rem;
        line-height: 1.33em;
        padding-top: 0.333em;
        margin-bottom: 0.333em;
    }

    h2 {
        font-size: 1.94rem;
        line-height: 1.68em;
        padding-top: 0.484em;
        margin-bottom: 0.355em;
    }

    h3 {
        font-size: 1.56rem;
        line-height: 1.04em;
        padding-top: 0.200em;
        margin-bottom: 0.840em;
    }

    h4 {
        font-size: 1.25rem;
        line-height: 1.30em;
        padding-top: 0.300em;
        margin-bottom: 1.00em;
    }

    p {
        font-size: 1.00rem;
        line-height: 1.63em;
        padding-top: 0.500em;
        margin-bottom: 1.13em;
    }
}

.text-sm {
    font-size: 0.75rem;
}

/* anchor styles */
/*main p a,
main ul a,
main ol a {
    position: relative;
    display: inline-block;
    z-index: 10;
    text-decoration: none;
    margin: 0 17px;
}
main p a:hover,
main ul a:hover,
main ol a:hover {
    color: white;
}
main p a:before,
main ul a:before,
main ol a:before {
    content: '';
    width: calc(100% + 30px);
    height: 100%;
    border: 1px solid #181818;
    position: absolute;
    left: -15px;
    top: -1px;
    border-radius: 20px;
    text-decoration: none;
    z-index: -1;
    transition: .25s;
}
main p a:hover:before,
main ul a:hover:before,
main ol a:hover:before {
    background: #181818;
}
main a.footnote-ref:before {
    content: none !important;
}
main a.footnote-ref:hover {
    color: black !important;
    text-decoration: underline;
}*/

/* layout */
body {
    padding: 2rem;
}

h1,
h2,
h3 {
    max-width: 1200px;
}

p,
ul,
ol,
blockquote,
figure {
    max-width: 768px;
}

blockquote p {
    margin: 0 0 1rem;
    padding: 0;
}

blockquote p:last-child {
    margin: 0;
}

blockquote a {
    color: white;
}

blockquote a:hover {
    color: black !important;
}

blockquote a:before {
    border-color: white !important;
}

blockquote a:hover:before {
    background-color: white !important;
}

pre,
blockquote {
    max-width: 768px;
    margin-left: 0;
    margin-right: 0;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.725);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.125);
    color: white;
    font-style: italic;
}

pre {
    font-size: 0.85rem;
    font-style: normal;
    white-space: pre-wrap;
    /* css-3 */
    white-space: -moz-pre-wrap;
    /* Mozilla, since 1999 */
    white-space: -pre-wrap;
    /* Opera 4-6 */
    white-space: -o-pre-wrap;
    /* Opera 7 */
    word-wrap: break-word;
    /* Internet Explorer 5.5+ */
}

li code,
p code {
    font-size: 0.85rem;
    padding: 0.125rem 0.25rem;
    background: rgba(0, 0, 0, 0.725);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.125);
    color: white;
    font-family: monospace;
}

figure {
    margin: 0;
}

p>img {
    width: 100%;
    margin-bottom: 0.5rem;
    max-width: 1024px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

figure>img {
    margin: 3rem 0rem 0.5rem;
    width: 100%;
    max-width: 1024px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

figure figcaption {
    width: 100%;
    margin: 0 0rem 3rem;
    font-style: italic;
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    body {
        padding: 1rem;
    }

    figure>img {
        margin: 1rem 0 0.5rem 0;
    }

    figure figcaption {
        margin: 0 0 1rem 0;
    }
}

/* styles */
body {
    color: black;
    background: rgba(239, 239, 239, 0.5);
}

a {
    color: black;
}

a.blogging-tag {
    font-size: 0.75rem;
    margin-right: 5px;
}

hr {
    border: none;
    border-bottom: 1px solid #e3e3e3;
    width: 100%;
    max-width: 120px;
    margin: 0;
}

/* lists */
ul,
ol {
    padding-left: 1.75rem;
}

ul {
    list-style-type: '—  ';
}

ul ul {
    padding-top: 0.25rem;
}

li p {
    margin: 0;
    padding: 0;
}

div.pages .page,
ul.nav-h {
    padding: 0;
    margin: 0;
    list-style: none;
    list-style-position: inside;
}

ul.nav-h li {
    display: inline-block;
    margin-left: .25rem;
}

/*ul.nav-h li a {
    position: relative;
    top: 0;
    display: inline-block;
    background: black;
    color: white;
    padding: 1px 15px;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.125);
    transition: 0.25s;
    text-decoration: none;
}

ul.nav-h a:hover {
    color: white;
    top: -2px;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.075);
    text-decoration: none;
}*/

/* nav */
nav {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

@media (max-width: 786px) {
    nav {
        display: block;
    }

    nav>* {
        margin-bottom: 1rem;
    }

    ul.nav-h li {
        margin-left: 0rem;
        margin-right: 1rem;
    }
}

/* gallery */
p.gallery {
    max-width: none;
    column-count: 3;
}

@media (max-width: 1280px) {
    p.gallery {
        column-count: 2;
    }
}

@media (max-width: 768px) {
    p.gallery {
        column-count: 1;
    }
}

/* footer */
footer {
    margin-top: 4rem;
}

footer p {
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
}

footer p.flex {
    display: flex;
    column-gap: 10px;
    align-items: center;
}

.footnotes li,
.footnotes li p {
    font-size: 0.75rem
}

.footnotes .footnote-back {
    margin-left: 0.25rem
}

.footnotes .footnote-back:hover {
    color: black;
    text-decoration: underline;
}

.footnotes .footnote-back:before {
    content: none;
}