@font-face {
    font-display: swap;
    font-family: "PT Serif";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/pt-serif-400.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "PT Serif";
    font-style: italic;
    font-weight: 400;
    src: url("../fonts/pt-serif-400-italic.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "PT Serif";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/pt-serif-700.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "PT Serif";
    font-style: italic;
    font-weight: 700;
    src: url("../fonts/pt-serif-700-italic.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "PT Sans";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/pt-sans-400.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "PT Sans";
    font-style: bold;
    font-weight: 700;
    src: url("../fonts/pt-sans-700.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Inconsolata";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/inconsolata-400.woff2") format("woff2");
}

:root {
    color-scheme: light dark;

    /* https://tailwindcss.com/docs/colors */
    --stone-9: oklch(92.3% 0.003 48.717);
    --stone-8: oklch(86.9% 0.005 56.366);
    --stone-7: oklch(70.9% 0.01 56.259);
    --stone-6: oklch(55.3% 0.013 58.071);
    --stone-5: oklch(44.4% 0.011 73.639);
    --stone-4: oklch(37.4% 0.01 67.558);
    --stone-3: oklch(26.8% 0.007 34.298);
    --stone-2: oklch(21.6% 0.006 56.043);
    --stone-1: oklch(14.7% 0.004 49.25);

    --zinc-9: oklch(92% 0.004 286.32);
    --zinc-8: oklch(87.1% 0.006 286.286);
    --zinc-7: oklch(70.5% 0.015 286.067);
    --zinc-6: oklch(55.2% 0.016 285.938);
    --zinc-5: oklch(44.2% 0.017 285.786);
    --zinc-4: oklch(37% 0.013 285.805);
    --zinc-3: oklch(27.4% 0.006 286.033);
    --zinc-2: oklch(21% 0.006 285.885);
    --zinc-1: oklch(14.1% 0.005 285.823);

    --accent-zinc: oklch(83.7% 0.128 66.29);

    --serif: "PT Serif", serif;
    --sans-serif: "PT Sans", sans-serif;
    --mono: "Inconsolata", monospace;
    --content-width: 650px;
}

body {
    font-size: 20px;
    font-family: var(--serif);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-wrap: break-word;
    /*text-wrap: pretty;*/
    line-height: 1.6;
    color: var(--zinc-9);
    background-color: var(--zinc-2);
}

header,
footer {
    color: var(--zinc-7);
    background-color: var(--zinc-3);
    line-height: 1.5;
    font-family: var(--sans-serif);
}

header > nav,
footer > div {
    margin: 0.5em auto;
    padding: 0 1em;
    max-width: var(--content-width);
}

#site-logo-link {
    color: var(--zinc-9);
    font-size: 1.25em;
    font-weight: bold;
    text-decoration: none;
}

#site-logo-link:hover {
    color: var(--accent-zinc);
}

/*#nav-img {
    height: 50px;
    margin-right: 1em;
    margin-top: 0.25em;
}*/

nav {
    display: flex;
    align-items: center;
}

.nav-left {
    display: flex;
    justify-content: flex-start;
}

.nav-right > a:not(:first-child) {
    margin-left: 0.5em;
}

main {
    width: 100%;
    max-width: var(--content-width);
    margin: auto;
    padding: 1em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

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

a:hover {
    text-decoration: underline;
}

h1,
h2 {
    line-height: 1.15em;
    color: var(--zinc-9);
    font-family: var(--sans-serif);
}

h1 {
    font-size: 1.75em;
}

h2 {
    font-size: 1.35em;
    margin-top: 1.25em;
}

h3 {
    font-size: 1.15em;
    margin-top: 1.5em;
    line-height: 1.25em;
    color: var(--zinc-9);
    font-family: var(--sans-serif);
}

h4,
h5,
h6 {
    font-size: 1em;
    margin-top: 1em;
    line-height: 1.25em;
    color: var(--zinc-9);
    font-family: var(--sans-serif);
}

hr {
    border: none;
    width: 66%;
    height: 2px;
    border-top: 2px solid var(--zinc-4);
    background-color: var(--zinc-4);
}

code,
pre {
    overflow-x: auto;
    background-color: var(--zinc-1);
    color: var(--zinc-9);
    font-family: var(--mono);
}

pre {
    padding: 0.5em;
    line-height: 1.5;
    border-radius: 0.25em;
}

p > code {
    padding: 0 0.15em;
}

p {
    margin-block-start: 1.5em;
    margin-block-end: 1.5em;
}

figure {
    margin: 0;
    display: flex;
    justify-content: center;
}

figure figcaption {
    display: none;
}

img {
    max-width: 100%;
    border-radius: 0.25em;
}

#recent-note {
    margin-block-start: 1.5em;
    margin-block-end: 1.5em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    background-color: var(--zinc-3);
    padding: 1em 1.25em;
    color: var(--zinc-8);
    border-radius: 0.25em;
}

#recent-note #recently-updated-note {
    margin-top: 0;
}

#recent-note p {
    margin-bottom: 0;
}

#micro-blog-header {
    margin-top: 1.5em;
}

#micro-blog-header * {
    margin: 0;
    text-align: center;
}

.footnotes {
    margin-top: 1.5em;
}

.footnotes * {
    margin-bottom: 0;
}

blockquote {
    margin-block-start: 1.5em;
    margin-block-end: 1.5em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-style: italic;
    background-color: var(--zinc-3);
    padding: 1em 1.25em;
    border-left: 0.5em solid var(--zinc-4);
    color: var(--zinc-8);
    border-radius: 0.25em;
}

blockquote p {
    margin: 0;
}

blockquote > p:not(:first-child) {
    margin: 1em 0 0 0;
}

ul,
ol {
    padding-inline-start: 1.5em;
}

ul li::marker {
    font-size: 0.85em;
}

#note-meta {
    color: var(--zinc-7);
    font-family: var(--sans-serif);
    font-size: smaller;
    margin-top: 2em;
}

#note-meta p {
    margin: 0;
}

@media only screen and (max-width: 768px) {
    body {
        font-size: 18px;
    }

    main {
        padding-top: 0.5em;
    }
}