/* #region reset */
/* --------------------------- */
/* CSS RESET
/* --------------------------- */
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* #endregion */
/* #region general */
/* --------------------------- */
/* GENERAL ELEMENTS
/* --------------------------- */
html, body {
    color: var(--textmain-color);
    font: var(--desktop-font-size) "nhg-reg";
    background-color: var(--background-color);
    margin: 0 auto;
}
h1,h2,h3,h4,h5,h6,p,blockquote,dl,img,figure {
    margin: 1rem 0;
}
h1,h2,h3,h4,h5,h6 {
    font-weight: bold;
    font-family: "nhg-bold";
}
h1 {
    font-size: 120%;
}
h2 {
    font-size: 105%;
}
h3 {
    font-size: 100%;
}
h4,h5,h6 {
    font-size: 100%;
}
h5, h6 {
    text-transform: uppercase;
}
p {
    margin: 1.25rem 0;
}
a,a:visited {
    color: var(--link-color);
    text-decoration: none;
}
a:hover {
    color: var(--link-color-hilite);
    text-decoration: underline;
}
strong, time, b {
    font-weight: bold;
}
em, dfn, i {
    font-style: italic;
}
sub {
    font-size: 60%;
    vertical-align: bottom;
}
small {
    font-size: 85%;
}
blockquote, q {
    border-left: 2px solid var(--quote-left);
    color: var(--quote-color);
    display: block;
    padding: 0 0.6rem;
}
cite {
    font-style: italic;
    font-weight: bold;
}
kbd,code,samp,pre,var {
    font-family: monospace;
    font-weight: bold;
    font-size: 90%;
}
code, pre {
    background: var(--blockquote);
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    overflow: hidden;
    font-size: 85%;
}
code pre, pre code {
    padding: 0;
    overflow: hidden;
}
hr {
    background: var(--border1);
    border: 0;
    height: 1px;
}
img {
    border: 1px solid var(--border1);
    display: block;
    height: auto;
}
figure {
    border: 1px solid var(--border1);
    display: inline-block;
    padding: 1rem;
    width: auto;
}
figure img {
    margin: 0;
}
figure figcaption {
    font-size: 80%;
    margin-top: 0.5rem;
}
ul, ol {
    margin: 2rem 0;
    padding: 0 0 0 4rem;
}
sup {
    font-size: 80%;
    vertical-align: super;
    background-color: var(--hilite-color);
}
dl dd {
    padding-left: 2rem;
}
table {
    border: 1px solid var(--border1);
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}
table caption {
    margin: 2rem 0;
}
table thead {
    text-align: center;
}
table tbody {
    text-align: right;
}
table tr {
    border-bottom: 1px solid var(--border1);
}
table tbody tr:nth-child(even) {
    background: var(--color-one);
}
table th {
    background: var(--color-two);
    font-weight: bold;
}
table th, table td {
    padding: 1rem;
}
table th:not(last-of-type), table td:not(last-of-type) {
    border-right: 1px solid var(--color-one);
}
input {
    appearance: none;
    border: 1px solid var(--border1);
    background-color: var(--input-off);
    display: block;
    margin: 0.5rem 0;
    padding: 0.8rem;
}
input:focus, input:active {
    border-color: var(--link-color);
    background-color: var(--input-on);
}
footer {
    font-size: 60%;
}
/* #endregion */
/* #region row */
/* --------------------------- */
/* GRID
/* --------------------------- */
#grid {
    display: flex;
    justify-content: center;
}
main, footer {
    width: 600px;
}
div.aside {
    width: 200px;
}
/* #endregion */
/* #region main */
/* --------------------------- */
/* MAIN
/* --------------------------- */
main, footer {
    padding: 1rem;
}
/* #endregion */
/* #region aside */
/* --------------------------- */
/* ASIDE
/* --------------------------- */
div.aside .nav-main-mobile {
    display: none;
}
div.aside .nav-main-mobile b {
    color: #000;
    background-color: #ff0;
    padding: .2rem .5rem;
}
div.aside {
    font-family: "nhg-reg";
    font-size: 70%;
    line-height: 180%;
    padding: 0em 1em 1em 1em;
    text-align: left;
}
div.aside a.selected {
    color: var(--selected-top);
    background-color: var(--selected-back);
    padding: 0.2rem 0.5rem;
    word-break: keep-all;
}
div.aside div {
    padding: 0.5rem 0;
    margin: 0 0;
}
div.aside .nav-main .site-name {
    background-color: #000;
    color: #fff;
    font-size: 125%;
    font-weight: 900;
    padding: 5px 8px;
}
div.aside .nav-main .site-name a {
    color: #fff;
}
div.aside .nav-style {
    margin: 0;
    padding: 0;
}
div.aside .nav-style button,
div.aside .nav-style button img {
    border: none;
    background: none;
    background-color: none;
    cursor: pointer;
    margin:  0;
    padding: 0;
	padding-top: 5px;
    width: 40px;
	position: relative;
	left: -5px;
}
/* #endregion */
/* #region row */
/* --------------------------- */
/* ROW
/* --------------------------- */
div.row {
    padding-bottom: 1rem;
}
div.row.content {
    padding-bottom: 0;
    margin-bottom: 0;
}
div.row.hidden {
    display: none;
}
div.row.index {
    font-size: 75%;
    margin-top: 1rem;
    border-bottom: 1px dotted var(--border1);
}
div.row.index em {
    white-space: nowrap;
}
div.row .date {
    font-size: 90%;
    color: var(--em);
}
div.row .info {
    color: var(--em);
    margin-bottom: 0.5rem;
}
div.row .quote-body {
    display: inline;
    font-size: 120%;
    word-break: keep-all;
}
div.row .tag {
    font-family: "nhg-bold";
    display: block;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border1);
}
/* #endregion */
/* #region header-nav */
/* --------------------------- */
/* HEADER AND NAV
/* --------------------------- */
div.links {
    font-size: 85%;
}
div.projects {
    font-size: 80%;
}
div.footer {
    font-size: 80%;
    padding-top: 0.5em;
}
div.profile {
    font-size: 75%;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px dotted var(--border1);
}
div.profile img {
    width: 65px;
    padding: 0;
    margin: 0;
    float: left;
    margin-right: 0.85rem;
}
div.subscribe {
    font-size: 85%;
}
div.latest-book {
    font-size: 90%;
}
/* #endregion */
/* #region media */
/* --------------------------- */
/* MEDIA
/* --------------------------- */
img, video, object, iframe, figure {
    width: 100%;
    border: 1px solid var(--border1);
    background-color: #ccc;
}
.video {
    aspect-ratio: 3 / 2;
}
iframe.youtube {
    aspect-ratio: 3 / 2;
}
iframe.bandcamp {
    /* bandcamp iframes are internally constrained to max 700px wide */
    aspect-ratio: 3 / 2;
}
iframe.bandcamp-tall {
    /* bandcamp iframes are internally constrained to max 700px wide */
    aspect-ratio: 9 / 11;
}
iframe.archive-org {
    height: 35px;
}
/* #endregion */
/* #region POST */
/* --------------------------- */
/* ENTRY
/* --------------------------- */
div.entry {
    height: auto;
    float: none;
    word-wrap: break-word;
    border-bottom: 1px solid var(--border1);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}
