:root {
    --theme-black: rgb(61,61,61);
    --theme-white: rgb(250,250,250);
    --theme-accent-dark: rgb(114,158,0);
    --theme-accent-mid: rgb(166,209,102);
    --theme-accent-light: rgb(208,241,166);
    --fg: var(--theme-black);
    --accent-fg: var(--theme-accent-dark);
    --accent: var(--theme-accent-mid);
    --accent-inverted: var(--theme-accent-light);
    --bg: var(--theme-white);

    --font-size: 12pt;
    --max-width: 540px;
    --font-family: "Source Serif 4", Georgia, serif;
    --paragraph-spacing: 0;
    --text-indent: 1.25rem;
    --text-align: justify;
    --hyphens: manual;

    scroll-behavior: smooth;
}

[data-theme="dark"] {
    --fg: var(--theme-white);
    --accent-fg: var(--theme-accent-light);
    --accent: var(--theme-accent-mid);
    --accent-inverted: var(--theme-accent-dark);
    --bg: var(--theme-black);
}

.material-symbols-sharp {
    font-variation-settings:
    'FILL' 0,
    'wght' 700,
    'GRAD' 0,
    'opsz' 48
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size);
    line-height: 1.45;
    hyphens: var(--hyphens);
    -webkit-hyphens: var(--hyphens);
    -ms-hyphens: var(--hyphens);
    text-align: var(--text-align);
    max-width: var(--max-width);
    margin: auto;
    color: var(--fg);
    background-color: var(--bg);
    border: 0px dotted;
}

/* @media (max-width:35rem) {
    body {
        border: none;
    }
} */


/* ================================================ header and footer */


header, footer {
    text-align: left;
    padding: 0rem 1rem 0rem 1rem;
}

header { 
    color: var(--fg);
    margin-bottom: 2rem;
    border-left: solid 1.25rem var(--accent);
    margin-left: 1rem;
}

footer {
    color: var(--fg);
    margin-top: 4rem;
    text-align: right;
    border-top: 2pt solid var(--accent-fg);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

header h1 {
    font-weight: bold;
    font-style: italic;
    font-size: 300%;
    text-align: left;
    line-height: 1;
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    margin: 1rem 0 1rem 0;
    overflow-x: clip;
    color: var(--fg);
}

header nav ul {
    display: block;
    list-style: none;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

header nav ul li {
    display: inline;
    margin-right: 1rem;
    border-bottom: 0;
}

nav span.material-symbols-sharp {
    display: inline-block;
    font-size: 100%;
    transform: translateY(12%);
}

/* header nav ul li:before {
    content: "▸";
} */

header a {
    color: var(--accent-fg);
    text-decoration: none;
}

h2 {
    color: var(--fg);
    font-size: 200%;
    line-height: 150%;
    font-weight: normal;
    display: block;
    padding: 0 1rem 0 2.25rem;
    margin: 0 0 2rem 0;
    text-align: left;
    border-bottom: 2pt solid var(--accent-fg);
    text-transform: lowercase;
}

.back-button {
    text-transform: lowercase;
    display: inline-block;
    font-size: 100%;
    margin-top: 1rem;
    padding: 0;
}

/* ================================================ typography menu */

#typography-menu-container {
    z-index: 10;
    display: block;
    position: fixed;
    background-color: var(--bg);
    top: 0;
    left: 0;
    height: 100dvh;
    width: 100dvw
}

#typography-menu {
    display: flex;
    flex-direction: column;
    max-width: var(--max-width);
    min-height: 0;
    height: 100dvh;
    margin: 0 auto 0 auto;
}

#typography-menu-x {
    display: block;
    align-self: flex-end;
    width: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    background: none;
    color: var(--fg);
    opacity: 0.7279;
    cursor: pointer;
}

#typography-menu-x:hover {
    opacity: 1.0;
}

#typography-menu-x span {
    line-height: 100%;
    font-size: 3rem;
    float: right;
    text-align: right;
    margin: 0rem 1rem 0rem 0;
}

#typography-menu-settings {
    display: flex;
    text-align: left;
    margin: 0 1rem 1rem 1rem;
}

#typography-menu h3 {
    margin: 0 0 0.5rem 0;
    padding: 0 0 0 1.25rem;
    text-indent: 0;
}

