:root {
    --fonts: ui-serif, "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
    --code-fonts: ui-monospace, Consolas, "Andale Mono WT", "Andale Mono", Menlo, Monaco, "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, "YaHei Consolas Hybrid", monospace, "Segoe UI Emoji", "PingFang SC", "Microsoft YaHei";

    --canvas: rgb(255, 255, 255);
    --canvas-text: rgb(27, 27, 27);
    --secondary-canvas-text: rgb(100, 100, 100);
}

@media (prefers-color-scheme: dark) {
    :root {
        --canvas: black;
        --canvas-text: rgb(210, 210, 210);
        --secondary-canvas-text: rgb(140, 140, 140);
    }
}

body {
    background: var(--canvas);
    color-scheme: light dark;
    color: var(--canvas-text);
    font-family: var(--fonts);
    padding-top: 5ex;
    margin-left: auto;
    margin-right: auto;
}

a {
    color: inherit;
}

pre,
code,
pre tt {
    font-family: var(--code-fonts);
}

body > header {
    text-align: center;
}

.site-title {
    display: block;
    font-size: 2em;
    font-weight: bold;
    margin-block-start: 0.67em;
    margin-bottom: 5px;
}

main {
    padding-left: 5ex;
    padding-right: 5ex;
    padding-bottom: 5ex;
    margin-left: auto;
    margin-right: auto;
    max-width: 75ex;
}

main .page-subject {
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
}

main article .page-subject {
    margin-bottom: 0;
}

main.taxonomy-term > .page-subject {
    margin-block-start: 1em;
}

main.taxonomy-term > .articles-year:first-of-type {
    margin-block-start: 0;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

header aside p {
    margin-top: 5px;
}

main.landing-page {
    margin-top: auto;
    margin-bottom: auto;
}

header nav ul {
    padding-bottom: 20px;
}

main.landing-page ul,
header nav ul,
main ul.articles {
    list-style: none;
}

main.landing-page ul {
    padding-left: 0;
}

main.landing-page ul h2,
main.landing-page ul p {
    display: inline-block;
    width: 45%;
}

main.landing-page li {
    font-size: small;
}


main.landing-page li h2 {
    text-align: right;
}

main.landing-page li p {
    margin-top: 17px;
    margin-left: 20px;
    margin-right: 30px;
    text-align: left;
    vertical-align: middle;
}

@media (max-width: 600px) {

    main.landing-page li h2 {
        text-align: left;
        margin-bottom: 0;
        margin-left: 0;
        width: 100%;
    }

    main.landing-page li p {
        display: block;
        margin-left: 0;
        margin-top: 5px;
        width: 100%;
    }

    main .articles {
        padding-left: 0;
    }
}

main.landing-page li:first-child {
    margin-top: 25px;
}

main.landing-page li:not(:first-child) {
    margin-top: 15px;
}

header nav ul {
    margin-top: 5px;
    padding-left: 0;
}

header nav li {
    display: inline;
}

header nav li:not(:last-child) {
    margin-right: 10px;
}

header nav a {
    display: inline;
    font-size: medium;
    font-weight: bold;
}

main {
    line-height: 27px;
}

main .articles time,
article header time,
article header .tags {
    color: var(--secondary-canvas-text);
}

article header .tags {
    margin-top: 0;
    padding-left: 0;
}

article header .tags a {
    display: inline;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

article header + p {
    margin-top: 25px;
}

main > h1 {
    margin-top: 35px;
}

main .articles,
main article header {
    padding-top: 25px;
}

main .articles li time {
    display: block;
}

main article h2 {
    margin-bottom: 0;
}

main .articles h3 {
    font-size: medium;
    font-weight: normal;
    margin-bottom: 0;
    padding-top: 20px;
}

.articles-year {
    margin-block-start: 2.5em;
}

.articles-year-heading {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--secondary-canvas-text);
    margin-block-start: 0;
    margin-block-end: 0.5em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--secondary-canvas-text);
}

.articles-year .articles {
    padding-top: 0;
}

.articles-year .articles > li:first-child h3 {
    padding-top: 0;
}

.slugline {
    color: var(--secondary-canvas-text);
    font-style: italic;
    margin-block-start: 0.25em;
    margin-block-end: 0;
}

article header .slugline {
    margin-block-start: 0.6em;
    margin-block-end: 0.6em;
}

pre {
    border: 1px solid var(--secondary-canvas-text);
    padding: 15px;
    overflow: auto;
}

main table {
    border-collapse: collapse;
    margin: 1em 0;
    max-width: 100%;
}

main th,
main td {
    border: 1px solid var(--secondary-canvas-text);
    padding: 0.4em 0.6em;
    text-align: left;
    vertical-align: top;
}

main td code {
    overflow-wrap: anywhere;
}

/* Let tables reclaim most of the parent's horizontal padding on narrow screens,
   where they would otherwise overflow their content box, while leaving a thin
   margin. Placed after the base table rules because media queries do not add
   specificity and source order breaks the tie. */
@media (max-width: 600px) {
    main table {
        margin-left: -4ex;
        margin-right: -4ex;
        max-width: none;
    }
}

.giallo-l {
    display: inline-block;
    min-height: 1lh;
    width: 100%;
}

.giallo-ln {
    display: inline-block;
    user-select: none;
    margin-right: 0.4em;
    padding: 0.4em;
    min-width: 3ch;
    text-align: right;
    opacity: 0.8;
}

img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

iframe[src*="youtube.com"] {
    aspect-ratio: 16 / 9;
    height: auto;
    width: 100%;
}