div.entry a {

}
div.entry b,
div.entry strong {
    font-family: "nhg-bold";
}
div.entry hr {
    border-top: 1px dotted var(--border1);
    background: none;
}
div.entry h1 {
    font-family: "nhg-bold";
    font-size: 140%;
}
div.entry h1,
div.entry p,
div.entry ul,
div.entry li {
    margin: 0;
    margin-bottom: 1rem;
    padding: 0;
}
div.entry ol {
    padding: 0;
    margin: 0;
    margin-left: 1.5rem;
}
div.entry ol li {
    list-style-type: decimal;
    padding: 0;
    margin: 0;
}
div.entry em {
    color: var(--em);
}
div.entry sup a {
    background-color: var(--hilite);
    margin: 0 0.2rem;
    padding: 0 0.2rem;
}
div.entry .custom {
    width: 40rem;
    float: none;
}
div.entry .currently h1 {
    display: none;
}
div.entry .info {
    font-size: 90%;
    font-family: "nhg-bold";
    padding: 0.5rem 0;
}
div.entry .info a {
    background: none;
}
div.entry .info .pinned img {
    width: 20px;
    background-color: transparent;
    border: none;
    margin: 0 0 10px 0;
}
div.entry .taglist a {
    background-color: var(--hilite);
    padding: 0 8px 2px 5px;
    margin-left: 10px;
    text-decoration: none;
}
div.entry .taglist a:hover {
    background-color: var(--hilite);
}
div.entry .authors {
    margin-bottom: 1rem;
}
div.entry .authors a {
    background-color: transparent;
}
div.entry .footnotes {
    position: relative;
    left: 0;
    margin: 0;
    width: 100%;
    font-size: 90%;
    word-wrap: break-word;
}
div.entry .footnotes hr {
    display: none;
}
div.entry .footnotes ol,
div.entry .footnotes ul {
    padding: 0;
    margin: 0;
    margin-left: 1rem;
}
div.entry sup a {
    text-decoration: none !important;
}
div.entry .footnotes p {
    text-decoration: underline;
    text-decoration-color: var(--hilite);
}
div.entry .keywords {
    display: block;
    color: #666;
    font-size: 80%;
    margin: 0.7rem 0;
}
/* #endregion */
/* #region pagination */
/* --------------------------- */
/* PAGINATION
/* --------------------------- */
.paginate {
    text-align: right;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px dotted var(--border1);
}
.paginate a {
    border: 1px solid var(--border1);
    padding: 4px 10px;
    text-decoration: none;
}
.paginate a:hover {
    background-color: var(--hilite);
    text-decoration: none;
}
.paginate span {
    margin-right: 10px;
}
/* #endregion */
/* #region pagination */
/* --------------------------- */
/* OTHER
/* --------------------------- */
div.archive {
    border-bottom: 1px solid var(--border1);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}