#typography-settings, #font-radios {
    margin: 0;
    width: 100%;
    height: 100%;
}

#typography-settings {
    margin: 0 0.5rem 0 0;
}

#font-radios {
    margin: 0 0 0 0.5rem;
}

@media (orientation:portrait) {
    #typography-menu-settings {
        flex-direction: column;
    }

    #typography-settings {
        margin: 0 0 0.5rem 0;
    }

    #font-radios {
        margin: 0.5rem 0 0 0;
    }
}

#typography-settings>div, #font-radios>div {
    padding-left: 1.25rem;
    text-indent: -1.25rem;
}

#typography-menu-settings input {
    width: 1.25rem;
    margin: 0;
    padding: 0;
}

#typography-menu-settings input,
#typography-menu-settings label {
    cursor: pointer;
}

#typography-sample {
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    overflow: hidden;
    margin: 0 1rem 0 1rem;
    min-height: 1rem;
}


/* ================================================ generic page body */

a {
    color: var(--accent-fg);
    text-decoration: none;
}

a:hover {
/*     color: var(--fg); */
    text-decoration: underline;
    text-underline-offset: 0.333rem;
}

code {
    font-family: monospace;
    padding: 0 0.5ch 0 0.5ch;
}

h3 {
    font-size: 150%;
    line-height: 150%;
    display: block;
    padding: 0 1rem 0 2.25rem;
    margin: 2rem 0 1rem 0;
    text-align: left;
    color: var(--fg);
    border-bottom: 2pt dotted var(--accent-fg);
    text-transform: lowercase;
/*     border-bottom: 2pt solid var(--fg); */
/*     background-color: var(--accent); */
}

h2 + h3 {
    margin-top: 0;
}

h4 {
    font-size: 112.5%;
    line-height: 150%;
    display: block;
    padding: 0 1rem 0 0rem;
    margin: 1rem 0 0.5rem 2.25rem;
    text-align: left;
    color: var(--fg);
/*     border-left: 1rem solid var(--accent-fg); */
}

h3+h4 {
    margin-top: 1rem;
}

h4:before {
    font-family: "Courier New";
    content: "▶︎";
    display: inline-block;
    color: var(--accent-fg);
    width: 1.25rem;
    margin-left: -1.25rem;
}

div.page img {
    display: block;
    width: 100%;
}

div.page blockquote {
    border-left: 2pt solid var(--fg);
    margin: 1rem 0 1rem 1.25em;
}


.linkbox {
    display: flex;
    flex-direction: row;
    text-decoration: none;
/*     background-color: #ccc; */
    color: var(--accent-fg);
    margin: 0 1rem 0 1rem;
    padding: 0 0 1rem 0;
    overflow: auto;
    overflow: hidden;
}

.linkbox:hover {
    text-decoration: none;
/*     text-underline-offset: 0.5rem; */
    color: var(--fg);
}

.linkbox:hover h3 {
/*     text-decoration: underline; */
}

.linkbox:first-child {
    margin-top: 2rem;
}

.linkbox-text {
/*     background-color: #caf; */
    width: 100%;
    height: 100%;
    margin: auto 0 auto 0;
}

.linkbox-text p {
    color: var(--fg);
    line-height: 125%;
    text-align: left;
    text-indent: 0;
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    margin: 0 0 0rem 1.25rem;
}

.linkbox-img {
    object-fit: cover;
    max-width: 6rem;
    min-width: 6rem;
    background-image: url(linkbox_placeholder.webp);
    background-repeat: repeat;
    background-size: 8px;
}

.linkbox-img+.linkbox-text {
    margin-left: 1rem;
}

.linkbox h3 {
    color: inherit;
    line-height: 125%;
    font-size: 150%;
    margin: 0 0 0.25rem 0rem;
    padding: 0;
    border: 0;
}

.linkbox.comingsoon h3 {
    color: var(--fg);
}

.linkbox h3:after {
    display: inline-block;
    font-family: "Material Symbols Sharp";
    content: "arrow_forward";
    transform: translate(25%,18%);
}



/* .linkbox:before {
    float: right;
    font-size: 150%;
    line-height: 150%;
    padding-right: 0.5rem;
    content: "▸"
} */

div.page p {
    margin: 0 1rem 1rem 1rem;
    /* text-align: left; */
}

div.page p+ul {
/*     margin-top: -1rem; */
}

div.page img+p {
    /* margin adjustments for images */
    margin-top: 1rem;
}

div.page p+img {
    /* margin adjustments for images */
    margin-top: 1rem;
}

img.center {
    max-width: fit-content;
    margin: auto;
}

img.float-left {
    object-fit: contain;
    max-width: 25%;
    float: left;
    margin: 0 1rem 0rem 0;
}

img.float-right {
    object-fit: contain;
    max-width: 25%;
    float: right;
    margin: 0 0 0rem 1rem;
}

div.page ul {
    padding: 0 0 0 2.25rem;
    list-style: none;
}

div.page ul li {
    margin-right: 1rem;
    margin-bottom: 0.5rem;
}

div.page ul li:before {
    content: "■";
    color: var(--accent-fg);
    display: inline-block;
    width: 1.25rem;
    margin-left: -1.25rem;
    text-align: center;
}

div.page ol {
    padding: 0 0 0 2.25rem;
    list-style: none;
}

div.page ol li {
    counter-increment: item;
    margin-right: 1rem;
}

div.page ol li:before {
    content: counter(item) ".";
    color: var(--accent-fg);
    display: inline-block;
    width: 1.25rem;
    margin-left: -1.25rem;
}

div.page div.dateline {
    text-align: right;
    font-style: italic;
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    color: rgb(186,186,186);
    margin: 0 1rem 0 1rem;
}


/* ================================================ article style */


div.article hr {
    /* hide the default <hr> */
    margin: 2rem 0 2rem 0;
    border: none;
}

div.article hr::after {
    /* transform the <hr> into a dinkus! */
    color: var(--fg);
    display: block;
    text-align: center;
    line-height: 100%;
    font-size: 150%;
    letter-spacing: 1em;
    content: "∗∗∗"
}

div.article p {
    /* no paragraph spacing; indents by default */
    padding: 0 1rem 0 1rem;
    margin: 0 0 var(--paragraph-spacing) 0;
    text-indent: var(--text-indent);
}

div.article p:first-of-type,
div.article *:is(hr,h1,h2,h3)+p,
div.article *:is(hr,h1,h2,h3)+*:not(p)+p
{
    /* don't indent on the first paragraph,
    or any paragraph following a section break,
    or any paragraph following any other element
    which itself follows a section break*/
    text-indent: 0;
}

p.dropcap {
    margin-top: 1rem;
}

p.dropcap:first-letter {
    /* add drop caps to chapter beginnings */
    display: inline-block;
    font-size: 3rem;
    font-weight: bold;
    line-height: 0;
    text-transform: uppercase;
    color: var(--accent-fg);
    padding: 0;
    margin: 0;
}

div.article>p:last-of-type:after {
    /* place an end mark at the end of the article */
    content: "■";
    color: var(--accent-fg);
}

/* ================================================ gallery style */

#img-gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
}

.gallery-thumbnail {
    display: block;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1;
    width: 33.3333333%;
    padding: 0 0 0 0;
    object-fit: contain;
    border: 0;
    cursor: pointer;
}

.gallery-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

#img-viewer {
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 10;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

#img-viewer img {
    object-fit: contain;
    object-position: center;
    min-height: 0;
    min-width: 0;
    height: 100%;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: center;
}

#img-viewer-nav {
    display: flex;
    flex-direction: row;
    height: 6rem;
    width: 100%;
    z-index: 10;
    background-color: rgba(0,0,0,0.217637);
    left: 0;
    top: 0;
    padding: 0;
    margin: 0;
    background-color: none;
    overflow: hidden;
    cursor: pointer;
}

@media ((min-aspect-ratio: 16/9) and (max-height: 30rem)) {
    #img-viewer {
        flex-direction: row-reverse;
    }
    #img-viewer-nav {
        flex-direction: column;
        height: 100%;
        width: 6rem;
    }
}

#img-viewer-nav button {
    border: 0;
    padding: 0;
    margin: 0;
    flex: 1;
    cursor: pointer;
    background: none;
    color: rgba(255,255,255,0.7297);
    line-height: 100%;
    font-size: 4rem;
    width: 100%;
}

#img-viewer-nav button span {
    display: block;
    font-size: 4rem;
    margin: auto;
}

#img-viewer-nav button:hover {
    color: rgba(255,255,255,1.0);
}