div.archive h1 {
    border-bottom: 1px solid var(--border1);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}
div.archive-posts p {
    margin: 5px 0;
}
div.archive-tags {
    column-width: 10em;
    column-rule: 1px solid #4b464a;
}
.test-para1 {
    background-color: lightblue;
}
/* #endregion */
/* #region mobile */
/* --------------------------- */
/* MOBILE
/* --------------------------- */
@media (max-width: 675px) {
    html, body {
        font: var(--mobile-font-size) "nhg-reg";
    }
    #grid {
        display: block;
        width: 100%;
        margin: auto;
    }
    main, footer {
	display: block;
        position: inherit;
        margin-top: 35px;
        margin-left: 0;
        width: 92%;
    }
    div.aside {
        position: absolute;
        top: 0;
        width: 100%;
        text-align: left;
        margin-top: 1rem;
        border-right: none;
        padding: 0em 1em 0em 1em;
    }
    div.aside a,
    div.aside div {
	    border: none;
	    padding: 0;
	    padding-bottom: 0.5rem;
	    margin: 0;
    }
    div.aside .nav-style {
        position: relative;
        left: -15px;
        display: block;
        float: right;
        border: none;
    }
    div.aside .nav-main {
	    display: none;
    }
    div.aside .nav-index {
	    display: none;
    }
    div.aside .nav-local {
	    display: none;
    }
    div.row.profile,
    div.aside .sitename,
    div.aside .nav-pagination,
    div.aside .nav-archive,
    div.aside .nav-comments,
    div.aside .nav-tags,
    div.aside .nav-rss {
        display: none;
    }
    div.aside .nav-main-mobile {
	    display: block;
	    overflow: hidden;
	    height: 1rem;
    }
    .row.links, .row.profile {
        font-size: 90%;
    }
	div.entry .taglist a {
		border: none;
		padding: 0 2px 0 2px;
		text-decoration: underline;
	}
    div.row .tag {
        font-size: 80%;
        display: block;
        border-bottom: none;
        margin-top: 1rem;
    }
}
/* #endregion */